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(";, "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);

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/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);

• javascript
• html
• svg

Share Improve this question Follow edited Sep 17, 2023 at 10:07 Matthias Braun 34.6k2727 gold badges154154 silver badges176176 bronze badges asked Apr 3, 2012 at 11:01 TimmyTimmy 10744 silver badges1818 bronze badges 2

• I've got similar problem with Firefox. – csha Commented Apr 9, 2013 at 6:24
• Documentation: W3C Remendation SVG 1.1. 2011, sect. "Animation" – handle Commented Jul 5, 2013 at 12:58

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

Maybe this is your problem:

In XML:

<animateMotion path= ... />

In JS:

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

Hope it helps,
regards m93a.

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

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.

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, e.g. id="startbutton", then it should be begin="startbutton.click

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

cheers

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();

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

You can get help from there.