The animateTransform
element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.
Usage context
Categories | Animation element |
---|---|
Permitted content | Any 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
- Conditional processing attributes »
- Core attributes »
- Animation event attributes »
- Xlink attributes »
- Animation attribute target attributes »
- Animation timing attributes »
- Animation value attributes »
- Animation addition attributes »
externalResourcesRequired
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
animateTransform | Chrome Full support Yes | Edge Full support ≤79 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
by | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
from | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
to | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
type | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | 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