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

Question

我在 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 中工作。

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