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. 使用begin="indefinite"創建<animation> ，這樣它就不會將動畫視為從文檔加載開始。 您可以通過JavaScript或原始SVG源執行此操作。

2. 准備動畫啟動時，在SVGAnimationElement實例（ <animate>元素beginElement()上調用beginElement() 。 對於您的用例，使用標准的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 Animations Level 2，Editor's Draft”， https：//svgwg.org/specs/animations/ ），“控制動畫時間的屬性”，“開始”屬性，“事件 - 值”值type， https：//svgwg.org/specs/animations/#TimingAttributes

從javascript，通過將動畫元素的begin屬性設置為“indefinite”; 並從腳本中調用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/ ），“控制動畫時間的屬性”，“開始”屬性，“無限期”值類型， https://svgwg.org/specs/animations/#TimingAttributes