旋转椭圆形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>

图像更清晰

Answer 1

我不是图形天才，但我很确定这不能用你所拥有的来完成。如果您拿走动画并检查 PNG 本身，您会发现齿轮已经以固定的两点透视方式扭曲 - 齿轮正在远离我们（观看者）“拉伸”。

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

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

以下是一些替代方案：

• 有一个很好的旧备用：齿轮执行完整旋转的 3D 动画的 GIF 动画。
• 您可以将 3D 动画分割成一系列 2D 帧，然后将它们组合在一起形成精灵表，然后使用 JavaScript 将其设置为动画。
• 你可以使用Flash。
• 您可以尝试使用 WebGL。