【SVG】アニメーション2(座標系の変換)

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animateTransform要素」について見ていきます。animateTransform要素は、座標系を変化させることによってアニメーションさせるものです。

animateTransform要素

animateTransform要素には、「attributeName属性」と「type属性」を指定する。attributeName属性には、transformを指定する。type属性には、下記のような変化のタイプを指定する。

• translate:移動
• scale:拡大
• rotate:回転
• skewX:x軸に沿った剪断
• skewY:y軸に沿った剪断

移動のアニメーション:translate

<g fill="red">
  <circle cx="0" cy="0" r="5"/>
  <circle cx="5" cy="0" r="5"/>
  <animateTransform attributeName="transform"  type="translate" from="0, 0" to="100, 70" dur="5s" repeatCount="indefinite"/>
</g>

拡大のアニメーション:scale

<g transform="translate(50, 60)">
  <text x="-40" y="0" font-size="10" font-family="serif" fill="green">
  animateTransform
    <animateTransform attributeName="transform" type="scale" from="1" to="20" dur="10s" repeatCount="indefinite"/>
  </text>
</g>

回転のアニメーション:rotate

<g>
  <g stroke-width="2" stroke="blue">
    <line x1="40" y1="35" x2="60" y2="35"/>
    <line x1="50" y1="25" x2="50" y2="45"/>
  </g>
  <text x="55" y="45" font-size="14" font-family="serif" fill="blue">rotate</text>
  <animateTransform attributeName="transform" type="rotate" from="0, 50, 35" to="360, 50, 35" dur="5s" repeatCount="indefinite"/>
</g>

剪断のアニメーション:skewX,skewY

<symbol id="cross" stroke-width="3">
  <line x1="10" y1="20" x2="30" y2="20"/>
  <line x1="20" y1="10" x2="20" y2="30"/>
</symbol>
<use xlink:href="#cross" stroke="navy">
  <animateTransform attributeName="transform" type="skewX" from="0" to="70" dur="5s" repeatCount="indefinite"/>
</use>
<use xlink:href="#cross" stroke="crimson">
  <animateTransform attributeName="transform" type="skewY" from="0" to="70" dur="5s" repeatCount="indefinite"/>
</use>
<use xlink:href="#cross" stroke="limegreen"/>

まとめ

animateTransform要素の記述方法について書きました。animateTransform要素は、座標系を変換してアニメーションさせます。