SVG图像元素旋转

Question

我需要创建一个带有旋转背景的豆形。 我有带有图像元素的 SVG。图像具有“旋转”类。我使用 CSS 来旋转它。

codepen 链接：http://codepen.io/olam/pen/hJCla

它仅适用于 Chrome。 在 Firefox 中，transform-origin:50% 50% 似乎不起作用。 在 Safari 中我根本看不到图像。

如果你能给我一些建议，那就太棒了。

Answer 1

您可以切换到使用 SVG 动画。然后它应该可以在所有浏览器上运行。

更改您的图像元素，使其如下所示。

<image class="rotation" overflow="visible" width="506" height="267"
       xlink:href="---snipped out for brevity---"
       transform="matrix(0.6998 0 0 0.6998 -42.1211 -26.0269)">
    <animateTransform attributeName="transform" 
                      attributeType="XML"
                      type="rotate" 
                      from="0 253 133" 
                      to="-360 253 133" 
                      dur="25s"
                      repeatCount="indefinite"/>
</image>

Demo here

更新

如果您使用绝对坐标而不是百分比，原始 codepen 示例将在 Firefox 中运行。

animation-duration: 10s;
animation-iteration-count: infinite;
animation-name: spin;
animation-timing-function: linear;
transform-origin:253px 133px;