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

本文介绍了将包含一些HTML的foreignObject附加到SVG元素中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

有没有办法将包含一些简单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 = 'www.w3/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>