Question

我从this previous question扩展了我的学习代码，以学习如何使用JavaScript附加SVG动画。我试过这种方式：

（我没有包含函数NormSInv()的定义以节省空间。如果需要，它是this answer中的那个。

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

最有问题的部分是函数moveHair()。代码运行，并且确实插入了具有预期属性的动画。通过使用FireBug检查页面，我可以看到它发生。 但没有动静。

我在FireBug中看到的SVG的一个示例（使其缩短的一部分）是

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

如果我直接使用这个SVG代码，它确实可以工作，并且会移动。

这是名称空间的问题吗？起初我使用animate创建了createElement，并且他们在FireBug检查器中显示为灰色。然后我想使用createElementNS创建它们并使用与SVG及其子节点相同的命名空间。这样做可以使animate在FireBug检查器中正确显示。但他们仍然没有采取任何行动。

Answer 1

＆＃13;

var elem = document.getElementById("elem")
var anim = document.createElementNS("http://www.w3.org/2000/svg", "animate")
anim.setAttribute("begin", "indefinite")
anim.setAttribute("from", 10)
anim.setAttribute("to", 50)
anim.setAttribute("fill", "freeze")
anim.setAttribute("dur", "1s")
anim.setAttribute("repeatCount", "indefinite")
anim.setAttribute("attributeName", "r")

elem.appendChild(anim)


function startAnim() {
  anim.beginElement()
}

＆＃13;

<svg viewBox="0 0 100 100" width="200" height="200">
  <circle id="elem" cx="50" cy="50" r="10" fill="orange" />
</svg>

<button type="button" onclick="startAnim()">start animation</button>

＆＃13;

你没有设置默认为0s的开始属性（文件时间）......总之，你必须将开始设置为＆＃34;无限期＆＃34;并在附加动画后调用animation.beginElement（）。

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

1 个答案: