Safari SVG変換元ズームアニメーション

Question

私は、アニメーション化されているインラインSVGを持っていますが、ブラウザでズームインまたはズームアウトすると、回転しているオブジェクトはもはや中心点で回転しません。

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

transform-originのChromeの実装は他のブラウザとは異なります。絶対座標を使用してみてください。

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

これでSafariの問題が解決するかどうかはわかりませんが、とにかく良い方法です。特にFirefoxでも動作させたいならば。

Answer 2

私はこれが遅いと知っていますが、私は同じ問題を発見しました。 transform-box: fill-box;を使用すると、オブジェクトはSafariで軸上で正しく回転します。