SVG image element rotation

问题:

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.

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

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.

回答1:

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>

Demo here

Update

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;