インラインでのアニメーション
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect width="10" height="10">
<animate attributeName="rx" values="0;10;0" dur="1s" repeatCount="indefinite" />
</rect>
</svg>
attributeName | アニメーション中に動かす要素の属性(x, y, cx etc.)を指定する。 |
values | セミコロン(;)区切りの値のリスト.主にkeyTimesと一緒に用いる.この値はfrom,to,byに優先する. |
from | attributeNameで指定した属性を動かす範囲を指定する。 |
to | attributeNameで指定した属性を動かす範囲を指定する。 |
by | |
dur | 値は『時間を表す値(h:時、m:分、s:秒、ms:ミリ秒)』または、indefinite。初期値は、indefinite |
repeatCount | アニメーションを繰り返す回数を指定する。無制限の場合は、indefinite。 |
rect要素は、平行な矩形を定義する。
属性rx,ryに適切な値を与えて矩形の角を丸めることもできる。
コメント