<animateTransform>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨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>