旋转椭圆SVG对象

Question

我正在尝试让我的椭圆形图像以固定的角度旋转，这样轮廓就可以围绕一个区域旋转，而不会改变该区域的形状。

我该怎么做？我只能使用一张图片，还是需要几张沿着椭圆形路径的小图片？

这就是我所做的(jsfiddle)，因为你可以看到区域的形状随着旋转而改变

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="20" y="20" width="300" height="80"
     xlink:href="http://i.imgur.com/gTlsQx4.png">
  <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 180 50"
                    to="360 180 50"
                    dur="4s"
                    repeatCount="indefinite"/>
</image>  
</svg>

Image for more clarity

Answer 1

我不是一个图形天才，但我很确定这不是你所拥有的。如果去掉动画并检查PNG本身，您会注意到齿轮已经以固定的two-point perspective方式扭曲了--齿轮正在向我们--观众--“伸展”。

但图像本身是2D的，无论您如何在SVG、CSS或Canvas中旋转它，齿轮总是以相同的方式拉伸。

如果有解决方案，它将在动画中的关键点涉及一些严重的图像扭曲，并且在光栅化的图像上执行扭曲将始终降低视觉保真度。

以下是一些替代方案：

• 有个不错的老办法:用

动画制作齿轮完全旋转的3D动画。

• 你可以把一个3D动画切成一系列2D帧，然后把它们打碎在一个精灵纸上，然后用Flash制作动画。
• 你可以尝试用WebGL。

Answer 2

有趣的问题。我通过使用变换矩阵倾斜外部容器，然后旋转内部图像来解决它。你的svg动画在这方面是不可靠的，所以我使用了一个不同于font awesome的齿轮：

http://jsfiddle.net/psd32q68/2/

div{
    font-size:84px;
    margin-top:50px;
    margin-left:150px;
transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);
-webkit-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);
-moz-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);
-o-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);
-ms-transform: matrix3d(0,-0.5,1.00,0,0.50,0.87,0.00,.003,-1,0,0,0,0,0,0,1);


}
span{
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

--

   <div>
        <span class="fa fa-cog"></span>
    </div>

Answer 3

正如其他人所说，你的齿轮是在透视中绘制的，所以你不能使用正常的旋转并期望它看起来正确。

您需要做的是将SVG绘制为一个平面齿轮，然后可以使用CSS 3D转换将透视投影添加到旋转的齿轮上。

下面是一个有效的示例：

​

svg
{
    margin: 100px;
    transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -webkit-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -o-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -ms-transform: matrix3d(0.9, 0.17, 0, 0, 0.01, 2.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

<svg width="100" height="100" viewBox="0 0 100 100">
    <g stroke="black" fill="none" transform="translate(50,50)">
        <g>
            <circle r="38" stroke-width="8"/>
            <line x1="38" x2="49" stroke-width="16"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(45)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(90)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(135)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(180)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(225)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(270)"/>
            <line x1="38" x2="49" stroke-width="16" transform="rotate(315)"/>
            <animateTransform attributeType="xml" attributeName="transform"
                              type="rotate" from="0" to="360"
                              dur="4s" repeatCount="indefinite"/>
        </g>
    </g>
</svg>

​