停止/启动SVG-通过Javascript旋转
停止/启动SVG-通过Javascript旋转
提问于 2013-12-13 07:56:52
我需要一点帮助。在下面的代码中，我想通过鼠标事件来控制恒星的旋转。
如果你把鼠标移到星星上，它就应该旋转。
当鼠标不在星上时，我想通过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>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-12-13 09:27:34
有几种不同的方法来解决这个问题，这取决于它将与什么集成，以及它将如何与其他浏览器兼容。
我的直觉是，最终会说，使用一个SVG库是值得的，比如Raphael，snap.svg，Pablo.js等，它们将帮助解决一些可能面临的问题。
您也可以像我提到的http://jsfiddle.net/xaM6q/那样使用纯SVG。
但是，要使用您正在尝试的方法，您可能需要使用类似于beginElement()和endElement的方法，因此代码看起来可能类似于http://jsfiddle.net/xaM6q/2/上的following...fiddle
<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动画是值得的，但如前所述，我可能仍然会考虑使用第三方库并手动控制旋转，而不是使用动画标记，这样就可以轻松地停止/重新启动旋转。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20570651
复制相关文章
相似问题
在BackgroundWorker中填充WPF图表
WPF BackgroundWorker执行
BackgroundWorker和WPF
在WPF中用BackgroundWorker更新UI
在WPF中结合使用BackgroundWorker和ProgressBar
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
