未定义%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/xlinkroot,Safari喜欢它,所以现在我将这个属性添加到R​​oot:

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