Safari SVG transform-origin zoom animation

Question

I have an inline SVG which is being animated, however when you zoom in or out in the browser the object which is being rotated no longer rotates at its centre point.

It works fine in Chrome.

http://codepen.io/chrismorrison/pen/rmLXWw

#rays {
  animation: spin 6s linear infinite;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@keyframes spin {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
}

Answer 1

Chrome's implementation of transform-origin is different from other browsers. Try using absolute coordinates.

-webkit-transform-origin: 201px 191px;
transform-origin: 201px 191px;

I'm not sure if this will fix your Safari problem, but it is good practice anyway. Especially if you want it to work in Firefox also.

Answer 2

I know this is late, but I found the same issue. If you use transform-box: fill-box;, the object will rotate on its axis properly in Safari.