SVG:animate要素の使い方

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

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

<animate>要素の基本の形

index.php


<rect x="0%" y ="50%" fill="#fff" stroke="blue" stroke-width="1">
<animate attributeName="x" from="0%" to="" dur="100%" repeatCount="indefinite">
</rect>

上記のコードのように動かしたい要素の中に<animate>を記述する。そして<animate>の属性を指定していく。

 

<animate>要素で使う6つの属性

<animate>要素用に6つの属性がある。

attributeName アニメーション中に動かす要素の属性(x, y, cx etc.)を指定する。
attributeType 値は、CSS、XML、autoの三つ。
from attributeNameで指定した属性を動かす範囲を指定する。
to attributeNameで指定した属性を動かす範囲を指定する。
dur 値は『時間を表す値(h:時、m:分、s:秒、ms:ミリ秒)』または、indefinite。初期値は、indefinite。
repeatCount アニメーションを繰り返す回数を指定する。無制限の場合は、indefinite。

attributeName属性で指定する値を変えて、そのattributeName属性の値に適したto属性やfrom属性を記述していくと色々なアニメーションが出来る。

 

注意!

  1. <animation>ではなく<animate>
  2. <circle /></circle>ではなく、<circle></circle>

<animation>ではなく<animate>

CSSのanimetionプロパティーと混同して、<animation>と記述すると、動かないので注意すること。記述しているのに動かない場合は、<animate>と記述しているかチェックしてみると良いかも。

 

<circle /></circle>ではなく、<circle></circle>

<circle /><animate attributeName=”….. ></circle>となっていると、アニメーションが動かない。必ず<circle><animate attributeName=”….. ></circle>とするように。記述しているのに動かない場合は、<circle></circle>と記述しているかチェックしてみると良いかも。

 

SVGに関するブックマーク

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

 

 

.
スポンサーリンク

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

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