SVG要素内にいくつかのHTMLを含むforeignObjectを追加する

単純なHTMLを含むforeignObject要素をsvg要素に追加する方法はありますか？私が試したコードは次のとおりです：SVG要素内にいくつかのHTMLを含むforeignObjectを追加する

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

しかし、このコードを実行してもsvgは変わりません。私がする必要があることは他にありますか？

出典

2016-07-18 Tarun Dugar

あなたは<foreignObject>要素に名前空間を添付するのを忘れ：

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>

出典

2016-07-18 13:28:26 Sirko

をあなたのD3の選択を使用してforeignObjectを追加することができます。これは、ボストックの例である：

<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>

出典

2016-07-18 13:33:06

SVG要素内にいくつかのHTMLを含むforeignObjectを追加する

答えて

関連する問題