SVG旋转路径 [英] SVG rotate path

问题描述

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

我想在这个小提琴。

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

  .gear {
    -webkit-动画：旋转2S无限线性的;
    -moz-动画：旋转2S无限线性的;
    -o-动画：旋转2S无限线性的;
    动画：旋转2S无限线性的;
}@ -webkit-关键帧旋转{
    从{-webkit-变换：旋转（0deg）;}
    为{-webkit-变换：旋转（359deg）;}
}
@ -moz-关键帧旋转{
    从{-moz-变换：旋转（0deg）;}
    为{-moz-变换：旋转（359deg）;}
}
@ -o-关键帧旋转{
    从{-o变换：旋转（0deg）;}
    为{-o变换：旋转（359deg）;}
}
@keyframes旋转{
    从{变换：旋转（0deg）;}
    为{变换：旋转（359deg）;}
}
 

解决方案

设置的 变换原产地 以 50％，50％为了使 SVG 动画功能，如 IMG 之一：

的更新了例这里

  .gear {
    变换原点：50％50％;
    -webkit-变换原点：50％50％;
    -moz-变换原点：50％50％;
}
 

值得注意的是， 变换原产地 属性是 50％50％0 。

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.

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

解决方案

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

UPDATED EXAMPLE HERE

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

It's worth noting that the default/initial value of the transform-origin property is 50% 50% 0.

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