FremdesObjekt anhängen, das etwas HTML in einem SVG-Element enthält

Gibt es eine Möglichkeit, ein foreignObject-Element mit einem einfachen HTML-Code an ein SVG-Element anzuhängen? Hier ist der Code, den ich versuchte:FremdesObjekt anhängen, das etwas HTML in einem SVG-Element enthält

var foreignObject = document.createElement('foreignObject'); 
foreignObject.setAttribute('height', '300'); 
foreignObject.setAttribute('width', '300'); 
var div = document.createElement('div'); 
div.innerHTML = 'Hello World'; 
foreignObject.appendChild(div); 
svg.appendChild(foreignObject); //svg is an already created svg element containing a d3 chart

Aber die svg gleich bleibt auch nach diesem Code ausführt. Gibt es noch etwas, das ich tun muss?

Quelle

2016-07-18 Tarun Dugar

Sie haben vergessen, den Namespace zum <foreignObject> Element zu befestigen:

var ns = 'http://www.w3.org/2000/svg'; 
 
var svg = document.querySelector('svg'); 
 

 
var foreignObject = document.createElementNS(ns, 'foreignObject'); 
 
foreignObject.setAttribute('height', 300); 
 
foreignObject.setAttribute('width', 300); 
 

 
var div = document.createElement('div'); 
 
div.innerHTML = 'Hello World'; 
 

 
foreignObject.appendChild(div); 
 
svg.appendChild(foreignObject); //svg is an already created svg element containing a d3 chart

<svg></svg>

Quelle

2016-07-18 13:28:26 Sirko

Sie die foreignObject Ihre D3 Auswahl mit anhängen. Dies ist ein Beispiel von Bostock:

<meta charset="utf-8"> 
 
<body> 
 
<script src="//d3js.org/d3.v3.min.js"></script> 
 
<script> 
 
var svg = d3.select("body").append("svg") 
 
    .attr("width", 960) 
 
    .attr("height", 500); 
 
svg.append("foreignObject") 
 
    .attr("width", 480) 
 
    .attr("height", 500) 
 
    .append("xhtml:div") 
 
    .style("font", "14px 'Helvetica Neue'") 
 
    .html("<h1>An HTML Foreign Object in SVG</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. "); 
 
</script>

Quelle

2016-07-18 13:33:06

FremdesObjekt anhängen, das etwas HTML in einem SVG-Element enthält

Antwort

Verwandte Themen