<animateTranform>

<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>
  

次のように表示されます。


関連項目

line


SVG目次 inserted by FC2 system