如何使用JavaScript创建SVG动画标签

Question

I have this SVG circle with an animation.

 <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>

It works fine. I want to make the exact same thing using javascript so if I click a button, it would create the same circle with the same animation.

here is my try:

    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

Looks like animateMotion elements are bugged in Webkit, when dinamically created (see SVG elements will not Animate when added dynamically ), and unsupported in IE. I think you're better off using pure javascript animation using a library like d3 .

Answer 3

Maybe this is your problem:

In XML:

<animateMotion path= ... />

In JS:

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

Hope it helps,
regards m93a.

Answer 4

If just the click is important, it can be solved by using the begin attribute in your 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>

Should work with a button as well, if the button has an identifier, eg id="startbutton" , then it should be begin="startbutton.click

Another alternative with inline javascript can be found here: http://svg-whiz.com/svg/PausePlay.svg

cheers

Answer 5

if you want the animate as soon as <animateMotion> element append page, set <animateMotion> 'begin' to 'indefinite' and begin the animate call its .beginElement();

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

Answer 6

Here you can get number of examples regarding svg using javascript.

You can get help from there.