在svg元素中更改图像

Question

I am trying to modify an existing SVG element in an HTML document. I have the following:

<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>

I guess it has to be in that xlink:href="#logo--someLogo" but when I try to change it through the browser with a .svg file or .png like

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

it doesnt show anything.

So Im wondering how I can change that xlink:href with another source.

Answer 1

也许这些文档节点有本机方法，但这也可行（如果只有一个use标签）。

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

Answer 2

After some digging I figured out that the way svg use works is that in the DOM there is a symbol tag that matches that resource specified xlink:href . In that tag, there is a path element in which the resource path needs to be specified.

I used a jpeg to svg converter to get the path of the image, and it seems to work when replacing the path in the symbol element in the DOM.