みさご解体新書

SVGアニメーション

変化の基本

<svg fill="#1c8b94" width="350" height="150">
  <circle cy="30" r="30" fill="#cd3830">
    <animate attributeName="cx" dur="3s" from="10" to="300" repeatCount="indefinite" />
  </circle>

  <circle cy="110" r="30" fill="#1c8b94">
    <animate attributeName="cx" dur="5s" from="300" to="10" repeatCount="indefinite" />
  </circle>
</svg>
プロパティ 意味
attributeName 変化させるプロパティ名
dur 変化の時間
from 変化前の値
to 変化後の値
repeatCount from ～ to までの変化を何回繰り返すか？
indefiniteを指定すると無限に繰り返す

回転

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="#cd3830">
    <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 0 100" dur="10s" repeatCount="indefinite" />
  </rect>
</svg>
プロパティ 意味
dur 回転時間

拡大縮小

<svg width="200" height="200">
  <g transform="translate(100 100)">
    <circle r="25" fill="#cd3830">
      <animateTransform
        attributeName="transform"
        type="scale" :dur="10s"
        repeatCount="indefinite"
        values="1 2; 2 1; 1 2" />
    </circle>
  </g>
</svg>
プロパティ 意味
dur 変化時間

形状変化

<svg width="200" height="200">
  <path fill="#cd3830">
    <animate
      attributeName="d"
      dur="10s" repeatCount="indefinite"
      values="M 0,0 L 40,0 80,0 40,80;
      M 0,80 L 40,0 80,80 40,80;
      M 0,0 L 40,0 80,0 40,80" />
  </path>
</svg>
プロパティ 意味
dur 変化時間

色

<svg width="200" height="200">
  <circle cx="40" cy="40" r="40">
    <animate
      attributeName="fill"
      dur="10s" repeatCount="indefinite"
      values="#cd3830; #1c8b94; #cd3830" />
  </circle>
</svg>
プロパティ 意味
dur 変化時間