title: SVG image element rotation
body: <p>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.</p>
  
  <p>Link to codepen: <a href="http://codepen.io/olam/pen/hJCla" rel="nofollow">http://codepen.io/olam/pen/hJCla</a></p>
  
  <p>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.</p>
  
  <p>Would be awesome if you can give me some advice. </p>