Fehler beim Ausführen von 'appendChild' auf 'Node': Nur ein Element im Dokument erlaubt

Ich versuche, eine externe SVG-Datei zu laden und schreibe dann zusätzliche SVG-Elemente darüber. Wenn ich das tue, erhalte ich den Fehler "AppendChild konnte nicht auf 'Node' ausgeführt werden: Nur ein Element im Dokument erlaubt." wenn ich in Chrome inspiziere.

Hier ist der HTML-Code:

Hier ist problem.js:

... und hier ist drawing.svg, von einigen Inkscapy cruft befreit:

Der Fehler tritt auf, wenn Sie auf den Kreis klicken: das Rechteck, das in der importierten Zeichnung mit zwei Rechteck angezeigt werden soll, wird nicht angezeigt und die Fehlermeldung "Ausführen von 'appendChild' auf 'Node': Nur ein Element ist aktiviert Dokument erlaubt. " wird in der Konsole angezeigt.

Wenn ich das so ändere, wird das Rechteck zum svg hinzugefügt, der den Kreis enthält, d. h. durch Auskommentieren der Zeile "// mySvg.appendChild (svgRect);", dann wird das Rechteck erfolgreich angezeigt.

Ich weiß auch, dass die Zeichnungsdatei erfolgreich geladen wird, weil ich in anderem Code (der aus Gründen der Kürze hier nicht enthalten ist) die Farben der Rechtecke innerhalb dieser Datei ändern kann. Es scheint also, dass ich auf vorhandene Elemente innerhalb der Datei zugreifen kann, aber keine Elemente hinzufügen kann.

Gibt es etwas über extern geladene SVGs gegenüber Inline-SVGs, die ich nicht in Betracht ziehe?

Eine letzte Sache - das geht in eine Cordova-App, also möchte ich es klein halten, so dass reine JavaScript-Lösungen bevorzugt werden. Ich werde JQuery oder SnapSVG verwenden, wenn ich muss, aber es scheint, dass meine Bedürfnisse ausreichend einfach sind, dass es möglich sein sollte, dies ohne externe Bibliotheken zu tun.