Javascript 页面上有多个SVG

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

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

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

试试这个：

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

试试这个：

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

---

通常不能执行类似的操作，加载到

中的文档不是宿主文档DOM的一部分

但您可以尝试这样做：

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

是否能在

上工作，在

上它能工作。

通常你不能这样做，加载在

中的文档不是宿主文档的DOM的一部分

但您可以尝试这样做：

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

在

上是否有效，在

上是否有效。

我想你没有告诉我们一切。通过

元素包含的SVG不是DOM的一部分，不能使用CSS设置样式。所以你的jQuery小片段不可能工作。我想你没有告诉我们所有的事情。通过

元素包含的SVG不是DOM的一部分，不能使用CSS设置样式。因此，您的jQuery小片段不可能工作。