SVG旋转路径 [英] SVG rotate path

问题描述

我开始使用SVG，到目前为止都没关系，但是当我尝试使用CSS做一些动画时，结果不是我预期的结果。

I'm starting to use SVG and so far it's all okay, but when I try to do some animation with CSS the result isn't what I expect it to be.

我想像这个小提琴那样旋转一个齿轮。

I want to rotate a gear like in this Fiddle.

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

Below is the CSS I used to rotate the elements:

.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);}
}

推荐答案

设置 transform-origin 到 50％50 ％，以使 svg 动画函数像 img 一样：

Set transform-origin to 50% 50% in order to make the svg animation function like the img one:

更新示例

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

值得注意的是， transform-origin 属性为 50％50％0 。

这篇关于SVG旋转路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！