Tar*_*gar 9 javascript svg d3.js
有没有办法将foreignObject包含一些简单 HTML的元素附加到 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 也保持不变。还有什么我需要做的吗？
您忘记将命名空间附加到<foreignObject>Element：
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>您不需要document.createElementNSor document.createElement，您可以简单地foreignObject使用您的 D3 选择附加。
这是从 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>