SVG animation through animatemotion function
SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification; these elements include:
<animate>- which allows you to animate scalar attributes and properties over a period of time.
<set>- which is a convenient shorthand for animate, which is useful for assigning animation values to non-numeric attributes and properties, such as the visibility property.
<animateMotion>- which moves an element along a motion path.
<animateColor>- which modifies the color value of particular attributes or properties over time. Note that the
<animateColor>element has been deprecated in favor of simply using the animate element to target properties that can take color values. Even though it's still present in the SVG 1.1 specification, it is clearly noted that it has been deprecated; and it has been completely removed from the SVG 2 specification.
In addition to the animation elements defined in the SMIL spec, SVG includes extensions compatible with the SMIL animations spec; these extensions include attributes that extend the functionality of the
<animateMotion> element and additional animation elements. The SVG extensions include:
<animateTransform>- allows you to animate one of SVG's transformation attributes over time, such as the
path(attribute) - allows any feature from SVG's path data syntax to be specified in a path attribute to the
animateMotionelement (SMIL Animation only allows a subset of SVG's path data syntax within a path attribute). We'll talk more about
animateMotionin an upcoming section.
<mpath>- used in conjunction with the
animateMotionelement to reference a motion path that is to be used as a path for the motion. The mpath element is included inside the
animateMotionelement, before the closing tag.
keypoints(attribute) - used as an attribute for
animateMotionto provide precise control of the velocity of motion path animations.
rotate(attribute) - used as an attribute for
animateMotionto control whether an object is automatically rotated so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path. This attribute is the key to making motion along a path work as you'd expect. More about this in the
SVG animations can be similar to CSS animations and transitions via by their nature. Keyframes are created, things move, colors change, etc. However, they can do somethings that CSS animations can't do, which we'll cover.
Why Use SVG Animations?
SVGs can be styled and animated with CSS (slides). Basically, any transformation or transition animation that can be applied to an HTML element can also be applied to an SVG element. But there are some SVG properties that cannot be animated through CSS that can through SVG. An SVG path, for example, comes with a set of data (a
d="" attribute) that defines that path's shape. This data can be modified and animated through SMIL, but not CSS. This is because SVG elements are described by a set of attributes known as SVG presentation attributes. Some of these attributes can be set, modified, and animated using CSS, and others can't.
Specifying the target of the animation with
No matter which of the four animation elements you choose, you need to specify the target of the animation defined by that element.
In order to specify a target, you can use the
xlink:href attribute. The attribute takes a URI reference to the element which is the target of this animation and which therefore will be modified over time. The target element must be part of the current SVG document fragment.
Repeating Animations with
If you want to run an animation more than once, you can do that using the
repeatCount attribute. You can specify the number of times you want it to repeat, or use the
indefinite keyword to have it repeat endlessly.
The animation I did is:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 280 280" style="enable-background:new 0 0 280 280;" xml:space="preserve">
<circle class="st0" cx="140" cy="140" r="140"/>
<path class="st1" id="fox_path" d="M219.5,47.7l0.1-0.4l-0.3-0.2c-0.3-0.2-0.6,0-0.8,0.1c-51.3,24.2-89.1-1.7-89.4-2l-0.7-0.5l-0.1,0.8
c1.2-1.9,2.4-3.8,3.7-5.6l-2.5,41.2L152.5,172.7z M151.8,172.3l-78.1-41.1c8.4-1.7,50.4-10.5,60.3-20.1L151.8,172.3z M129.3,47.1
c-14.5-20.8-26.8-28.6-29.9-30.3L156.8,63.2z M117.1,88c0-0.1,0.1-0.2,0.1-0.3l0.1,0.1L117.1,88z M118.6,87
c-4-7.7-8.1-14.2-11.9-19.9l14.9-8.8L159.3,140.4z M160.4,139.5l2.8-27.4l10.1,11.1C168.8,128,164.3,133.4,160.4,139.5z M179.2,64.9
L62,162.6z M162.7,233.6L162.7,233.6L162.7,233.6L162.7,233.6z M196.7,223.4L166.9,234l-2.8-0.3l43-29.9L196.7,223.4z M162.7,233.5
l22.1-43l22.8,11.7L162.7,233.5z M183.9,190.1l-22.4,43.5l-0.6-0.1L72.6,131.7l95.3,50.1l0,0L183.9,190.1z M168.2,180.9l-5.9-3.1
<circle class="st2" cx="0" cy="0" r="3"/>
<animateMotion xlink:href="#Dot" begin="0s" dur="19s" id="anime1" repeatCount="indefinite" path="m129,46.25l12.25,5.5c0,0 14.75,4.75 14.75,4.75c0,0 17,2 17,2c0,0 17.75,-1.5 17.75,-1.5c0,0 12.25,-3 12.25,-3c0,0 16.5,-6.25 16.5,-6.25c0,0 -6.25,21.75 -6.25,21.75c0,0 -2.25,14.75 -2.25,14.75c0,0 -0.5,13 -0.5,13c0,0 -18.5,10.75 -18.5,10.75c0,0 -23.25,73.5 -23.25,73.5c0,0 39.75,20.75 39.75,20.75c0,0 -10.75,20.75 -10.75,20.75c0,0 -30,11.5 -30,11.5c0,0 -47.25,-4 -47.25,-4c0,0 -58.75,-68 -58.75,-68c0,0 9.75,-32 9.75,-32c0,0 18,-9 18,-9c0,0 16.25,-9.5 16.25,-9.5c0,0 15.25,-12.75 15.25,-12.75c0,0 3.5,-4.25 3.5,-4.25c0,0 -8,-5.75 -8,-5.75l12.5,-43zl0,0z
l2.875,11.125l-0.75,7.875l-3,8l-4.875,7.5l-6.625,7.375l39.375,-25.375l11.75,1.875l10.625,-0.25l32.5,32.375l-4.125,-9l-1.375,-5.875l0.125,-7.625l2.25,-8.875l3.625,-7.75l6.25,-8l-12.125,6.75l-13.125,5.25c0,0 -12.375,2.5 -12.25,2.5c0.125,0 -10.5,0.375 -10.5,0.375c0,0 -11.375,-1.375 -11.375,-1.375c0,0 -12.75,-4.625 -12.75,-4.625c0,0 -11.875,-7.875 -11.875,-7.875c0,0 -4.625,-4.375 -4.625,-4.375z
l13.625,7l11.75,3.25l19,2.5c0.125,0 12.875,-1.75 13.125,-1.75c0.25,0 18.75,-4.25 18.625,-4.25c0.125,0 10.375,-3.25 10.25,-3.25c0.125,0 2.375,-1.5 2.25,-1.5c0.125,0 -2.625,10.25 -2.75,10.25c0.125,0 -4.375,22.5 -4.5,22.5c0.125,0 -0.375,15.75 -0.375,15.75c0,0 -18,11 -18.125,11c0.125,0 -19.625,16.5 -19.75,16.5c0.125,0 -10.625,-12.75 -10.75,-12.75c0.125,0 4.875,-47 4.75,-47c0.125,0 -11.625,-1.25 -11.75,-1.25c0.125,0 -39.375,26.5 -39.125,26.25c0.25,-0.25 14,11 13.875,11c0.125,0 17.125,20.5 17,20.5c0.125,0 12.875,20.5 12.75,20.5c0.125,0 4.125,-5.75 4,-5.75c0.125,0 -1.875,42.25 -1.875,42.5c0,0.25 -90,-47 -90.125,-47c0.125,0 89.625,103.5 89.5,103.5c0.125,0 23.375,-44.25 23.25,-44.25c0.125,0 23.875,12 23.625,12c-0.25,0 -45.25,31.75 -45.375,31.75c0.125,0 -42.375,-3.25 -42.5,-3.25c0.125,0 -58.875,-68.25 -59,-68.25
c0,0.5 10.25,-31 10.125,-31c0.125,0 15.625,-3.25 15.5,-3.25c0.125,0 21.125,-5.5 21,-5.5c0.125,0 20.375,-7.25 20.25,-7.25c0.125,0 6.125,-4.5 6,-4.5c0.125,0 17.875,62.25 17.75,62.25c0.125,0 9.625,5 9.5,5c0.125,0 3.125,-43 3,-43c0.125,0 -5.375,6.5 -5.5,6.5c0.125,0 -11.875,-21 -12,-21c0.125,0 15.875,-10 15.75,-10