鼠標懸停時無限旋轉SVG多邊形

我想旋轉鼠標懸停時的多邊形，但我所能做的只是一次旋轉，我認爲是因爲角度是靜態的。此外，多邊形應該圍繞自身旋轉，它不會。我的代碼如下所示：鼠標懸停時無限旋轉SVG多邊形

<polygon id="stern" 
     points=" 
     350,370.5 
     370.9,460.1 
     460.9,460.1 
     390.7,510.5 
     420.3,600.1 
     350 ,550 
     270.7,600.1 
     300.3,510.5 
     230.1,460.1 
     320.1,460.1" 
     style="fill:#FACC2E" 
     onmouseover="rotieren()"/> 

<use x="365" y="-380" xlink:href="#stern" transform="scale(0.7)"/> 
<use x="1060" y="400" xlink:href="#stern" transform="scale(0.4)"/> 
<use x="500" y="700" xlink:href="#stern" transform="scale(0.5)"/>

我試了很多功能，例如使用一個變量，但我不能在.setAttribute("transform", "rotate(variable,0,0))使用它。現在，我做

document.getElementByID("stern").setAttribut("transform","rotate(5,1060,400)")

來源

2012-12-16 Bernhard Franke

你能做這樣的事嗎？

var stern = document.getElementByID("stern"); 
var i = 0; 
var interval = setInterval(function(){ 
    stern.setAttribute("transform","rotate("+(++i)+",1060,400)") 
},50)

來源

2012-12-16 21:55:10

嗯，好吧，我無法完全理解這一點。我什麼時候「施放」變量間隔？ –

它將一個函數傳遞給window.setInterval，然後每隔50ms執行一次，並在您的動畫中執行幀。變量'interval'只是間隔的ID，以防您稍後調用window.clearInterval停止動畫。 –

hm，所以我嘗試使用您編寫的腳本調用，但它不起作用。對不起，我還不明白。希望你仍然可以幫助我。 –

鼠標懸停時無限旋轉SVG多邊形

回答

相關問題