在SVG元素中附加包含一些HTML的foreignObject

Append foreignObject containing some HTML inside an SVG element

本文关键字：HTML foreignObject 包含一 SVG 元素      更新时间：2023-09-26

有没有办法将包含一些简单HTML的foreignObject元素附加到svg元素中？这是我尝试过的代码：

 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即使在执行了这段代码之后仍然保持不变。我还有什么需要做的吗？

您不需要document.createElementNS或document.createElement，只需使用D3选项附加foreignObject即可。

这是从D3创建者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>

您忘记将名称空间附加到<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>

相关文章：