MENU

Using SVG Elements

<animate> animates an attribute over time......AOCPX.
......attributeName="<attribute>": the attribute to animate.
......attributeType="{CSS | XML | auto}": the namespace for the attribute.
......begin="<clock value>": the initial delay.
......dur="<clock value>": the duration to interpolate for each iteration.
......end="<clock value>": the time that constrains the active duration for all iterations.
......min="<clock value>": the minimum value of the active duration for all iterations.
......max="<clock value>": the maximum value of the active duration for all iterations.
......restart="{always | whenNotActive | never}": whether the animation can be restarted.
......repeatCount="<number> | indefinite": the number of iterations. 'number' can be a partial fraction.
......repeatDur="<clock value> | indefinite": the total duration for all iterations. After this duration ends, the animation jumps to the point specified by 'end'.
......fill="{freeze | remove}": what happens when the active duration is over.
                'freeze' uses the last value.
                'remove' uses the original value.
......calcMode="{discrete | linear | paced | spline}": the interpolation mode.
                'discrete' jumps from one value to the next without any interpolation.
                'linear' uses simple interpolation between values.
                'paced' produces an even pace of change.
                'spline' interpolates according to a cubic Bezier spline.
......values="<number>": a semicolon-separated list of one or more values.
......keyTimes="{0.0 to 1.0}": a semicolon-separated list of time values used to control the pacing. This attribute must have exactly as many values as there are in the 'values'attribute. Each successive time value must be greater than the preceding time value.
......keySplines="<0.0 to 1.0 control point descriptions>": a semicolon-separated list of Bezier control point descriptions associated with 'keyTimes'. Each control point description is a set of four values: x1 y1 x2 y2, where x corresponds to the time interval, and y corresponds to the attribute value.
......from="<value>": the starting value of the animation.
......to="<value>": the ending value of the animation.
......by="<value>": a relative offset for the animation.
......additive="{replace | sum}": whether the animation will add to the underlying value of the attribute.
......accumulate="{none | sum}": whether each repeat iteration builds upon the last value of the previous iteration.

<set> sets the value of an attribute for a specified duration...... AOCX
......to="<value>": the ending value of the animation.
......attributeName (see <animate>)
......attributeType (see <animate>)
......begin (see <animate>)
......dur (see <animate>)
......end (see <animate>)
......min (see <animate>)
......max (see <animate>)
......restart (see <animate>)
......repeatCount (see <animate>)
......repeatDur (see <animate>)
......fill (see <animate>)

<animateMotion> moves an element along a path...... AOCX
......begin (see <animate>)
......dur (see <animate>)
......end (see <animate>)
......min (see <animate>)
......max (see <animate>)
......restart (see <animate>)
......repeatCount (see <animate>)
......repeatDur (see <animate>)
......fill (see <animate>)
......calcMode (see <animate>)
......values (see <animate>)
......keyTimes (see <animate>)
......keySplines (see <animate>)
......from (see <animate>)
......to (see <animate>)
......by (see <animate>)
......additive (see <animate>)
......accumulate (see <animate>)
......path="<path data>": the path to move along. (see 7.3.2)
......keyPoints="{0.0 to 1.0}": a semicolon-separated list indicating how far the object has moved at various 'keyTimes'.
......rotate="{<number> | auto | auto-reverse}": the rotation over time.
                'number' is the number of degrees of the constant rotation.
                'auto' rotates the object by the angle of the direction of the motion path.
                'auto-reverse' is like 'auto' plus 180 degrees.

<mpath> specified within <animateMotion> to reference the <path> element that defines the motion path......CX
......xlink:href="<iri>": the <path> element.

<animateTransform> animates a transformation attribute on a target element......AOCX
......type="{translate | scale | rotate | skewX | | skewY}": the type of transformation.
......attributeName (see <animate>)
......attributeType (see <animate>)
......begin (see <animate>)
......dur (see <animate>)
......end (see <animate>)
......min (see <animate>)
......max (see <animate>)
......restart (see <animate>)
......repeatCount (see <animate>)
......repeatDur (see <animate>)
......fill (see <animate>)
......calcMode (see <animate>)
......values (see <animate>)
......keyTimes (see <animate>)
......keySplines (see <animate>)
......form (see <animate>)
......to (see <animate>)
......by (see <animate>)
......additive (see <animate>)
......accumulate (see <animate>)