javascript - 旋转椭圆形 SVG 对象

Question

我正在尝试将我的椭圆形图像设置为以固定 Angular 旋转的动画，以便轮廓围绕一个区域旋转而不改变该区域的形状。

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

这就是我所做的 (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。方式——齿轮正在“远离”我们，观众。

但图像本身是二维的，无论您在 SVG 或 CSS 或 Canvas 中如何旋转它，齿轮始终会以相同的方式拉伸(stretch)。

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

这里有一些替代方案:

• 有一个很好的旧备用:齿轮执行完整旋转的 3D 动画的 GIF 动画。
• 您可以将 3D 动画分割成一系列 2D 帧，然后将它们拼凑成一个 sprite 表，然后使用 JavaScript 制作动画。
• 你可以使用 Flash。
• 您可以尝试使用 WebGL。