fügen Sie dynamisch Fremdobjekt in Svg mit Javascript

Wenn ich diesen Code ausführen zeigt es mir einen leeren Bildschirm, aber wenn ich den Code mit dem Entwickler-Tool in Chrom aktualisieren, dann zeigt es die Daten. Bitte helfen Sie mit einer Erklärung, warum es angezeigt wird, wenn ich den Code mit Hilfe des Entwicklertools von chrome, aktualisiere. Wird es aufgrund von DOM im Browser wieder ausgeführt, wenn ja dann warum nicht bei 1 erstmalig es zeigt. Tritt dies aufgrund von foreignObject auf?fügen Sie dynamisch Fremdobjekt in Svg mit Javascript

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
    <svg id="t"> 
    <g> 
     <text x="10" y="10">hello</text> 
    </g> 
    </svg> 
     <script> 
      var s = document.getElementById('t'); 
      var g = s.childNodes[1]; 
      console.log(g.childNodes[1].remove()); 
      var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject"); 

      foreign.setAttribute('width', 500); 
      foreign.setAttribute('height', 150); 
      var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text'); 
      txt.setAttribute('x', '10'); 
      txt.setAttribute('y', '10'); 
      var t = document.createTextNode("This is a paragraph."); 
      txt.appendChild(t); 
      foreign.appendChild(txt); 
      g.appendChild(foreign); 

</script>   
</body> 
</html>

Quelle

2015-07-05 Pranjal

@JabranSaeed arbeitet, Robert Longson ist kanonisch. – Kaiido

SVG-Textknoten nicht das Kind eines foreign Knoten sein können, benötigen Sie einen SVG-Knoten im Weg. Z.B.

 var s = document.getElementById('t'); 
 
     var g = s.childNodes[1]; 
 
     console.log(g.childNodes[1].remove()); 
 
     var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject"); 
 

 
     foreign.setAttribute('width', 500); 
 
     foreign.setAttribute('height', 150); 
 
     var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
 
     var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text'); 
 
     txt.setAttribute('x', '10'); 
 
     txt.setAttribute('y', '30'); 
 
     var t = document.createTextNode("This is a paragraph."); 
 
     txt.appendChild(t); 
 
     foreign.appendChild(svg); 
 
     svg.appendChild(txt); 
 
     g.appendChild(foreign);

<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
    <svg id="t"> 
 
    <g> 
 
     <text x="10" y="30">hello</text> 
 
    </g> 
 
    </svg> 
 
</body> 
 
</html>

Having said that, ich sehe nicht, warum Sie foreign verwenden wollen würde, es sei denn Sie einige nicht-svg Knoten schaffen wirst.

Die andere Sache, die Leute auflöst, ist das Erstellen von Elementen im richtigen Namespace. SVG-Elemente müssen in den SVG-Namespace (http://www.w3.org/2000/svg) gehen.

Womöglich führt das erneute Hochfahren dazu, dass Chrome den Svg-Parent-Knoten selbst erstellt, oder vielleicht ist es nur ein Chrome-Bug.

Quelle

2015-07-05 15:49:07

Ich stehe vor dem gleichen Problem. fremnObject wird ausgeblendet, es sei denn, es wurde speziell (als HTML) von den chrome/firefox-Entwicklertools bearbeitet. Sieht so aus, als ob es eine Auffrischung irgendeiner Art erfordert. –

@JabranSaeed Meine Antwort funktioniert bei Firefox und Chrome. –

@JabranSaeed if you want to use foroeignObject to insert non svg element then: 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
    <svg id="t"> 
    <g> 

    </g> 
    </svg> 
<script> 
    var s = document.getElementById('t'); 
     var g = s.childNodes[1]; 

     var foreign = document.createElementNS 

('http://www.w3.org/2000/svg',"foreignObject"); 

     foreign.setAttribute('width', 500); 
     foreign.setAttribute('height',500); 
     var iDiv = document.createElement('div'); 
     var t = document.createTextNode("This is a paragraph."); 
     iDiv.appendChild(t); 
     foreign.appendChild(iDiv); 

     g.appendChild(foreign); 
</script> 
</body> 
</html>

Quelle

2015-08-30 09:52:08 Pranjal

Eigentlich ist Ihr anhängendes Kindteil das Problem.

Sie haben es nicht in der richtigen Reihenfolge angehängt.

Überprüfen Sie den Code unten und versuchen, geben Sie mir

 var s = document.getElementById('t'); 
     var g = s.childNodes[1]; 
     g.childNodes[1].remove(); 
     var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject"); 
     foreign.setAttribute('width', 500); 
     foreign.setAttribute('height', 150); 
     var t = document.createTextNode("This is a paragraph."); 
     foreign.appendChild(t); 
     g.appendChild(foreign);

informieren, wenn es

Quelle

2015-09-03 05:12:34

@JabranSaeed if you want to use foroeignObject,beter to follow this method 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
    <svg id="t"> 
    <g> 

    </g> 
    </svg> 
<script> 
    var s = document.getElementById('t'); 
     var g = s.childNodes[1]; 

     var foreign = document.createElementNS 

('http://www.w3.org/2000/svg',"foreignObject"); 

     foreign.setAttribute('width', 500); 
     foreign.setAttribute('height',500); 
     var iDivele = document.createElement('div'); 
     var ob = document.createTextNode("xxxx"); 
     iDiv.appendChild(ov); 
     foreign.appendChild(iDivele); 

     g.appendChild(foreign); 
</script> 
</body> 
</html>

Quelle

2015-09-03 06:36:11

fügen Sie dynamisch Fremdobjekt in Svg mit Javascript

Antwort

Verwandte Themen