Как создать тег SVG анимации, используя JavaScript

Question

У меня есть этот SVG круг с анимацией.

 <circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
  <animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" />
</circle>

Работает нормально. Я хочу сделать то же самое, используя javascript, поэтому, если я нажму кнопку, это создаст тот же круг с той же анимацией.

вот моя попытка:

    var animateMotion = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion");
    animateMotion.setAttribute("dur","8s");
    animateMotion.setAttribute("d", "M 0 0 H 300 Z");
    animateMotion.setAttribute("repeatCount","indefinite");
    //assuming that I already created my circle        
    myCircle.appendChild(animateMotion); 

Answer 1

    var animateMotion = document.createElementNS('http://www.w3.org/2000/svg','animateMotion');
    animateMotion.setAttribute("dur","3s");
    animateMotion.setAttribute("repeatCount","1");
    var mpath = document.createElementNS('http://www.w3.org/2000/svg','mpath');
    mpath.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#YourPath");
    animateMotion.appendChild(mpath);

Answer 2

если вы хотите анимировать, как только страница добавления элемента <animateMotion>, установите <animateMotion> 'begin' на 'неопределенный' и начните живой вызов его .beginElement ();

var animateMotion = document.createElementNS(SVG_NS, 'animateMotion');
animateMotion.setAttribute('begin', 'indefinite');
//append animateMotion to the page
animateMotion.beginElement();

Answer 3

Если важен только щелчок , это можно решить с помощью атрибута begin в вашем animateMotion:

<svg height="500" width="500" id="foo"> 
<circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
  <animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" begin="foo.click"/>
</circle>
</svg>

Должно работать и с кнопкой, если кнопка имеет идентификатор, например id="startbutton", тогда должно быть begin="startbutton.click

Другая альтернатива с встроенным JavaScript может быть найдена здесь: http://svg -whiz.com / svg / PausePlay.svg

ура

Answer 4

Может быть, это ваша проблема:

В XML:

<animateMotion path= ... />

В JS:

animateMotion.setAttribute("d", ... ); //Should this be "path"?

Надеюсь, это поможет,
Относительно M93A.

Answer 5

Похоже, что элементы animateMotion содержат ошибки в Webkit при динамическом создании (см. Элементы SVG не будут анимироваться при динамическом добавлении ) и не поддерживаются в IE.Я думаю, что вам лучше использовать чистую анимацию javascript, используя такую ​​библиотеку, как d3 .

Answer 6

Здесь вы можете получить количество примеров, касающихся svg, используя javascript.

Вы можете получить помощь оттуда.