Question

有没有办法将包含一些简单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仍保持不变。还有什么我需要做的吗？

Answer 1

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

Answer 2

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

这是从Bostock借鉴的一个例子，D3创作者：

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

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

2 个答案: