jquery - jquery追加svg元素，无法追加多个元素

Question

我正在尝试使用 JQuery 附加一些 svg 元素。代码如下图。

$("#save_edits").click(function() {

    var img = document.createElementNS('http://www.w3.org/2000/svg','image');
        img.setAttributeNS('http://www.w3.org/1999/xlink','href','./img/exclamation-mark.png');
        img.setAttributeNS(null,'x','-7');
        img.setAttributeNS(null,'y','-35');
        img.setAttributeNS(null,'height','15');
        img.setAttributeNS(null,'width','15');

    if(id==" Shipping"){
        $('svg>g').first().append(img);
        $('svg>g:eq(2)').append(img);
        $('svg>g:eq(3)').append(img);
        $('svg>g:eq(4)').append(img);
    }
});

但是，只有最后一个附加成功$('svg>g:eq(4)').append(img);，而不是之前的所有附加。有谁知道为什么以前的被覆盖以及如何防止它发生？

答： 好的，看来我终于想通了。基本上需要为每个追加重新创建 img 元素。

child = ["svg>g:eq(2)","svg>g:eq(3)","svg>g:eq(4)"]

if(id==" Shipping"){
    child.forEach(function(e){
        var img = document.createElementNS('http://www.w3.org/2000/svg','image');
            img.setAttributeNS('http://www.w3.org/1999/xlink','href','./img/exclamation-mark.png');
            img.setAttributeNS(null,'x','-7');
            img.setAttributeNS(null,'y','-35');
            img.setAttributeNS(null,'height','15');
            img.setAttributeNS(null,'width','15');

        $(e).append(img);
    })

标签： jquerysvg