通过Java脚本停止/启动SVG旋转

Question

I need a little bit of help. 我需要一点帮助。 In the following code, I want to control the rotation of the star via onmouse-event. 在下面的代码中，我想通过onmouse-event控制星星的旋转。

If you move the mouse over the star, it is supposed to rotate. 如果将鼠标移到星星上，则它应该旋转。

I thought about changing the transform in attributeName to something different when the mouse is not over the star via roationon()/off() functions so that the rotation doesn't work but I have no idea how to do that. 我考虑过通过roationon()/off()函数将鼠标悬停在星体上时，将attributeName的transform更改为其他形式，以便旋转不起作用，但是我不知道该怎么做。

I appreciate every help I can get. 我感谢我所能提供的一切帮助。

Thanks 谢谢

<!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

There's a few different ways to approach this, depending on what its going to integrate with, and how well it will play with other browsers. 有几种不同的处理方式，具体取决于要与之集成的内容以及与其他浏览器的兼容程度。

My gut instinct would be to say ultimately, its worth using one of the SVG libs out there, like Raphael, snap.svg, Pablo.js etc. They will help with some of the issues likely to be faced. 我的直觉是要说，最终，值得使用其中的SVG库之一，例如Raphael，snap.svg，Pablo.js等。它们将帮助解决可能遇到的一些问题。

You can also just use pure SVG like I mentioned http://jsfiddle.net/xaM6q/ 您也可以只使用纯SVG，如我提到的http://jsfiddle.net/xaM6q/

However, to use the method you are trying, you may want to use something like beginElement() and endElement, so the code could look something like the following...fiddle at http://jsfiddle.net/xaM6q/2/ 但是，要使用您尝试的方法，您可能需要使用诸如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>

Couple of things worth noting. 几件事情值得注意。 I've added ag element to help keep the transformation in place, as you probably want that (without it, you may find it moves away). 我添加了ag元素来帮助保持转换正确，因为您可能想要这样做（没有转换，您可能会发现它已经消失了）。 Also the animation may be a bit erratic depending how you want it to stop (I've added 'fill=freeze'), and what happens with events mid animation. 此外，动画可能会有些不稳定，具体取决于您希望其停止的方式（我添加了“ fill = freeze”），以及动画中的事件会发生什么。

Its worth knowing all of this to get to know SVG animations, but as mentioned, I would probably still look at using a 3rd party lib and control the rotation manually, rather than using the animate tag, so you can halt/restart a rotation at any angle easily. 了解所有这些知识以了解SVG动画是值得的，但是如上所述，我可能仍会考虑使用3rd party lib并手动控制旋转，而不是使用animate标签，因此您可以在以下位置停止/重新开始旋转任何角度都容易。

通过Java脚本停止/启动SVG旋转

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-12-13 17:27:34

通过Java脚本停止/启动SVG旋转

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-12-13 17:27:34

解决方案1
1 已采纳 2013-12-13 17:27:34