<animateTransform>

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

<animateTransform> SVG 元素会为目标元素的一个变换属性添加动画,从而允许动画控制平移、缩放、旋转和/或倾斜。

使用语境

分类动画元素
允许内容可包含任意数量、任意顺序的下列元素
描述性元素

示例

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>

属性

DOM 接口

此元素实现了 SVGAnimateTransformElement 接口。

规范

规范
SVG 动画级别 2
# AnimateTransformElement

浏览器兼容性