So erstellen SVG-Animations-Tag mit Javascript

Question

Ich habe diesen SVG-Kreis mit einer 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> 

Es funktioniert gut. Ich möchte die gleiche Sache mit Javascript machen, also wenn ich einen Knopf anklicke, würde es den gleichen Kreis mit der gleichen Animation verursachen.

hier ist mein Versuch:

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

Here Sie einige Beispiele bekommen in Bezug auf svg Javascript.

Sie können Hilfe von dort bekommen.

Answer 2

Sieht aus wie animateMotion Elemente werden in Webkit abgehört, wenn dynamisch erstellt (siehe SVG elements will not Animate when added dynamically), und in IE nicht unterstützt. Ich denke, Sie sind besser dran mit reinen Javascript-Animation mit einer Bibliothek wie d3.

Answer 3

Vielleicht ist Ihr Problem:

In XML:

<animateMotion path= ... /> 

In JS:

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

Hoffe, dass es hilft,
Grüße M93a.

Answer 4

Wenn nur der Klick wichtig ist, kann es unter Verwendung des begin Attributs in Ihrem animateMotion gelöst werden:

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

Sollte funktionieren mit einem Knopf als auch, wenn der Knopf hat eine Kennung, z.B. id="startbutton", dann sollte es seine begin="startbutton.click

Eine weitere Alternative mit Inline-Javascript finden Sie hier: http://svg-whiz.com/svg/PausePlay.svg

prost

Answer 5

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 6

, wenn Sie die belebte sobald <animateMotion> Element Seite angehängt werden sollen, gesetzt <animateMotion> 'Beginne' auf 'unbestimmt' und beginne den animierten Aufruf mit .beginElement();

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