我开始使用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);}
}
解决方法
设置
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.
