SVG:animateMotion要素の使い方

ウオトミズ(UOTOMIZU)の中の人

SVGの<animateMotion>要素の使い方をまとめる。

animateMotion要素で出来ること

指定したpathに沿って要素を動かすことができる。

animateMotionの使い方

index.html


<svg>
<path id="animateMotionTarget" ...省略.../>
<circle ...省略...>
<animateMotion dur="15s" repeatCount="indefinite">
<mpath xlink:href="#aminateMotionTarget"/>
</animateMotion>
</circle>
</svg>
  • 任意のIDを付与した<path>を作成。
  • 動かしたい要素(例では<circle>)内に<animateMotion>を書く。
  • <animateMotion>内に <mpath>でIDを指定する。

 

注意!

path以外に使えない

<circle>とか<rect>などは指定できない。指定する先は<path>でないと動かない。

Classで指定しても動かない

<path>を指定する時に、<path class=”…”>として <mpath xlink:href=”.aminateMotionTarget”>と指定しても動かない。IDで指定すること。

 

他の記事もどうぞ

SVGの<animate>要素については以下の記事を参照。

 

参考記事

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO