如何設置嵌套SVG的旋轉中心

我想旋轉一個嵌套的SVG元素（多段線）圍繞它的中心而不是（0,0）。旋轉是動畫（過渡），因爲我想用一種風格觸發它，所以我寫了一個'standart'CSS轉換（我的意思是它不是SVG動畫，我想它會是同樣的東西？）。如何設置嵌套SVG的旋轉中心

還有一兩件事：該SVG是由容器大小和它的viewBox屬性，你可以看到：

<div id="container"> 
    <svg version="1.1" id="svghook" xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 2 20"> 
     <line x1="0" y1="0" x2="0" y2="20"></line> 
     <circle cx="0" cy="10" r="1" stroke-width="0px"></circle> 
     <polyline id="svghookbutton" points="0.4,9.6 -0.5,10 0.4,10.4 "></polyline> 
    </svg> 
</div>

現在我想旋轉折線和嘗試這樣做：

transform: rotate(180deg); 
transform-origin: 0px 10px;

（ 0，10）是縮放前旋轉的中心。

最後，折線被旋轉，但它使一個非常奇怪的飛.. you can see it in this fiddle if you hover the '>' in the black circle。

這個樣本有什麼問題？

來源

2015-10-17 jeum

我想我找到了解決辦法：

移動變換原點#svghookbutton（不是在懸停狀態）。
更改#svghookbutton:hover選擇器到#svghook:hover #svghookbutton，因爲使用您的選擇器時，當您的箭頭正在旋轉時，鼠標光標鬆開與箭頭的接觸並停止您的轉換。當你將鼠標懸停在黑色圓圈上時，我建議你選擇開始轉換。

Fiddle updated

來源

2015-10-17 22:27:24 makshh

太好了！我認爲「變形」和「變形起源」必須採用相同的風格。謝謝...你刪除了無用的前綴樣式嗎？ – jeum

是的，您只需要webkit和ms（如果您支持IE9）。 – makshh

其實風格是由js設置的，否則它應該由黑色圓圈觸發。謝謝。 – jeum

如何設置嵌套SVG的旋轉中心

回答

相關問題