W3cubDocs

/SVG

<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

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>

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGAnimateTransformElement interface.

Specifications

Specification
SVG Animations Level 2
# AnimateTransformElement

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
animateTransform 2 ≤79 4 No ≤12.1 3 4.4 18 4 ≤12.1 1 1.0
by No No No No No No No No No No No No
from No No No No No No No No No No No No
to No No No No No No No No No No No No
type No No No No No No No No No No No No

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform