Css 循环循环摆动的SVG旋转动画

这似乎是我的SVG图像的Inkscape SVG输出的一个问题。变换矩阵似乎引起了圆的轻微抖动。因为我不倾向于数学，也永远不会倾向于数学，所以我被难倒在如何纠正这个问题上，这样它就不会摆动

我尝试了CSS3动画和SVG动画转换。两者行为相同。我可以通过编辑变换矩阵来改变抖动，但它只会变得更糟

为了简洁起见，我在这里只使用了webkit专有css

我在这里创作了一把小提琴：

.盒子{
边框：1px实心#c00；
宽度：2em；
高度：2em；
位置：相对位置；
}
@-webkit关键帧旋转刷新{
0% {
-webkit变换：旋转（0度）scaleX（1）scaleY（1）skewX（0度）skewY（0度）；
}
100% {
-webkit变换：旋转（360度）scaleX（1）scaleY（1）skewX（0度）skewY（0度）；
}
}
旋转体{
宽度：35px；
高度：35px；
-webkit动画：rotateRefresh 4s线性无限；
位置：绝对位置；
排名：0；
左：0；
}
.refresh-STATUS 1{
宽度：35px；
高度：35px；
}

您的SVG未在其视图框中居中。如果提取并添加对比背景，您可以看到这一点

Inkscape没有添加viewBox属性，所以我猜这是您自己做的

如果调整viewBox的宽度和高度使其正确（图中的紧密配合），则它不应抖动。将“18”改为“17.3”似乎有效

viewBox="0 0 17.3 17.3"

---

它在viewBox中也没有完全正确居中（它很小地向下和向左），但在最终的动画中，这个微小的错误并不是真正可见的。

是的，我自己正在进入viewBox并猜测。那个编辑工作得很好！这已经让我发疯一周了。你是怎么得出17.3分的？这不是35/2。那将是17.5。我只是在第一个JSFIDLE演示中调整了viewBox，直到红色框看起来正确为止。

viewBox="0 0 17.3 17.3"