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

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