Question

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

1 1
2 2

问题是，当您使用NS设置属性（setAttributeNS）时，safari设置NS \ d +名称空间并且不在svg中设置xmlns：NS \ d +属性，所以它看起来像

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

当您在Chrome中复制此类svg时 - 您没有这样的问题，因为此svg元素将如下所示：

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

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

UPD：@Robert <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#source" />一切正常：

setAttributeNS

如果没有正确的通话，它将无法在Chrome中使用。

Answer 1

我找不到更好的解决方案，而不是简单地用以下内容替换这些事件：

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

现在效果很好。

编辑： Firefox根目录需要html = html.replace(/NS\d+:href/gi, 'xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href')，Safari喜欢这样，所以现在我将这个属性添加到Root：

xmlns:xlink="http://www.w3.org/1999/xlink

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

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