Javascript SVG中的HTML元素未显示

我正在用SVG中的

foreignObject

。我想在

rect

中添加文本，为了自动换行，我选择使用HTML。可以找到

外来对象

的说明

我正在使用D3，这是我的数据：

var cds = [
{"uid":"U12","sid":"16","statement":"Movies","x":10,"y":10},
{"uid":"U20","sid":"17","statement":"Food","x":10,"y":170},
{"uid":"U22","sid":"15","statement":"Sport","x":10,"y":330}
];

我为每个数据添加了一张卡片，并希望显示数据中的“语句”

var cardsize = { width : 150, height : 150 };

var svg = d3.select("body").append("svg:svg")
    .attr("width", 170)
    .attr("height", 490);

var card =  svg.selectAll("rect")
    .data(cds)
    .enter().append("svg:g")
    .attr("class", "card")
    .attr("transform", function(d,i) { 
        d.x = 10;
        d.y = 10+i*(10+cardsize.height);
        return "translate(" + d.x + "," + d.y + ")";
    });

card.append("svg:rect")
    .attr('width', cardsize.width)
    .attr('height', cardsize.height)

card.append("svg:foreignObject")
    .attr('width', cardsize.width)
    .attr('height', cardsize.height)
    .append('p')
    .attr("class","statement")
    .text(function(d) { return d.statement; });

卡的输出如下所示：

<g class="card" transform="translate(10,330)">
    <rect width="150" height="150"></rect>
    <foreignObject width="150" height="150"><
        p class="statement">Sport</p>
    </foreignObject>
</g>

<
p class=“声明”>运动

在我测试过的（mac）浏览器（Safari 6.0.2、Chrome 25.0.1364.99、Firefox 18.0.2）中，我看不到文本。不喜欢输出，并为每张卡提供以下错误：

在此上下文中，元素foreignObject不允许作为元素g的子元素

所以我的问题是，问题在哪里，为什么不允许foreignObject作为

g

元素的子元素

我还想知道为什么

.html（函数（d）{returnd.statement；}）不工作（无输出）。但是
.text（函数（d）{returnd.statement；}）工作正常吗

这里有一个问题。
我无法从你的问题中判断你是否真的可以查看foreignObjects中的文本？（如果您的回答是“是”，那么您使用的浏览器是什么？）

我期待着这里的其他答案，因为下面的方法对我来说似乎不是最优的，但它确实得到了大部分的方法

使用Chrome，并尝试根据生成foreignObject内的
标记，然后在
内生成
，使我无法看到文本。但是，只需将内部的
保留在外，并添加一个类来设置foreignObject的样式，就可以产生所需的结果


下面添加了代码的更新部分：

用于添加外来对象文本的D3部分

CSS

简短回答
在foreignObject中的所有标记中指定名称空间：用
.append（“p”）
替换
.append（“xhtml:p”）
，它将起作用：


长话短说
在异物的上下文中，
不被识别为
xhtml
段落。为什么？因为名称空间<代码> XHTML<代码>未包含在<代码> OutGeNobjtub>代码>上下文中（A<代码> FooGoNobIds<代码>可能包含任何内容（例如，代码> XML 例如格式数据），因此如果您没有明确地说出它，则它不会将输入视为HTML。
因此，
p
标记被视为自定义标记，而不是
xhtml
标记。因此，由于web浏览器无法识别它知道的标记中的标记
p
，因此它不会解释它及其内容，即使它存在，也不会抛出错误，因为此内容可能完全有效，只是不用于直接使用

有趣的是，您总是指定名称空间
svg
，即使它不是必需的，而且我们都忘记了
p
，
div
。。。还有一个非常流行的名称空间

selection.html（）
函数不起作用，因为它使用元素的
.innerHTML（）
函数，但在这里，不是html元素的foreignObject没有这样的函数
 谢谢你，马特。但是您没有将
foreignObject
添加到
g
对象，这是一个问题，因为在我的实现中，我正在拖动这些卡片，因此文本应该是
g.card
元素的一部分（否则，当移动卡片时，它们不会标记）。我用拖拽更新了小提琴。因此，我需要一个解决方案，其中我将
g.card
作为父对象，然后将
rect
+
foreignObject
作为子对象。为了回答您的问题：我无法在
foreignObjects
中查看文本，但当我检查元素时，我可以看到文本在DOM中。我还使用浏览器信息更新了我的问题。相关：
svg.selectAll("foreignObject")
    .data(cds)
    .enter()
  .append("foreignObject")
    .attr("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Extensibility")
    .attr('width', cardsize.width)
    .attr('height', cardsize.height)
    .attr("x", 10)
    .attr("y", function (d, i) { return 10 + i * (10 + cardsize.height) })
    .attr("class", "fo-text")
    .text(function (d) { return d.statement; });

.fo-text {
    padding: 5px 10px;  
    font: 300 14px "Helvetica Neue", sans-serif;
    color: #000;
}