页面上的多个SVG

我在页面上有多个SVG（它们可以使用加号或减号图像动态添加）。即：页面上的多个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');

当我有一个页面上的多个SVGs，我怎么能选择我想要的SVG改变？即：

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

来源

2016-02-05 execv

我想你并没有告诉我们任何事情。通过''元素包含的SVG不是DOM的一部分，不能用CSS进行样式化。所以你的小jQuery片段不可能工作。 –

试试这个：

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

来源

2016-02-05 01:33:19

通常你不能做类似的事情，在<img>加载文件是不是主机文件的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上<img>会的工作，对<object data="/svgs/mysvg.svg" type="image/svg+xml">它的工作原理。

来源

2016-02-05 01:41:57

页面上的多个SVG

回答

相关问题