css - SVG:为什么 <p> 元素没有显示在 <foreignobject> 中

Question

我正在尝试放置一个 <p> <foreignobject> 中的元素在 <svg> 里面chrome 中的节点，但我没有看到文本。我检查了该元素，DOM 模型显示了我期望的结构。我创建了这个 jsfiddle通过从 DOM 模型复制，你瞧，它完全按照我在 fiddle 中的期望工作。

挠了挠头之后，我开始查看两个选项卡(均在 Chrome 中)中的属性，此时唯一让我惊讶的是，当我将鼠标悬停在 <foreignobject> 上时或 <p> fiddle 中的元素，它会在显示区域显示一个灰色框。当我在实际应用程序中执行此操作时，它对 <foreignobject> 执行相同的操作但我看不到 <p>元素。第二个区别是在 fiddle 中，<p>元素显示高度和宽度分别为 54px 和 100px，但在实际应用中它们都被报告为“自动”。

作为实验，我尝试在 CSS 中为“p”显式设置高度和宽度，但 chrome 仅将其显示为“无效属性”。

假设这就是问题所在，我对如何控制不允许我指定的属性有点迷茫。有人可以就如何进一步调试提供一些建议吗？很明显，我正在做的事情导致了这种情况，但我不确定下一步该往哪里看。

编辑:

我不知道为什么我以前没有注意到这一点，但我看到了一个可能有助于解释这一点的差异。 fiddle 显示了 <p> 的属性元素为:

• p.description
• HTML段落元素
• HTML元素
• 节点
• 事件目标
• 对象

应用程序显示这些属性:

• p
• SVGElement
• 元素
• 节点
• 事件目标
• 对象

我认为这与 d3 添加 <p> 的方式有关元素。我将尝试创建一个使用 d3 创建元素的 fiddle 。

Answer 1

我想通了。 Robert Longson 的评论使 d3 的一些文档最终为我点击。我正在创建 <p>像这样的元素(fo 是外来对象):

fo.append("p").attr("xmlns", "http://www.w3.org/1999/xhtml")

我把它改成了这样，它现在显示的是文本:

fo.append("xhtml:p")

感谢您的帮助。