javascript - SVG内的HTML元素未显示

This question already has answers here:

SVG foreignObject contents do not display unless plain text

(5个答案)


已关闭6年。




我在SVG中的foreignObject上苦苦挣扎。我想在rect内添加文本，并获得自动文本换行功能，所以我选择使用HTML。 foreignObject的描述可以在here中找到。

我正在使用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>

我在经过测试的(mac)浏览器(Safari 6.0.2，Chrome 25.0.1364.99，Firefox 18.0.2)中看不到文本。 W3's validator不喜欢输出，请为每张卡给我这个错误:



所以我的问题是，问题出在哪里？为什么不允许将foreignObject作为g元素的子元素？

我也想知道为什么.html(function(d) { return d.statement; });不起作用(无输出)。但是.text(function(d) { return d.statement; });可以正常工作吗？

这是一个fiddle。

最佳答案

简短答案

在foreignObject的所有标记中指定 namespace :用.append("p")替换.append("xhtml:p")，它将起作用:http://jsfiddle.net/EHzcR/2/

长答案

在异物的上下文中，<p></p>不被识别为xhtml段落。为什么？仅仅因为在xhtml上下文中不包含 namespace foreignObject(一个foreignObject可能包含任何内容(例如xml格式的数据)，所以如果您没有明确说出来，它就不会将输入视为html。)。

因此，p标记被视为自定义标记，而不是xhtml标记。因此，由于Web浏览器无法识别它知道的标签中的p标签，因此它不解释它及其内容(即使存在)，也不会抛出错误，因为该内容可能是完全有效，只是不能直接使用。

有趣的是，即使没有必要，您也始终指定 namespace svg，我们都忘记了p，div ...也具有非常流行的 namespace 。
selection.html()函数不起作用，因为在其implementation中它使用了元素的.innerHTML()函数，但是在这里，不是HTML元素的foreignObject没有这样的功能。