<animateTransform>

The animateTransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.

Usage context

CategoriesAnimation element
Permitted contentAny number of the following elements, in any order:
Descriptive elements

Example

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

    <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>

Live sample

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGAnimateTransformElement interface.

Specifications

Specification Status Comment
SVG Animations Level 2
The definition of '<animateTransform>' in that specification.
Editor's Draft No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<animateTransform>' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
animateTransformChrome Full support YesEdge Full support ≤79Firefox Full support YesIE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android Full support Yes
byChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fromChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
toChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
typeChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown