鼠标悬停时无限旋转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多边形

回答

相关问题