元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

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

animateTransform

回転のアニメーション: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>

rotate

剪断のアニメーション: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要素は、座標系を変換してアニメーションさせます。