<animateTransform>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The <animateTransform> SVG 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

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

DOM Interface

This element implements the SVGAnimateTransformElement interface.

Specifications

Specification
SVG Animations Level 2
# AnimateTransformElement

Browser compatibility

BCD tables only load in the browser