<animateTranform>要素は、アニメーションにrotate、scale、translate、skewX、skewYなど変換を指定するときに使います。
<animateTranform>>要素に指定可能な主な属性を次の表に示します。
名前 | 意味 | 属性値の例 |
---|---|---|
id | 識別名 | |
attributeName | 変化させる属性の名前 | |
attributeType | 変化させる属性のタイプ | "XML"、"CSS" |
type | 変換の種類 | "rotate"、"scale"、"translate"、"skewX/Y" |
from | 変化させる属性の初期値 | |
to | 変化させる属性の最終値 | |
begin | アニメーションを開始する時間 | |
dur | アニメーションの継続時間 | |
repeatCount | アニメーションの繰り返し回数 | |
fill | 塗り潰し |
次の例は楕円を回転させる例です。
<svg width="200" height="200" stroke="black" stroke-width="1px"
viewBox="-100 -80 200 200">
<ellipse cx="0" cy="0" rx="50" ry="30" stroke="black" fill="green">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="360" begin="0" dur="5s"
repeatCount="5" additive="sum" fill="freeze" />
</ellipse>
</svg>
次のように表示されます。