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

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

<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に適切な値を与えて矩形の角を丸めることもできる。

参考サイト