Échec de l'exécution de 'appendChild" sur "Nœud": un Seul élément sur le document autorisé

Je suis en train de charger un externe fichier svg, puis écrire d'autres éléments SVG. Quand je le fais, j'obtiens l'erreur "Échec de l'exécution de 'appendChild" sur "Nœud": un Seul élément sur le document autorisé." lorsque j'ai inspecter dans google Chrome.

Voici le code HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
  </head>
  <body>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySvg">
        <circle cx="40" cy="30" r="15" fill="#FF00FF"
          stroke="#000000" stroke-width="2" />
      </svg>
      <object data="img/drawing.svg" type="image/svg+xml"
        align="center" id="svgDrw" height="80vh"></object>
    <script type="text/javascript" src="js/problem.js"></script>
  </body>
</html>

Voici problem.js:

var svgXtraDoc;
var d = document.getElementById("svgDrw");

d.addEventListener("load",function(){

  //get the inner DOM 
  svgXtraDoc = d.contentDocument;
  //get the inner element by id
  svgRect1 = svgXtraDoc.getElementById("MyRect1");
  svgRect2 = svgXtraDoc.getElementById("MyRect2");
}, false);


function addRect() {
  var svgRect = document.createElementNS("http://www.w3.org/2000/svg", 
    "rect");
  svgRect.setAttribute("x", 100);
  svgRect.setAttribute("y", 100);
  svgRect.setAttribute("width", 100);
  svgRect.setAttribute("height", 100);
  svgRect.style.fill = "red";
  //mySvg.appendChild(svgRect);
  svgXtraDoc.appendChild(svgRect);
}

document.getElementById("mySvg").addEventListener("click", addRect);

... et voici le dessin.svg, dépouillé de certains de la Inkscapy trucs:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="29.02857mm"
   height="37.092064mm"
   viewBox="0 0 102.85714 131.42857"
   id="svg2"
   version="1.1">
  <g
     id="layer1"
     transform="translate(-205.71428,-218.07649)">
    <rect
       style="stroke:none;fill-opacity:1;fill:#5eb056"
       id="MyRect1"
       width="102.85714"
       height="131.42857"
       x="205.71428"
       y="218.07649" />
    <rect
       style="fill:#000000;stroke:none;fill-opacity:1"
       id="MyRect2"
       width="42.857143"
       height="65.714287"
       x="231.42857"
       y="252.3622" />
  </g>
</svg>

L'erreur se produit lorsque vous cliquez sur le cercle, le rectangle qui doit apparaître dans les deux-rectangle importés dessin n'apparaît pas, et le message d'erreur "Échec de l'exécution de 'appendChild" sur "Nœud": un Seul élément sur le document autorisé." est affiché dans la console.

Si je change ce de sorte que le rectangle est ajouté à la svg contenant le cercle, c'est à dire en décommentant la ligne "//mySvg.appendChild(svgRect);", puis sur le rectangle avec succès s'affiche.

Je sais aussi que le fichier de dessin est réussi chargement, parce que dans un autre code (non inclus ici par souci de concision raisons) je peux changer les couleurs des rectangles à l'intérieur du fichier. Il semble donc que je peux accéder à des éléments existants dans le fichier, mais ne pas ajouter des éléments.

Est-il quelque chose à propos de l'extérieur chargé SVGs contre inline SVGs que je ne suis pas prise en compte?

Une dernière chose, c'est d'aller dans une application Cordova donc je voudrais le garder petit, si pur JavaScript, des solutions sont à privilégier. Je vais utiliser JQuery ou SnapSVG si je dois le faire mais il semble que mes besoins sont assez simples pour qu'il devrait être possible de le faire sans que les bibliothèques externes.

J'ai juste travaillé un moyen de contourner mon problème, je veux ajouter des cercles indiquant les endroits où, si je peux juste les mettre dans le fichier d'origine avec de remplissage et de contour défini sur aucun, puis de les rendre visibles au moment opportun, plutôt que de la création et de les ajouter lorsque l'événement se produit. Je serais toujours intéressé par une réponse à la question posée.

OriginalL'auteur William Whyte | 2016-12-23

javascript svg

12

Il y a une différence entre le nœud racine d'un document et de l'élément document. Ce que vous voulez, c'est le <svg> élément de document, mais .contentDocument vous obtient le nœud racine.

Le nœud racine est un niveau de la hiérarchie. Ce qui signifie que le <svg> élément de document réside à l'intérieur du nœud racine et le nœud racine ne peut avoir cette <svg> élément enfant.

Pour obtenir l'élément de document, faites ceci:
```
svgXtraDoc = d.contentDocument.documentElement;
```
Fonctionne parfaitement, merci beaucoup!
Super merci beaucoup!

OriginalL'auteur Thomas W
22

Dans mon cas, le DOM a été se plaindre parce que j'ai essayé d'ajouter un enfant dans le document lui-même:
```
document.appendChild(myElement);
```
Je l'ai résolu par l'obtention d'une référence à la balise body:
```
document.body.appendChild(logger);
```
Cela a résolu mon problème. Merci d'avoir pris le temps d'écrire la réponse.
Merci à vous monsieur 🙂

OriginalL'auteur Luillyfe

Vous devez vous connecter pour publier un commentaire.