SVG触发动画与事件

Question

如何触发svg animate元素开始通过javascript与任意事件动画？我想象的东西begin="mySpecialEvent",然后我可以发送mySpecialEvent并且动画将开始(或者如果它已经播放则再次开始).

Answer 1

这篇文章涵盖了您的需求: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

简而言之:

1. 创建<animation>with,begin="indefinite"以便它不会将动画视为从文档加载开始.您可以通过JavaScript或原始SVG源执行此操作.

2. 调用beginElement()的SVGAnimationElement实例(<animate>元素)当你准备好动画开始播放.对于您的用例,使用标准addEventListener()回调来在您准备好时调用此方法,例如

   myAnimationElement.addEventListener('mySpecialEvent',function(){
     myAnimationElement.beginElement();
   },false);
   

Answer 2

开始SVG动画：

如果没有javascript，请在​​动画元素上使用begin attribute =“ id.event”（不带“ on”前缀）的“ event-value”类型；要么

<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动画级别2，编辑者的草案”，https：//svgwg.org/specs/animations/），“控制动画时间的属性”，“开始”属性，“事件值”值类型，https：//svgwg.org/specs/animations/#TimingAttributes

在javascript中，将动画元素的begin属性设置为“不确定”；并从脚本中调用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动画级别2，编辑者的草案”，https：//svgwg.org/specs/animations/），“控制动画时间的属性”，“开始”属性，“不确定”值类型，https://svgwg.org/specs/animations/#TimingAttributes