JS创建含use的SVG引用Sprite图标不显示的xlink:href命名空间问题

• xlink命名空间URI拼写错误，你使用的http://w3.org/1999/xlink缺少www.前缀，正确的xlink命名空间完整URI为http://www.w3.org/1999/xlink。
• 使用setAttributeNS设置跨命名空间属性时，属性名需要显式添加对应命名空间前缀xlink:，否则浏览器无法将该href属性识别为SVG引用所需的xlink属性。

执行document.body.innerHTML = document.body.innerHTML后图标正常显示，是因为将DOM序列化为HTML字符串再重新解析的过程中，浏览器会自动修正属性和命名空间的绑定关系，相当于重新生成了正确关联命名空间的DOM节点，所以图标可以正常渲染。

方案1：修正xlink命名空间用法 #

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
var use = document.createElementNS("http://www.w3.org/2000/svg", "use")
// 修正命名空间URI，同时属性名添加xlink:前缀
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "/sprite.svg#some-icon")
svg.append(use)
document.body.append(svg)

方案2：使用SVG 2标准无命名空间href（推荐，兼容所有现代浏览器） #

不需要使用xlink命名空间，直接用标准方法设置href即可：

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
var use = document.createElementNS("http://www.w3.org/2000/svg", "use")
use.setAttribute("href", "/sprite.svg#some-icon")
svg.append(use)
document.body.append(svg)

内容的提问来源于stack exchange，提问作者Qwertiy