頁面上的多個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

回答

相關問題