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

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

 menu

【SVG】アニメーション3(パスに沿った移動)

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animateMotion要素」について見ていきます。animateMotion要素は、パスに沿って図形をアニメーションさせるものです。

animateMotion要素

パスの指定方法は以下の2つがある。

  • animateMotion要素のpath属性
  • mpath要素でパスを参照する
<defs>
  <path id="path1" d="M65,10 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/>
</defs>

<use href="#path1" stroke-width="0.3" stroke="blue" fill="none"/>
<rect x="-20" y="0" width="20" height="5" fill="red">
  <animateMotion dur="20s" repeatCount="indefinite">
    <mpath href="#path1"/>
  </animateMotion>
</rect>

パスの向きに応じた角度の変化

  • rotate属性
    • 図形を回転させる角度を指定する属性
<defs>
  <path id="path1" d="M65,10 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/>
</defs>

<use href="#path1" stroke-width="0.3" stroke="blue" fill="none"/>
<rect x="-20" y="0" width="20" height="5" fill="red">
  <animateMotion dur="20s" repeatCount="indefinite" rotate="auto">
    <mpath href="#path1"/>
  </animateMotion>
</rect>

まとめ

animateMotion要素の記述方法について書きました。animateMotion要素は、パスに沿って図形をアニメーションさせます。パスの向きに応じて図形の角度を変更できます。