将包含一些HTML的foreignObject附加到SVG元素中 [英] Append foreignObject containing some HTML inside an SVG element

问题描述

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

Is there any way to append a foreignObject element containing some simple HTML to an svg element? Here's the code I tried:

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

But the svg remains the same even after this code executes. Is there anything else that I need to do?

推荐答案

您忘记将命名空间附加到< ; foreignObject> 元素：

You forgot to attach the namespace to the <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>

这篇关于将包含一些HTML的foreignObject附加到SVG元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！