SVG旋转路径

Question

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

Answer 1

设置transform-origin为50% 50%使svg动画功能像img:

这里有更新的例子

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

值得注意的是,该transform-origin属性的默认/初始值是50% 50% 0.