SVG内的HTML元素未显示 [英] HTML element inside SVG not displayed

问题描述

我正在为SVG中的 foreignObject 苦苦挣扎.我想在 rect 内添加文本，并选择自动使用HTML来自动换行.可以在此处找到 foreignObject 的描述.

I am struggeling with the foreignObject in SVG. I want to add text inside a rect, and to get auto text wrap I have chosen to use HTML. The description of foreignObject can be found here.

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

I am working with D3, and this is my data:

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}
];

我为每个基准添加了一张卡片，并希望显示数据中的声明".

I add a card for each datum and want to display the "statement" from the data.

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的验证器不喜欢输出，请为每张卡给我这个错误:

I can't see the text in the (mac) browsers I have tested (Safari 6.0.2, Chrome 25.0.1364.99, Firefox 18.0.2). W3's validator doesn't like the output, and give me this error for each card:

在这种情况下，元素foreignObject不能作为元素g的子元素.

Element foreignObject not allowed as child of element g in this context.

所以我的问题是，问题出在哪里，为什么不允许ForeignObject作为 g 元素的子代?

So my question is, where is the problem, and why is foreignObject not allowed as a child of a g element?

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

I am also wondering why .html(function(d) { return d.statement; }); doesn't work (no output). But .text(function(d) { return d.statement; }); works fine?

这里是小提琴.

推荐答案

简短答案

在外部对象的所有标记中指定名称空间:将 .append("p")替换为 .append("xhtml:p")，它将起作用: http://jsfiddle.net/EHzcR/2/

Short answer

Specify the namespace in all tags in a foreignObject: replace .append("p") by .append("xhtml:p") and it will work: http://jsfiddle.net/EHzcR/2/

在异物的上下文中，< p></p> 不被识别为 xhtml 段落.为什么?仅仅是因为名称空间 xhtml 不包含在 foreignObject 上下文中( foreignObject 可能包含任何内容( xml 格式的数据例如)，因此如果您未明确说明输入内容，则不会将其视为html.)

In the context of foreign objects, <p></p> is not recognized as a xhtml paragraph. Why? Simply because the namespace xhtml is not included in the foreignObject context (a foreignObject might contain anything (xml formated data for example) so it doesn't consider the input as html if you don't explicitly say it.).

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

So the p tag is considered as a custom tag, not as a xhtml tag. Thus, as the web browser doesn't recognize the tag p in the tags it knows, so it just doesn't interpret it and its content, even if it exists, it won't throw an error as well because this content might be totally valid, just not for its direct use.

很高兴看到您始终指定名称空间 svg ，即使没有必要，我们也都忘记了 p ， div ...也有一个非常流行的命名空间.

It is fun to see that you always specify the namespace svg even if it is not necessary and how we all forget that the p, div... also have a very popular namespace.

selection.html()函数不起作用，因为在其

The selection.html() function doesn't work because in its implementation it uses the .innerHTML() function of the element, but here, the foreignObject, not being an html element, doesn't have such a function.

这篇关于SVG内的HTML元素未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！