我正在尝试将<p>元素放在<foreignobject>内<svg>节点内的Chrome中，但我没有看到该文本。我检查了元素，DOM模型显示了我期望的结构。我通过从DOM模型中复制来创建这个jsfiddle并且看到它完全按照我在小提琴中所希望的那样工作。
稍微摸了一下头后，我开始查看两个标签中的属性（都在Chrome中），此时只有两件事突然出现，当我将鼠标悬停在<foreignobject>或小提琴中的<p>元素，它会显示一个灰色框，显示它所在的区域。当我在实际应用程序中执行此操作时，它对<foreignobject>执行相同操作，但我看不到<p>元素的任何内容。第二个区别是，在小提琴中，<p>元素的高度和宽度分别为54px和100px，但在实际应用中，它们都被报告为“自动”。
作为一项实验，我尝试在CSS中为'p'明确设置高度和宽度，但chrome只是将其显示为'无效属性'。
假设这是问题，我对于如何控制我不允许指定的属性有点迷茫。有人可以提供一些有关如何进一步调试的建议吗？显然我正在做的事情导致这种情况，但我不确定下一步该在哪里。
编辑：
我不知道为什么我之前没有注意到这一点，但我看到了可能有助于解释这一点的差异。小提琴将<p>元素的属性显示为：
该应用程序显示以下属性：
我认为这与d3如何添加<p>元素有关。我将尝试创建一个用d3创建元素的小提琴。
答案 0 :(得分：0)
我明白了。 Robert Longson的评论让d3的一些文档终于点击了我。我正在创建这样的<p>元素（fo是外来对象）：
fo.append("p").attr("xmlns", "http://www.w3.org/1999/xhtml")
我将其更改为此，现在显示文字：
fo.append("xhtml:p")
感谢您的帮助。