创建 SVG，在纯 Javascript 中设置 href 而不是 xlink:href

Question

我有一个包含所有图标的 SVG 精灵，当在 Javascript 中动态添加图标时，我使用以下代码：

let closeButton = document.createElementNS("http://www.w3.org/2000/svg", "svg");
let svgUse = document.createElementNS('http://www.w3.org/2000/svg', 'use');
svgUse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'css/sprite.svg#warning');
closeButton.append(svgUse);

我认为通过查看代码可以直接理解我要问的内容。

上面的代码工作得很好，但根据 MDN 文档

xlink:href

:

已弃用：不再推荐此功能。尽管某些浏览器可能仍然支持它，但它可能已从相关网络标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页底部的兼容性表来指导您的决定。请注意，此功能可能随时停止工作。

那么为了为未来做好准备，我将如何动态设置

href

元素的

use

属性？

我知道你不能只用

setAttribute

功能来设置它。但是我要在命名空间参数中放入什么才能使其正常工作？

    svgImg.setAttributeNS('what to put here?', 'href', 'css/sprite.svg#warning');

我在任何地方都找不到与此相关的任何文档。

Answer 1

值

null

就可以，但您也可以使用非名称空间

setAttribute()

方法。

const uses = document.querySelectorAll("use");
uses[0].setAttributeNS(null, "href", "#target");
uses[1].setAttribute("href", "#target");

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <rect id="target" width="30" height="30" fill="green"/>
  </defs>
  <use/>
  <use x="40"/>
</svg>