SVG圖像元素旋轉

Question

我需要創建一個具有旋轉背景的豆形狀。 我有一個圖像元素的SVG。圖像有「旋轉」類。我使用CSS來旋轉它。

鏈接codepen：http://codepen.io/olam/pen/hJCla

它只能在Chrome中。 在Firefox看來，轉換源：50％50％不起作用。 在Safari中根本看不到圖像。

如果你能給我一些建議，那會很棒。

Answer 1

您可以切換到使用SVG動畫。它應該適用於所有瀏覽器。

改變你的圖像元素，使其看起來像下面。

<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

更新

如果使用絕對COORDS而不是百分比，原來codepen例如在Firefox中使用。

animation-duration: 10s; 
animation-iteration-count: infinite; 
animation-name: spin; 
animation-timing-function: linear; 
transform-origin:253px 133px;