Question

我开始使用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);}
}

Answer 1

将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。

Answer 2

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

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

<svg class="gear" …

You may also have to set the transform-origin.

Answer 3

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

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

SVG旋转路径

3 个答案: