This article introduces the usage and Analysis of Several animation elements in VG to coders. For more information about coders, see. VG is short for Scalable Vector Graphics. With the development of browser technology, SVG is increasingly used on Web pages. SVG has many advantages, such as small size, no distortion during scaling, and dynamic changes. It is suitable for making animations, readable formats, easy to use, and search engine optimization.
SVG performs exceptionally well in animation. This article mainly introduces several elements used for animation in SVG, which are:
-
I will use a strong demonstration to show you the specific usage of these elements.
Introduction to element usage
Elements are usually placed in an SVG Image Element to define the animation change process of an attribute of the image element. We need to set the animation duration, as well as the initial values of the attribute values and the changed values.
WhererepeatCount
The attribute value can be a number or "indefinite", meaning an infinite loop.
Introduction to element usage
An element is placed in an image element. It can reference an animation path defined in advance, allowing the image element to move in the path-defined manner.
Usage
The element has more control over the motion and transformation of the image. It can specify the conversion, scaling, rotation, and distortion of the image.
Wheretype
The attribute value can betranslate | scale | rotate | skewX | skewY
.
Introduction to element usage
The usage of an element has exists in the preceding example. It is an auxiliary element and can be used to reference an external definition. . Let the Image Element follow this Trajectory movement.
The above demonstrates that only some common attributes are used. These elements also have many complex usage and various attributes. I will introduce it to you later.