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

在使用dinamically创建（请参阅SVG elements will not Animate when added dynamically）并在IE中不支持时，Webkit中的animateMotion元素看起来有些错误。我认为你最好使用像d3这样的库来使用纯javascript动画。

Answer 3

也许这是您的问题：

在XML中：

<animateMotion path= ... />

在JS中：

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

希望它有所帮助，
关于m93a。

Answer 4

如果点击很重要，可以使用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 5

如果您想在<animateMotion>元素附加页面后立即使用动画，设置<animateMotion>＆＃39;开始＆＃39;到了'无限期＆＃39;并开始动画调用它的.beginElement（）;

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

Answer 6

Here您可以使用javascript获取有关svg的一些示例。

你可以从那里获得帮助。

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

6 个答案: