animation - 如何在SVG中添加自定义动画？

Question

我想使用动画旋转已在 SVG 中内置的图像，无需任何在线网站、编辑器且无需 jQuery。我想定制。

请帮忙。

Answer 1

CSS 动画

可以使用 <image> 在 SVG 中添加光栅图像标签

并使用常用的 CSS 动画规则

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="499.968" height="281.232" viewBox="0 0 1920 1080">
<defs>
    <style>
      .cls-1 {
        opacity: 0.96;
      }
	 #disk{
	transform-origin: center center;
	transform-box: fill-box;
	animation: rotate_disk 10s linear forwards infinite;
  }

  @keyframes rotate_disk {
  	100% {
  		transform: rotateZ(360deg);
  	}
  }
	  
    </style>
  </defs>
<image x="293" y="75" width="1255" height="959" xlink:href="/image/34irD.png"/>

<image id="disk" class="cls-1" x="515" y="165" width="815" height="815" xlink:href=" /image/Qas6q.png"/> 

<image id="scris" class="cls-1" x="363" y="740" width="1105" height="233" xlink:href=" /image/TCbha.png"/>
</svg>

SVG 动画

旋转动画时没有圆盘跳动，因此有必要精确计算旋转中心

计算时，JS方法getBBox ()已使用

<script>
let BB = gr1.getBBox();

 console.log(BB.x + BB.width / 2);
 console.log(BB.y + BB.height / 2);
</script>

获取的旋转中心坐标:x="925.5" y="572.5"

旋转动画公式:

<animateTransform attributeName="transform" type="rotate" dur="10s"
 values="0 922.5 572.5;360 922.5 572.5;"  />

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="499.968" height="281.232" viewBox="0 0 1920 1080">

<image x="293" y="75" width="1255" height="959" xlink:href="/image/34irD.png"/>
<g id="gr1">
<image id="disk" class="cls-1" x="515" y="165" width="815" height="815" xlink:href=" /image/Qas6q.png"/> 
  <animateTransform attributeName="transform" type="rotate" dur="10s" values="0 922.5 572.5;360 922.5 572.5;" repeatCount="indefinite"  />
</g>
<image id="scris" class="cls-1" x="363" y="740" width="1105" height="233" xlink:href=" /image/TCbha.png"/>
</svg>