在svg元素中更改圖像

Question

我試圖修改HTML文檔中的現有SVG元素。 我有以下內容：

<svg class="logo" viewBox="0 0 435 67"> <!-- IMAGE DIMENSIONS -->    
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo--someLogo"></use>
</svg>

我想它必須在xlink:href="#logo--someLogo"但是當我嘗試通過瀏覽xlink:href="#logo--someLogo" .svg文件或.png來改變它時

$('.logo use').attr('xlink:href', "//someurl.com.png");

它沒有顯示任何東西。

所以我想知道如何用另一個來源改變xlink:href 。

Answer 1

也許這些文檔節點有本機方法，但這也可行（如果只有一個use標簽）。

document.getElementsByTagName('use')[0].setAttribute('xlink:href', 'link_to_another_image')

Answer 2

經過一番挖掘，我發現svg使用的方式是在DOM中有一個符號標簽，它匹配指定的xlink：href資源。 在該標記中，有一個路徑元素，需要在其中指定資源路徑。

我使用jpeg到svg轉換器來獲取圖像的路徑，並且它似乎在替換DOM中的符號元素中的路徑時起作用。