Question

我需要一些帮助。在下面的代码中，我想通过onmouse-event来控制星的旋转。

如果将鼠标移到星形上，它应该旋转。

当我通过transform函数将鼠标悬停在星号上时，我考虑将attributeName中的roationon()/off()更改为不同的东西，以便旋转不起作用但我不知道怎么做。

我感谢我能得到的每一个帮助。

由于

<!DOCTYPE html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html>

<body>

<script>
function rotationon() {}
function rotationoff() {}
</script>

<svg height="2000" width="2000">
<polygon id="stern1" points="100,10 40,180 190,60 10,60 160,180" fill="yellow" transform="translate(100, 100)" onmouseover="rotationon()" onmouseout="rotationoff()" >
<animateTransform
        attributeName="transform"
        begin="0s"
        dur="5s"
        type="rotate"
        from="0 100 100"
        to="360 100 100"
        repeatCount="indefinite" 
    />
    </polygon>
</svg>


</body>
</html>

Answer 1

有几种不同的方法可以解决这个问题，具体取决于它与它的整合方式，以及它与其他浏览器的匹配程度。

我的直觉最终是说，使用其中一个SVG库，比如Raphael，snap.svg，Pablo.js等等。他们将帮助解决一些可能遇到的问题。

你也可以像我提到的那样使用纯SVG http://jsfiddle.net/xaM6q/

但是，要使用您正在尝试的方法，您可能需要使用类似beginElement（）和endElement的内容，因此代码可能类似于以下内容...在http://jsfiddle.net/xaM6q/2/

处小提琴

<script>
   function rotationon(evt){
        document.getElementById('myanim').beginElement();    
   }
   function rotationoff(){
        document.getElementById('myanim').endElement();
   }
 </script>

<svg height="2000" width="2000">
   <g transform="translate(100,100)">
     <polygon id="stern1" points="100,10 40,180 190,60 10,60 160,180" fill="yellow"  onmouseover="rotationon()" onmouseout="rotationoff()" >
       <animateTransform
         id="myanim"
         attributeName="transform"
         begin="indefinite"
         dur="5s"
         type="rotate"
         from="0 100 100"
         to="360 100 100"
         fill="freeze"
         repeatCount="indefinite" 
    />
   </polygon>
  </g>

值得注意的事情。我添加了一个g元素来帮助保持转换到位，就像你可能想要的那样（没有它，你可能会发现它移开了）。根据你想要它停止的方式，动画可能会有点不稳定（我添加了'fill = freeze'），以及动画中期的事件会发生什么。

值得了解所有这些以了解SVG动画，但如上所述，我可能仍会考虑使用第三方lib并手动控制旋转，而不是使用animate标记，因此您可以暂停/重启任何角度的旋转都很容易。

通过Javascript停止/启动SVG-Rotation

1 个答案: