Il prefisso Namespace NS1 per href su% tagElement% non è definito, setAttributeNS - svg, safari, namespace, xml-namespaces, setattribute

Ho ricevuto questo errore in Safari durante il tentativo di convertire l'URL da svg a base64 tramite codice:

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

Il problema è che quando imposti l'attributo con NS (setAttributeNS) safari imposta NSd + namespace e non imposta xmlns: NSd + attributo in svg, quindi sembra

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

Quando copi tale svg in Chrome, non hai questo problema perché questo elemento svg sarà simile al seguente:

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

E in risultato (in copia svg) otteniamo file non valido.

UPD: @Robert con setAttributeNS va tutto bene:

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

Senza una vera chiamata non ha funzionato in Chrome.

risposte:

5 per risposta № 1

Non ho trovato alcuna soluzione migliore di semplicemente sostituire tali occorrenze con la seguente riga di codice:

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

Ora funziona bene.

MODIFICARE: Firefox richiede xmlns:xlink="http://www.w3.org/1999/xlink alla radice, e a Safari piace così, quindi ora aggiungo questo attributo alla radice:

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

e correggere html della copia svg per un ulteriore utilizzo in 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")

---