1

我有以下代码在 SVG 画布上生成一些随机图像。

我想要做的是使用 //this bit// 注释下的代码将动画节点附加到具有特定类的所有元素。

但是，下面的代码不起作用......对于我的生活，我无法弄清楚为什么，谁能指出我正确的方向

function createBackground(){
    var loopLimit = Math.floor((Math.random()*100)+1);

    for(var i=0; i<100; i++)
    {
        var jpgSelecter = Math.floor((Math.random()*10)+1);
        var thisItem = document.createElementNS( svgNS, "image" ); 
        thisItem.setAttributeNS(null,"id","node_" + Math.round(new Date().getTime() / 1000));
        thisItem.setAttributeNS(null,"class","node" + jpgSelecter);
        thisItem.setAttributeNS(null,"x",(Math.random()*500)+1);
        thisItem.setAttributeNS(null,"y",(Math.random()*500)+1);
        thisItem.setAttributeNS(null,"width",(Math.random()*500)+1);
        thisItem.setAttributeNS(null,"height",(Math.random()*500)+1);
        thisItem.setAttributeNS(xlinkns,"xlink:href","images/blobs" + jpgselecter + ".png");

        document.getElementById("SVGcanvas").appendChild(thisItem);
    }

//这个位//

    var animate = document.createElementNS( svgNS, "animateTransform" );
    ani.setAttributeNS(null,"name","transform");
    ani.setAttributeNS(null,"begin","0");
    ani.setAttributeNS(null,"type","rotate");
    ani.setAttributeNS(null,"from", "0 180 50");
    ani.setAttributeNS(null,"to","360 180 50");
    ani.setAttributeNS(null,"dur","4");
    ani.setAttributeNS(null,"repeatCount","indefinite");

    var tenner = document.getElementsByClassName("node_10");
    for(i=0; i<tenner.length; i++)
    {
        alert(tenner[i]);
        tenner[i].appendChild(ani);
    }

}

更新

我已经编辑了我的代码，这不会引发任何错误，但是动画节点不会被附加。

4

1 回答 1

0

我看到两个问题：

  1. 您创建一个animate元素，然后尝试在一个ani对象上设置属性并将该对象附加到所有分类元素。

  2. 即使更改animate为ani，也不能将相同的元素附加到多个子元素。您的循环会将元素放在找到的第一个类上，然后将其移动到找到的第二个类，依此类推。相反，您需要为每个项目创建一个副本。所以，要么这样做：

    for(var i=0; i<tenner.length; i++){
  var ani = document.createElementNS(svgNS,'animateTransform');
  // set all attributes
  tenner[i].appendChild(ani);
}

    …或者这样做：

    var ani = document.createElementNS(svgNS,'animateTransform');
// set all attributes
for(i=0; i<tenner.length; i++){
  tenner[i].appendChild(ani.cloneNode(true));
}
于 2013-04-08T17:50:58.953 回答