Przedrostek przestrzeni nazw NS1 dla href na% tagElement% nie jest zdefiniowany, setAttributeNS - svg, safari, przestrzenie nazw, przestrzenie nazw xml, setattribute

Ten błąd wystąpił w programie Safari podczas próby przekonwertowania adresu URL SVG na adres base64 za pomocą kodu:

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

Problem polega na tym, że po ustawieniu atrybutu za pomocą NS (setAttributeNS) safari ustawia przestrzeń nazw NSd + i nie ustawia atrybutów xmlns: NSd + w svg, więc wygląda to

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

Kiedy kopiujesz taki svg w Chrome - nie masz takiego problemu, ponieważ ten element svg będzie wyglądał tak:

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#source" />

W rezultacie (na kopii svg) otrzymujemy nieprawidłowy plik.

UPD: @Robert z setAttributeNS wszystko w porządku:

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

Bez odpowiedniego połączenia nie działa w Chrome.

Odpowiedzi:

5 dla odpowiedzi № 1

Nie znalazłem lepszego rozwiązania niż po prostu zastąpienie tych wystąpień następującym wierszem kodu:

html = html.replace(/NSd+:href/gi, "xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href")

Teraz działa dobrze.

EDYTOWAĆ: Firefox wymaga xmlns:xlink="http://www.w3.org/1999/xlink w katalogu głównym, a Safari to lubi, więc teraz dodaję ten atrybut do katalogu głównego:

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

i poprawianie html kopii svg do dalszego wykorzystania w base64:

// Firefox, Safari root NS issue fix
html = html.replace("xlink=", "xmlns:xlink=")
// Safari xlink NS issue fix
html = html.replace(/NSd+:href/gi, "xlink:href")

---