Javascript 带事件的SVG触发动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8455773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG trigger animation with event
提问by Hendekagon
how do I trigger an svg animate element to begin animating via javascript with an arbitrary event ? I'm imagining something like begin="mySpecialEvent", then later I can send mySpecialEventand the animation will start (or start again if it has already played).
我如何触发一个 svg 动画元素以通过 javascript 与任意事件开始动画？我正在想象类似begin="mySpecialEvent"，然后我可以发送mySpecialEvent并且动画将开始（如果已经播放，则再次开始）。
回答by Phrogz
Here's an article that covers what you need:http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
这是一篇涵盖您需要的文章：http: //dev.opera.com/articles/view/advanced-svg-animation-techniques/
Edit:link is removed. Archived copies:
编辑：链接已删除。存档副本：
- https://github.com/operasoftware/devopera-static-backup/blob/master/http/dev.opera.com/articles/view/advanced-svg-animation-techniques/index.html
- http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques
- https://github.com/operasoftware/devopera-static-backup/blob/master/http/dev.opera.com/articles/view/advanced-svg-animation-techniques/index.html
- http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques
In short:
简而言之：
Create the
<animation>withbegin="indefinite"so that it won't treat the animation as starting on document load. You can do this either via JavaScript or raw SVG source.Call
beginElement()on theSVGAnimationElementinstance (the<animate>element) when you're ready for the animation to start. For your use case, use a standardaddEventListener()callback to invoke this method when you're ready, e.g.myAnimationElement.addEventListener('mySpecialEvent',function(){ myAnimationElement.beginElement(); },false);
创建
<animation>withbegin="indefinite"以便它不会将动画视为从文档加载开始。您可以通过 JavaScript 或原始 SVG 源执行此操作。调用
beginElement()的SVGAnimationElement实例（<animate>元素）当你准备好动画开始播放。对于您的用例，addEventListener()当您准备好时，使用标准回调来调用此方法，例如myAnimationElement.addEventListener('mySpecialEvent',function(){ myAnimationElement.beginElement(); },false);
回答by John Bentley
Start an SVG animation:
启动 SVG 动画：
Without javascript, using the "event-value" type of the begin attribute="id.event" (without an "on" prefix) on an animation element; or
在没有 javascript 的情况下，在动画元素上使用 begin 属性 =“id.event”（没有“on”前缀）的“事件值”类型；或者
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">
<rect x="10" y="10" width="100" height="100">
<animate attributeName="x" begin="go.click" dur="2s" from="10" to="300" fill="freeze" />
</rect>
</svg>
<button id="go">Go</button>
(W3C 2018, "SVG Animations Level 2, Editor's Draft", https://svgwg.org/specs/animations/), " Attributes to control the timing of the animation", "begin" attribute, "event-value" value type, https://svgwg.org/specs/animations/#TimingAttributes
（W3C 2018，“SVG Animations Level 2，Editor's Draft”，https://svgwg.org/specs/animations/），“控制动画时间的属性”，“开始”属性，“事件值”值类型，https://svgwg.org/specs/animations/#TimingAttributes
From javascript, by setting an animation element's begin attribute to "indefinite"; and calling beginElement() from script;
在 javascript 中，通过将动画元素的开始属性设置为“不确定”；并从脚本调用 beginElement() ；
function go () {
var elements = document.getElementsByTagName("animate");
for (var i = 0; i < elements.length; i++) {
elements[i].beginElement();
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">
<rect x="10" y="10" width="100" height="100">
<!-- begin="indefinite" allows us to start the animation from script -->
<animate attributeName="x" begin="indefinite" dur="2s" from="10" to="300" fill="freeze" />
</rect>
</svg>
<button onclick="go();">Go</button>
(W3C 2018, "SVG Animations Level 2, Editor's Draft", https://svgwg.org/specs/animations/), " Attributes to control the timing of the animation", "begin" attribute, "indefinite" value type, https://svgwg.org/specs/animations/#TimingAttributes
（W3C 2018，“SVG Animations Level 2，Editor's Draft”，https://svgwg.org/specs/animations/），“控制动画时间的属性”，“开始”属性，“不确定”值类型，https://svgwg.org/specs/animations/#TimingAttributes
