Svg animations support

The following animations are supported in the library ^[1]

See Animation

:

• animate: This element is used to animate a single attribute or property over time
• animateTransform: This element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, or rotation
• animateMotion: This element causes a referenced element to move along a motion path.

Supported attributes for the animateTransform animation

The following attributes are supported for the animate animation:

• dur
• begin
• repeatCount
• from
• to
• type

Supported attributes for the animateMotion animation

The following attributes are supported for the animate animation:

• dur
• begin
• repeatCount
• from
• to
• path

Supported attributes for the animate animation

The following attributes are supported for the animate animation:

• dur
• begin
• repeatCount
• from
• to
• attributeName

Supported values for the attributeName atribute

The following values are supported for the attributeName attribute:

• x and y for rect, image, and g elements
• opacity and visibility for all elements
• width and height for rect and image elements
• fill for rect, circle, ellipse, and polygon elements
• stroke for rect, circle, ellipse, and polygon, line, path, and polyline elements
• r for circle elements
• rx and ry for ellipse elements
• x1, y1, x2, y2 for line elements

Limitations

• For the moment, animating the position of an element, or translating an element, does not work correctly in the browser. It works in the general case
• The skewX and skewY transformations are currently not supported