Warum nicht dynamische SVG funktioniert, wenn nicht über createElementNS behandelt

Question

Ich habe versucht, SVG in plain JS zu manipulieren und festgestellt, dass es sich nicht wie beabsichtigt verhält, wenn ich keine Methoden wie createElementNS und setAttributeNS verwenden.

<svg id="mydsvg" width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

Das obige Markup funktioniert einwandfrei. Wenn Sie jedoch versuchen, über den folgenden Code einen weiteren Kreis hinzuzufügen, werden Sie ihn nicht sehen.

var circle = createElement('circle'); 
circle.setAttribute('cx', 50); 
.... 
document.getElementById('mysvg').appendChild(circle); 

Aber wenn Sie createElementNS und setAttributeNS verwenden, wird es wie erwartet funktionieren.

Am schlimmsten sein, beide createElement und erstellen identische DOM-Text.

Answer 1

Es funktioniert nicht, da die Spezifikationen besagen, dass SVG-Elemente im SVG-Namespace vorhanden sein müssen und createElement Elemente im html-Namespace erstellt. Wie würde ein Parser sonst wissen, ob Sie ein html <a> Element erstellen wollten, das mit einem src Attribut oder einem SVG <a> Element arbeitet, für das ein 'xlink: href Attribut benötigt wird.

In HTML, wo Namespaces nicht serialisiert sind, sehen die Dinge gleich aus. In XML, wo Namespaces serialisiert werden, tun sie dies nicht.

SVG in HTML wie folgt aussieht ...

<svg id="mydsvg" width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

SVG als eigenständiges Dokument aussehen würde wie diese

<svg xmlns="https://www.w3.org/2000/svg" id="mydsvg" width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

Der Kreis den Namensraum des übergeordneten erbt.