【SVG】インラインでのアニメーション 1

javascript

インラインでのアニメーション

<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に優先する.
fromattributeNameで指定した属性を動かす範囲を指定する。
toattributeNameで指定した属性を動かす範囲を指定する。
by
dur値は『時間を表す値(h:時、m:分、s:秒、ms:ミリ秒)』または、indefinite。初期値は、indefinite
repeatCountアニメーションを繰り返す回数を指定する。無制限の場合は、indefinite。

rect要素は、平行な矩形を定義する。
属性rx,ryに適切な値を与えて矩形の角を丸めることもできる。

参考サイト

コメント