添加SVG动画的JavaScript。如何启动它们？

我从扩展了我的学习代码，以学习如何使用JavaScript附加SVG动画。我试着这样做：

（为了节省空间，我没有包括函数

NormSInv（）

的定义。如果需要，它就是中的一个）

如果我直接使用这段SVG代码，它确实会工作，而且会移动

这是名称空间的问题吗？起初，我用

createElement

创建

animate

，它们在FireBug inspector中显示为灰色。然后我将使用

createElements

创建它们，并使用与SVG及其子节点相同的名称空间。这样做会使

动画

正确显示在FireBug检查器中。但他们仍然没有采取任何行动。

var elem=document.getElementById（“elem”）
var anim=document.createElements（“http://www.w3.org/2000/svg“，“动画化”）
anim.setAttribute（“开始”、“不确定”）
anim.setAttribute（“from”，10）
动画设置属性（“到”，50）
动画设置属性（“填充”、“冻结”）
动画设置属性（“dur”、“1s”）
anim.setAttribute（“重复计数”、“不确定”）
anim.setAttribute（“attributeName”、“r”）
儿童元素（动画）
函数startAnim（）{
动画开始（）
}

启动动画

只是尝试一下。我添加了

animation.setAttribute（'begin'，'infinite'）appendChild

行和

animation.beginElement（）之前的code>在
appendChild
行之后。虽然听起来很合理，但它不起作用。变量
animation
在将其添加到
svg
后是否一直指向
animate
对象？我要求确保行
animation.beginElement（）
实际上是在要求特定动画开始。我现在尝试放置
begin=accessKey
，以便我可以尝试通过按“s”手动触发启动。也没用。哦。。。当我将您的
moveHair（）
签名更改为
moveHair（evt）
然后执行evt.target.appendChild（动画）时，使用嵌套动画而不是使用xlink:href将您的元素作为目标，它也可以工作，我现在就可以工作了。非常感谢你。
xlink:href
也不适合我。我仍然需要理解为什么。我按照你所说的，在多段线内嵌套动画，使其工作。
      function randomPath(){
      var x = 500;
      var y = 400;
      var xstep = 0;
      var ystep = 0;
      var path = '500,400';
      for (var k = 0; k < 3 ; k++) {
          path += ' ';
          path += (x).toString();
          path += ',';
          path += (y).toString();
          xstep = NormSInv(Math.random());
          ystep = NormSInv(Math.random());
          xstep *= 10;
          ystep *= 10;
          x += Math.trunc(xstep);
          y += Math.trunc(ystep);
        };
        return path;
      };

      window.onload = function() {

    var figure = document.createElementNS('http://www.w3.org/2000/svg','svg');
    figure.id = 'brownian-figure';
    figure.setAttribute('height', '100%');
    figure.setAttribute('width', '100%');

    var pathArray = [];
    for (var i = 0; i < 10; i++){
    pathArray[i] = document.createElementNS('http://www.w3.org/2000/svg','polyline');
    pathArray[i].id = "hair" + (i).toString();
    var path = randomPath();
    pathArray[i].setAttribute('points', path);
    pathArray[i].setAttribute('style', 'fill:none;stroke:rgba(0,0,20,1);stroke-width:1');
    figure.appendChild(pathArray[i]);
    };

    var divfigure = document.createElement('div');
    divfigure.id = 'divfigure';
    divfigure.onclick = moveHair;
    divfigure.style = 'margin:0pt;padding:0pt;border:0pt none;background-color:rgba(240,240,240,0.66);position:absolute;top:0vh;left:0vw;width:50vw;height:99vh;';
    divfigure.appendChild(figure);


    var content = document.getElementById('content-container');
    document.body.insertBefore(divfigure, content);
  };

  function moveHair(){
    var a_hair_number = Math.trunc(10 * Math.random());
    var paths = document.getElementById('brownian-figure').childNodes;
    var hair = paths[a_hair_number];
    var animation = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
    animation.setAttribute('xlink:href', '#hair' + a_hair_number.toString());
    animation.setAttribute('attributeName', 'points');
    animation.setAttribute('dur', '2s');
    animation.setAttribute('repeatCount', 'indefinite');
    animation.setAttribute('from', hair.getAttribute('points'));
    animation.setAttribute('values', hair.getAttribute('points') + '; ' + randomPath() + '; ' + hair.getAttribute('points'));
    animation.setAttribute('to', hair.getAttribute('points'));
    var divfigure = document.getElementById('brownian-figure');
    divfigure.appendChild(animation);
  };

<svg id="brownian-figure" height="100%" width="100%">
  <polyline id="hair3" points="500,400 500,400 521,390 510,374" style="fill:none;stroke:rgba(0,0,20,1);stroke-width:1">
  <animate xlink:href="#hair3" attributeName="points" dur="2s" repeatCount="indefinite" from="500,400 500,400 521,390 510,374" values="500,400 500,400 521,390 510,374; 500,400 500,400 508,419 515,440; 500,400 500,400 521,390 510,374" to="500,400 500,400 521,390 510,374">
</svg>