animateTransformを使ってSVGにアニメーションを埋め込む 🎥

これまでSVGを動かす場合、CSSの@keyframesを使ってました。

developer.mozilla.org

具体的には、こちらのSVGを回転させたい場合、

CSS（抜粋）

svg {
  animation: rotate .8s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

という感じのコードを書いていました。

DEMO

しかし、先日animateTransformを使えば、SVGにアニメーションが埋め込めることを知りました。

developer.mozilla.org

具体的には、

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <animateTransform 
    attributeName="transform" 
    attributeType="XML" 
    type="rotate"
    dur=".8s" 
    from="0 0 0"
    to="360 0 0" 
    repeatCount="indefinite" />
  <path d="M1.5,9.5c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5,1.5,.67,1.5,1.5-.67,1.5-1.5,1.5ZM4.9,3.4c0,.83-.67,1.5-1.5,1.5s-1.5-.67-1.5-1.5,.67-1.5,1.5-1.5,1.5,.67,1.5,1.5Zm0,9.2c0,.83-.67,1.5-1.5,1.5s-1.5-.67-1.5-1.5,.67-1.5,1.5-1.5,1.5,.67,1.5,1.5ZM9.5,1.5c0,.83-.67,1.5-1.5,1.5s-1.5-.67-1.5-1.5,.67-1.5,1.5-1.5,1.5,.67,1.5,1.5Zm0,13c0,.83-.67,1.5-1.5,1.5s-1.5-.67-1.5-1.5,.67-1.5,1.5-1.5,1.5,.67,1.5,1.5Zm4.6-1.9c0,.83-.67,1.5-1.5,1.5s-1.5-.67-1.5-1.5,.67-1.5,1.5-1.5,1.5,.67,1.5,1.5Zm1.9-4.6c0,.83-.67,1.5-1.5,1.5s-1.5-.67-1.5-1.5,.67-1.5,1.5-1.5,1.5,.67,1.5,1.5Z" />
</svg>