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"中，但当我尝试通过浏览器使用.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 。在该标记中，有一个 path 元素，其中需要指定资源路径。

我使用了一个jpeg到svg转换器来获取图像的路径，它似乎在替换DOM中 symbol 元素中的路径时起作用。

在svg元素中更改图像

2 个答案: