SVG animation element [1]: perceptual knowledge

Background description: SVG animation is precisely svg smil animation. The animation elements of SVG are developed in cooperation with the SMIL development team. The SMIL development team and the SVG development group have developed SMIL animation specifications, which define a basic set of XML animation features. SVG absorbs the advantages of SMIL animation specifications and provides some SVG inheritance implementations.

I. SVG SMIL animation can be used to build an animation that is difficult to build in css3.

For example, "moving along the specified path" is easy to implement in flash. However, SVG is much simpler to implement than Flash. The Code is as follows:

<SVG width = "360" Height = "200" xmlns = "http://www.w3.org/2000/svg"> <text font-family = "Microsoft yahei" font-size = "40" x = "0" y = "0" fill = "# cd0000"> horse <animatemotion Path = "M10, 80 q100, 120, 20 q140, -50 160,0 "begin =" 0 s "dur =" 3 S "repeatcount =" INDEFINITE "/> </text> <path d =" M10, 80 q100, 120, 20 q140,-50 "stroke =" # cd0000 "stroke-width =" 2 "fill =" NONE "/> </SVG>

Run the above Code in a browser that supports svg smil animation, such as chrome (the IE browser has never been replaced). You will see a "horse" moving along the Red path:

The <path> label code of the above SVG code is actually redundant in terms of functionality, In order to display the mobile path of the "horse", even if there is no such code, the "horse" will shift along the specified path. So the real functional code is:

<SVG width = "360" Height = "200" xmlns = "http://www.w3.org/2000/svg"> <text font-family = "Microsoft yahei" font-size = "40" x = "0" y = "0" fill = "# cd0000"> horse <animatemotion Path = "M10, 80 q100, 120, 20 q140,-50 "begin =" 0 s "dur =" 3 S "repeatcount =" INDEFINITE "/> </text> </SVG>

The path attribute value in the animatemotion tag can be searched online by using the SVG-edit editor to generate any path and convert it to a numerical value.

2. svg smil animations can be more interactive than pure css3 animations without relying on JavaScript.

The following code:

<SVG id = "SVG" width = "320" Height = "200" xmlns = "http://www.w3.org/2000/svg"> <circle id = "circle" Cx = "100" Cy = "100" R = "50"> </circle> <text font-family = "Microsoft yahei" font-size = "120" Y = "160" x = "160"> horse <animate attributename = "X" to = "60" begin = "circle. click "dur =" 3 S "/> </text> </SVG>

Effect:

When you click the black solid circle, the horse will shift to the circular direction. Similar results include:

<SVG width = "320" Height = "200" font-family = "Microsoft yahei" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink"> <text font-size = "120" Y = "160" x = "160"> horse <animate id = "animate" attributename = "X" = "60" begin = "INDEFINITE" dur = "3 S" repeatcount = "INDEFINITE"/> </text> <a xlink: href = "# animate"> <text x = "10" Y = "20" fill = "# cd0000" font-size = "20"> click me </text> </A> </SVG>

Effect:

When you click "Click me" in the red text, the "horse" will shift.

No JS is involved in all the above two interactions.

This article is only a perceptual knowledge of svg smil animation. We will continue to study more deeply.

Reference http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

Refer to the author's QR code:

SVG animation element [1]: perceptual knowledge