Question

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

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

然而，下面的代码不起作用......对于我的生活，我无法弄清楚为什么，任何人都可以指出我正确的方向

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

}

更新

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

Answer 1

我看到两个问题：

您创建了一个animate元素，但随后尝试在ani对象上设置属性，并将此对象附加到所有归类元素。

即使您将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));
}

将子元素附加到具有相同类的所有SVG节点

1 个答案: