编辑 .svg 以制作动画 - XML答案

【问题标题】：Edit .svg to animate - XML编辑 .svg 以制作动画 - XML
【发布时间】：2020-04-09 11:16:38
【问题描述】：

有人可以帮我正确旋转这张图片的磁盘吗？我已经尝试了一些东西（如果你运行代码），但没有成功。但是磁盘有跳动它应该是这样的：https://mensis.ro/wp-content/uploads/2019/12/Logo-Doors.gif

<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="10s"
repeatCount="indefinite" />

完整代码：https://pastebin.com/d7Ur54ZB

谢谢！

【问题讨论】：

标签： css xml animation svg

【解决方案1】：

为了防止光盘跳动，必须正确指示旋转中心。
CSS 规则可以帮助你做到这一点：transform-box: fill-box

添加到您的应用程序：

#disk{
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotate_disk 10s linear forwards infinite;
  }

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

CODEPEN

【讨论】：

【解决方案2】：

为了不混合两种不同的解决方案并方便选择其中一种，此选项被拟定为一个单独的主题。
在第一个解决方案中，位图被转换为 base64 格式。此解决方案没有任何好处，因为在这种情况下 SVG 的行为类似于普通的光栅图像。
但是文件大小非常大 - 132k，因此阅读和编辑不方便。

考虑一种动画位图图像的解决方案。

光栅图像可以使用<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="https://i.stack.imgur.com/34irD.png"/>

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

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

在本实施例中，文件大小为824字节

【讨论】：