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.

animateTransform元素变动了目标元素上的一个变形属性,从而允许动画控制转换、缩放、旋转或斜切。

使用上下文

类别动画元素
允许的内容任意数量、任意顺序的下列元素:
描述性元素

示例

html
<?xml version="1.0"?>
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <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 接口。