SVG图像元素旋转

Question

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

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

仅适用于Chrome。 在Firefox中似乎变换起源：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;