Html 寻找用CSS制作SVG动画

我想设置SVG图标的动画。 已经做了，但我错过了一些东西。我不熟悉CSS中的动画

问题在于，进入网站时SVG的位置不正确。此外，当SVG执行动画悬停动画时，就好像SVG div的维度完全更改并再次重新缩放

如何将SVG置于其初始的十字形中，并使其在自己的轴上旋转而不丢失其主要尺寸

标志{ 动画名称：旋转； 动画持续时间：4000ms； 动画迭代次数：无限； 动画计时功能：线性； 变换原点：中心； 动画播放状态：暂停； } svg：悬停标志{ 动画播放状态：运行； } @关键帧旋转{ 从{ 变换：旋转0度； } 到{ 变换：旋转360度； } }

---

这里有一个例子。基本上，我删除了变换，只处理宽度/高度和x/y数学

基本上，您可以根据需要创建一个视图框。我把它留到80，因为它比矩形的宽度大很多。你可以随心所欲地玩这些数字。这里的技巧是计算x轴和y轴

x=viewboxX/2-宽度/2

y=viewBoxX/2-宽度/2

一旦算出了，那么对于第二个正方形，我只是翻转宽度表示高度，x表示y，你得到了你的十字架

标志{ 动画名称：旋转； 动画持续时间：4000ms； 动画迭代次数：无限； 动画计时功能：线性； 变换原点：中心； 动画播放状态：暂停； } svg：悬停标志{ 动画播放状态：正在运行；} @关键帧旋转{ 从{ 变换：旋转0度； } 到{ 变换：旋转360度； }}

---

这里有一个例子。基本上，我删除了变换，只处理宽度/高度和x/y数学

基本上，您可以根据需要创建一个视图框。我把它留到80，因为它比矩形的宽度大很多。你可以随心所欲地玩这些数字。这里的技巧是计算x轴和y轴

x=viewboxX/2-宽度/2

y=viewBoxX/2-宽度/2

一旦算出了，那么对于第二个正方形，我只是翻转宽度表示高度，x表示y，你得到了你的十字架

标志{ 动画名称：旋转； 动画持续时间：4000ms； 动画迭代次数：无限； 动画计时功能：线性； 变换原点：中心； 动画播放状态：暂停； } svg：悬停标志{ 动画播放状态：正在运行；} @关键帧旋转{ 从{ 变换：旋转0度； } 到{ 变换：旋转360度； }}

---

马克·爱德华：他的答案是正确的

SVG可以清除所有不推荐使用的属性

将rect替换为单个路径，您可以使用viewBox和d=path来播放无法在路径中使用%百分比的大小

我重写了一点，以表明您没有为SVG本身设置动画；但里面只有一个元素

svg{ 背景：浅绿色； 宽度：200px； } svg路径{ 动画：旋转4s线性无限暂停； 变换原点：中心； } svg：悬停路径{ 动画播放状态：运行； } @关键帧旋转{ 来自{transform:rotate0deg} 到{变换：旋转360度} }

---

马克·爱德华：他的答案是正确的

SVG可以清除所有不推荐使用的属性

将rect替换为单个路径，您可以使用viewBox和d=path来播放无法在路径中使用%百分比的大小

我重写了一点，以表明您没有为SVG本身设置动画；但里面只有一个元素

svg{ 背景：浅绿色； 宽度：200px； } svg路径{ 动画：旋转4s线性无限暂停； 变换原点：中心； } svg：悬停路径{ 动画播放状态：运行； } @关键帧旋转{ 来自{transform:rotate0deg} 到{变换：旋转360度} }

---

非常感谢你！我认为问题在于我使用Illustrator制作SVG，它设置了这些参数，因为除了添加变换参数之外，我在为矩形制作向量时使用了两个不同的层。真的很有效，非常感谢！另外，我猜您忽略了代码中ID的错误用法。不能将同一id设置为多个元素。使用类instead@Sapinder是的，我将id添加到组中，但忘记将其从svg中删除。但正如你所说

---

d、 在这种情况下，类也会有所帮助。更新了上面的示例代码。非常感谢！我认为问题在于我使用Illustrator制作SVG，它设置了这些参数，因为除了添加变换参数之外，我在为矩形制作向量时使用了两个不同的层。真的很有效，非常感谢！另外，我猜您忽略了代码中ID的错误用法。不能将同一id设置为多个元素。使用类instead@Sapinder是的，我将id添加到组中，但忘记将其从svg中删除。但正如你所说，在这种情况下，一个类也会有所帮助。更新了上述示例代码。在本例中可能不相关，但id在SVG和HTML中应该是唯一的。在本例中可能不相关，但id在SVG和HTML中应该是唯一的。