SVG图像元素旋转 [英] SVG image element rotation

问题描述

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

I need to create a bean shape with rotating background. I have SVG with an image element. The image has class "rotation". I use CSS to rotate it.

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

Link to codepen: http://codepen.io/olam/pen/hJCla

仅在Chrome中有效。
在Firefox中似乎转换来源：50％50％不起作用。
在Safari中我根本看不到图像。

It works only in Chrome. In Firefox seems that transform-origin:50% 50% doesn't work. In Safari I can't see image at all.

如果您能给我一些建议，那将很棒。

Would be awesome if you can give me some advice.

推荐答案

您可以切换为使用SVG动画。

You could switch to using SVG animation. It should then work on all browsers.

更改图像元素，使其看起来如下所示。

Alter your image element so that it looks like the following.

<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>

在此处演示

更新

如果您使用

If you use absolute coords rather than percentages, the original codepen example will work in Firefox.

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

这篇关于SVG图像元素旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！