Анимация триггера SVG с событием
как мне вызвать элемент svg animate, чтобы начать анимацию через javascript с произвольным событием? Я представляю себе что-то вроде begin = "mySpecialEvent" , затем я могу отправить mySpecialEvent , и анимация запустится (или начнется снова, если она уже воспроизводилась).
1 ответ
Запустить SVG-анимацию:
Без javascript, используя тип «event-value» атрибута 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 2, черновик редактора», https://svgwg.org/specs/animations/ ), «Атрибуты для управлять синхронизацией анимации ", атрибут" begin ", тип значения" событие-значение ", 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/ ), «Атрибуты для управления временем анимации», атрибут «begin», тип значения «неопределенный», https://svgwg.org/specs/animations/#TimingAttributes