未定义 %tagElement% 上 href 的命名空间前缀 NS1，setAttributeNS答案

【问题标题】：Namespace prefix NS1 for href on %tagElement% is not defined, setAttributeNS未定义 %tagElement% 上 href 的命名空间前缀 NS1，setAttributeNS
【发布时间】：2015-07-28 05:17:40
【问题描述】：

我在 safari 中尝试通过代码将 svg 转换为 base64 url 时遇到此错误：

$svgCopy = $('svg').clone()
html = $('<div>').append($svgCopy).html()
imgSrc = 'data:image/svg+xml;base64,' + btoa(html)
imgEl.src = imgSrc

问题是当你用 NS (setAttributeNS) 设置属性时，safari 设置了 NS\d+ 命名空间并且没有在 svg 中设置 xmlns:NS\d+ 属性，所以看起来像

<use NS1:href="#source" />

当你在 Chrome 中复制这样的 svg - 你没有这样的问题，因为这个 svg 元素看起来像这样：

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#source" />

结果（在 svg 副本上）我们得到了无效文件。

UPD：@Robert 和 setAttributeNS 一切正常：

el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#source')

如果没有正确调用，它将无法在 Chrome 中运行。

【问题讨论】：

标签： svg safari namespaces xml-namespaces setattribute

【解决方案1】：

我没有找到比简单地将这些出现替换为更好的解决方案：

html = html.replace(/NS\d+:href/gi, 'xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href')

现在效果很好。

编辑： Firefox 在根目录中需要xmlns:xlink="http://www.w3.org/1999/xlink，而 Safari 喜欢这样，所以现在我将这个属性添加到根目录：

draw.canvas.setAttributeNS('http://www.w3.org/2000/svg', 'xlink', 'http://www.w3.org/1999/xlink')

...并更正 SVG 副本的 HTML 以便在 base64 中进一步使用：

// Firefox, Safari root NS issue fix
html = html.replace('xlink=', 'xmlns:xlink=')
// Safari xlink NS issue fix
html = html.replace(/NS\d+:href/gi, 'xlink:href')

【讨论】：

FWIW 在 Safari 9.1.2 中使用我正在做的事情得到ns1（小写）并在NS 替换中添加了不区分大小写的i：html = html.replace(/NS\d+:href/gi, 'xlink:href')。像魅力一样工作，非常感谢@extempl！