html显示svg所有元素,SVG中的HTML元素未显示
我和foreignObjectSVG 一起讨厌.我想在一个内部添加文本rect,并获得自动文本换行我选择使用HTML.foreignObject可以在这里找到描述.
我正在使用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; });
卡的输出是这样的:
<
p class="statement">Sport
我无法在我测试的(mac)浏览器中看到该文本(Safari 6.0.2,Chrome 25.0.1364.99,Firefox 18.0.2).W3的验证器不喜欢输出,并为每张卡给我这个错误:
在此上下文中,元素foreignObject不允许作为元素g的子元素.
所以我的问题是,问题出在哪里,为什么不允许foreignObject作为g元素的子元素？
我也想知道为什么.html(function(d) { return d.statement; });不起作用(没有输出).但.text(function(d) { return d.statement; });工作正常吗？
这是一个小提琴.