revision:
Provides a way to animate an attribute of an element over time. Animation attributes include:
animation timing attributes: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill;
animation value attributes: calcMode, values, keyTimes, keySplines, from, to, by;
other animation attributes: attributeName, additive, accumulate;
animation event attributes: onbegin, onend, onrepeat.
codes:
<svg viewBox="0 0 10 6">
<rect width="5" height="5">
<animate attributeName="rx" values="0;5;0" dur="10s"
repeatCount="indefinite"/>
</rect>
</svg>
Specifies a color transformation over time. Animation attributes include:
animation timing attributes: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill;
animation value attributes: calcMode, values, keyTimes, keySplines, from, to, by;
other animation attributes: attributeName, additive, accumulate;
animation event attributes: onbegin, onend, onrepeat.
codes:
<svg width="400px" height="200px">
<circle cx="100" cy="100" r="70" fill="red">
<animateColor attributeName="fill" begin="1s" dur="10s" values ="red;
orange; yellow; green; blue; indigo; violet; red" repeatCount="indefinite"/>
</circle>
<circle cx="250" cy="100" r="70" fill="red">
<animate attributeName="fill" begin="1s" dur="10s" values ="red; orange; yellow;
green; blue; indigo; violet; red" repeatCount="indefinite"/>
</circle>
</svg>
Provides a way to define how an element moves along a motion path. To reuse an existing path, it will be necessary to use an <mpath> element inside the <animateMotion> element instead of the "path" attribute. Animation attributes include:
animation timing attributes: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill;
animation value attributes: calcMode, values, keyTimes, keySplines, from, to, by;
other animation attributes: attributeName, additive, accumulate;
animation event attributes: onbegin, onend, onrepeat.
codes:
<svg viewBox="0 0 200 100">
<path fill="none" stroke="grey"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>
</svg>
Animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. Animation attributes include:
animation timing attributes: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill;
animation value attributes: calcMode, values, keyTimes, keySplines, from, to, by;
other animation attributes: attributeName, additive, accumulate;
animation event attributes: onbegin, onend, onrepeat.
codes:
<svg width="240" height="240" viewBox="0 0 120 120">
<polygon points="60,30 90,90 30,90">
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite"/>
</polygon>
</svg>
Allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an SVG user agent. This is particularly useful to help SVG viewers conserve memory while displaying long-running documents.
The <discard> element may occur wherever the <animate> element may.
Provides the ability to reference an external <path> element as the definition of a motion path. Animation attributes include:
animation timing attributes: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill;
animation value attributes: calcMode, values, keyTimes, keySplines, from, to, by;
other animation attributes: attributeName, additive, accumulate;
animation event attributes: onbegin, onend, onrepeat.
specific attribute: xlink:href
codes:
<svg width="100%" height="100%" viewBox="0 0 500 300">
<rect x="1" y="1" width="498" height="298" fill="none" stroke="blue"
stroke-width="2" />
<!-- Draw the outline of the motion path in blue, along with three
small circles at the start, middle and end. -->
<path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none"
stroke="grey" stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="black"/>
<circle cx="250" cy="100" r="17.64" fill="yellow"/>
<circle cx="400" cy="250" r="17.64" fill="red"/>
<!-- Here is a triangle which will be moved about the motion path. It is defined with an upright orientation with
the base of the triangle centered horizontally just above the origin. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" >
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
Provides a simple means of just setting the value of an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. For attributes that can be reasonably be interpolated, the <animate> is usually preferred.
The <set> element is non-additive. The additive and accumulate attributes are not allowed, and will be ignored if specified.
Animation attributes include:
animation timing attributes: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill;
animation value attributes: calcMode, values, keyTimes, keySplines, from, to, by;
other animation attributes: attributeName, additive, accumulate;
animation event attributes: onbegin, onend, onrepeat.
codes:
<svg viewBox="0 0 10 10">
<style>
rect { cursor: pointer }
.round { rx: 5px; fill: green; }
</style>
<rect id="me" width="6" height="6">
<set attributeName="class" to="round" begin="me.click" dur="2s" />
</rect>
</svg>