页面上有多个SVG

Question

我的页面上有多个SVG（也可以使用加号或减号动态添加它们）。即：

<img src="/svgs/mysvg.svg" id="svg1">
<img src="/svgs/mysvg.svg" id="svg2">
<img src="/svgs/mysvg.svg" id="svg3">

在mysvg.svg中，有一个id为#circle的路径元素。当我只在页面上显示1 svg时，我可以使用以下javascript来更改#circle的颜色：

$('#circle').css('fill', '#000000');

当我在一个页面上有多个SVG时，如何选择我想要更改的svg？即：

var mysvg1 = $('#svg1');
mysvg1.find('#circle').css('fill', '#000000');

Answer 1

试试这个：

var mysvg1 = $('#svg1');
mysvg1.find('[id="circle"]').css('fill', '#000000');

Answer 2

通常你不能做那样的事情，replaceText()中加载的文档不是主文档的DOM的一部分。

但你可以尝试这样做：

<img>

我不确定var img = document.getElementById("svg1"); // get the SVG document inside the img tag var svgDoc = img.contentDocument; // get that circle item by ID; var svgItem = svgDoc.getElementById("circle"); // Set the fill attribute svgItem.setAttribute("fill", "#000000"); 是否适用于img.contentDocument，<img>可行。