SVG：为什么 <p> 元素没有显示在 <foreignobject> 中
SVG: Why <p> element is not displaying in <foreignobject>
我试图将 <p> 元素放在 chrome 中 <svg> 节点内的 <foreignobject> 内，但我没有看到文本。我检查了元素，DOM 模型显示了我期望的结构。我通过从 DOM 模型复制创建了这个 jsfiddle，你看它在 fiddle.
中完全按照我的意愿工作
挠了挠头之后，我开始查看两个选项卡中的属性（都在 Chrome 中），此时唯一让我惊讶的是，当我将鼠标悬停在<foreignobject> 或 <p> 元素在 fiddle 中，它在其显示区域显示一个灰色框。当我在实际应用程序中执行此操作时，它对 <foreignobject> 执行相同的操作，但我看不到 <p> 元素。第二个区别是，在fiddle中，<p>元素显示的高度和宽度分别为54px和100px（分别），但在实际应用中它们都被报告为'auto'。
作为实验，我试图在 'p' 的 CSS 中明确设置高度和宽度，但 chrome 只是将其显示为 'invalid property'。
假设这是问题所在，我对如何控制不允许我指定的 属性 有点迷茫。有人可以就如何进一步调试提供一些建议吗？很明显，我正在做的事情导致了这种情况，但我不确定下一步该去哪里。
编辑：
我不知道为什么我以前没有注意到这一点，但我看到了一个可能有助于解释这一点的差异。 fiddle 将 <p> 元素的属性显示为：
- p.description
- HTML段落元素
- HTMLElement
- 节点
- 事件目标
- 对象
应用程序显示这些属性：
- p
- SVGElement
- 元素
- 节点
- 事件目标
- 对象
我认为这与 d3 添加 <p> 元素的方式有关。我将尝试创建一个 fiddle 来创建带有 d3 的元素。
我明白了。 Robert Longson 的评论使 d3 的一些文档最终为我点击。我正在创建这样的 <p> 元素（fo 是外来对象）：
fo.append("p").attr("xmlns", "http://www.w3.org/1999/xhtml")
我将其更改为现在它显示的文本：
fo.append("xhtml:p")
感谢您的帮助。
我试图将 <p> 元素放在 chrome 中 <svg> 节点内的 <foreignobject> 内，但我没有看到文本。我检查了元素，DOM 模型显示了我期望的结构。我通过从 DOM 模型复制创建了这个 jsfiddle，你看它在 fiddle.
挠了挠头之后，我开始查看两个选项卡中的属性（都在 Chrome 中），此时唯一让我惊讶的是，当我将鼠标悬停在<foreignobject> 或 <p> 元素在 fiddle 中，它在其显示区域显示一个灰色框。当我在实际应用程序中执行此操作时，它对 <foreignobject> 执行相同的操作，但我看不到 <p> 元素。第二个区别是，在fiddle中，<p>元素显示的高度和宽度分别为54px和100px（分别），但在实际应用中它们都被报告为'auto'。
作为实验，我试图在 'p' 的 CSS 中明确设置高度和宽度，但 chrome 只是将其显示为 'invalid property'。
假设这是问题所在，我对如何控制不允许我指定的 属性 有点迷茫。有人可以就如何进一步调试提供一些建议吗？很明显，我正在做的事情导致了这种情况，但我不确定下一步该去哪里。
编辑：
我不知道为什么我以前没有注意到这一点，但我看到了一个可能有助于解释这一点的差异。 fiddle 将 <p> 元素的属性显示为：
- p.description
- HTML段落元素
- HTMLElement
- 节点
- 事件目标
- 对象
应用程序显示这些属性：
- p
- SVGElement
- 元素
- 节点
- 事件目标
- 对象
我认为这与 d3 添加 <p> 元素的方式有关。我将尝试创建一个 fiddle 来创建带有 d3 的元素。
我明白了。 Robert Longson 的评论使 d3 的一些文档最终为我点击。我正在创建这样的 <p> 元素（fo 是外来对象）：
fo.append("p").attr("xmlns", "http://www.w3.org/1999/xhtml")
我将其更改为现在它显示的文本：
fo.append("xhtml:p")
感谢您的帮助。