我正在尝试使用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);
})