SVG 旋转路径答案

【问题标题】：SVG rotate pathSVG 旋转路径
【发布时间】：2014-02-19 02:23:18
【问题描述】：

我开始使用 SVG，到目前为止一切都还好，但是当我尝试使用 CSS 做一些动画时，结果并不是我期望的那样。

我想像this Fiddle 那样旋转齿轮。

下面是我用来旋转元素的 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);}
}

【问题讨论】：

你的问题到底是什么？
我想从 svg 旋转齿轮，就像从 img @JoshC 旋转齿轮

标签： css animation svg

【解决方案1】：

您可以在svg 标签内添加此标签，使其围绕其中心旋转：

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

【讨论】：

【解决方案2】：

将transform-origin 设置为50% 50% 以使svg 动画功能类似于img 之一：

UPDATED EXAMPLE HERE

.gear {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
}

值得注意的是transform-origin 属性的默认/初始值为50% 50% 0。

【讨论】：

见w3.org/TR/css-transforms-1/#transform-origin-property（为什么transform-origin默认不是svg中的50% 50%是因为transform不是SVG 1.1中的属性。它会破坏很多现有的svg内容，除非transform-origin 默认为 0 0)。
需要注意的是，这在 Chrome 和 Firefox 之间是不一致的。在 FF 中，旋转中心仍然在画布的左上角。
现在似乎坏了：50% 是从整个 svg 计算出来的，而不仅仅是这条路径。有这方面的更新吗？

【解决方案3】：

实际上它至少在 Chromium 中是动画的。只是中心不正确。（尝试删除宽度、高度和 x/y 属性，而仅使用 SVG 标签的 viewBox。）

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

<svg class="gear" …

You may also have to set the transform-origin.

【讨论】：