Префикс пространства имен NS1 для HREF на% TagElement% не определена, setAttributeNS

Question

Я получил эту ошибку в сафари при попытке конвертировать SVG в base64 URL с помощью кода:

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

Проблема заключается в том, что при установке атрибутов с NS (setAttributeNS) сафари наборы NS \ d + пространство имен и не устанавливает XMLNS: NS \ d + атрибут в SVG, так это выглядит, как

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

при копировании таких г в Chrome - вы не имеете такую ​​проблему, потому что этот 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') 

Сейчас он работает хорошо.

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

и исправление HTML в SVG копию для дальнейшего использования в 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')