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:

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.

Problem courtesy of: Ola


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" 
                      from="0 253 133" 
                      to="-360 253 133" 

Demo here


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;
Solution courtesy of: Paul LeBeau


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.