Question

我想在鼠标悬停时旋转多边形，但我能做的只是单个旋转，我认为因为角度是静态的。此外，多边形应该围绕自身旋转，它不会旋转。我的代码如下：

<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)")

Answer 1

你能做这样的事吗？

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

在鼠标悬停时无限旋转SVG多边形

1 个答案: