Css SVG旋转路径

我开始使用SVG，到目前为止一切正常，但当我尝试用CSS制作一些动画时，结果并不是我所期望的

我想旋转一个齿轮，就像在

下面是我用来旋转元素的CSS：

.gear {
    -webkit-animation: rotation 2s infinite linear;
    -moz-animation: rotation 2s infinite linear;
    -o-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to   {-o-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

---

实际上，它至少是用铬制作的。只是中心不正确。（尝试删除宽度、高度和x/y属性，同时仅使用SVG标记的viewBox。）

在Opera中，当将类“gear”设置为SVG元素而不是路径时，我可以让它工作：

<svg class="gear" …

设置为
50%50%
，以使
svg
动画功能与
img
类似：


值得注意的是，属性的默认值/初始值为
50%50%0
您可以在
svg
标记中添加此标记，以围绕其中心旋转：

<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="9s" additive="sum" repeatCount="indefinite" />


您的问题是什么？我想从svg旋转齿轮，就像从img@JoshCSee旋转齿轮一样（在svg中，每个默认值的变换原点不是
50%50%
的原因是
transform
不是svg 1.1中的属性。除非
transform origin
默认值是
0
，否则它会破坏大量现有svg内容）。需要注意的是，Chrome和Firefox之间并不一致。在FF中，旋转中心仍然位于画布的左上角。现在似乎被打破了：50%是从整个svg计算出来的，而不仅仅是这个路径。有任何更新吗？
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="9s" additive="sum" repeatCount="indefinite" />