此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

<animateTransform>

基线
广泛可用

自 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 Animations Level 2
# AnimateTransformElement

浏览器兼容性