SVG css旋轉粘連而不是圍繞中心旋轉

當懸停SVG時，我希望它旋轉「容器」，其內容不旋轉。我試圖通過反向旋轉它的內容對付SVG的旋轉，但命中2個問題：SVG css旋轉粘連而不是圍繞中心旋轉

他們不會圍繞中心
不徘徊時，他們不返回恢復到正常狀態

代碼

<svg x="0px" y="0px" viewBox="0 0 50 50"> 
    <path fill="none" d="M3.413,38.529c5.209,0.385,9.601-0.822,13.745-3.913c-4.223-0.565-7.115-2.503-8.675-6.429 
          c1.299-0.079,2.432-0.152,3.565-0.221c-4.248-1.805-6.697-4.756-7.021-9.438c1.334,0.364,2.572,0.701,3.81,1.04 
          C4.879,15.036,4.053,11.071,6.413,6.89c2.508,2.842,5.321,5.241,8.694,6.936c3.343,1.679,6.848,2.698,10.673,2.869 
          c0.068-1.372-0.044-2.736,0.23-4.018c1.527-7.146,9.775-10.025,15.383-5.375c0.745,0.617,1.363,0.77,2.219,0.433 
          c1.438-0.567,2.896-1.09,4.476-1.681c-0.582,1.976-1.881,3.367-3.404,4.605c0.053,0.102,0.105,0.205,0.157,0.307 
          c1.424-0.38,2.848-0.761,4.271-1.142c0.071,0.063,0.146,0.125,0.218,0.188c-1.164,1.208-2.237,2.528-3.527,3.583 
          c-0.84,0.686-0.98,1.387-0.984,2.344c-0.035,11.2-7.32,21.553-17.745,25.263C19.443,43.916,9.997,42.932,3.413,38.529z"></path> 
</svg>

看到Live example

注意：目前只能在-webkit-瀏覽器上運行

來源

2014-01-06 Kiee

其SVG CSS轉型的具體。你可以閱讀關於它here。

您需要定義transform-origin屬性。

修正了你的情況：http://jsfiddle.net/Db2s2/3/

來源

2014-01-06 17:07:18 Astralian

這兩個答案釘，但你在那裏第一次得到，也幫助我解決另一個問題，我與「變換原點」，我不知道的！ – Kiee

如果您不想旋轉某個東西，只需將其粘貼在不旋轉的容器中即可。

I.e.將另一個SVG作爲容器粘貼並旋轉。

<svg id="foreground" x="0px" y="0px" viewBox="0 0 50 50"> 
    <rect width="100%" height="100%" fill="none" pointer-events="all"> 
</svg>

like so

來源

2014-01-06 17:00:11

SVG css旋轉粘連而不是圍繞中心旋轉

回答

相關問題