<svg width="500" height="150">
  <rect id="rect" width="50" height="50" x="50" y="50" fill="deepPink" />
  <animateTransform
    xlink:href="#rect"
    attributeType="XML"
    attributeName="transform"
    type="rotate"
    from="0 75 75"
    to="360 75 75"
    dur="2s"
    begin="0s; 5s; 9s; 17s;"
    end="2s; 8s; 15s; 25s;"
    fill="freeze"
    restart="whenNotActive"
  />
</svg>
<p>
  这里使用了animateTransform动画元素<br>
  类型为 rotate <br>
 from="0 75 75" 表示从0deg开始，旋转中心为(75, 75) <br>
  可以理解为gsap中的 timeline 动画
</p>

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}

p {
  color: #aaa;
  text-align: center;
  margin: 2em 0;
}