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

Question

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

$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 中运行。

Answer 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')

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

Namespace prefix NS1 for href on %tagElement% is not defined, setAttributeNS

safari

svg

namespaces

setattribute

xml-namespaces