Question

我已经看过这个 - SVG foreignObject not showing in Chrome

并没有回答我的问题。我在SVG的外来对象中有文本，但没有显示。

这是我的代码。

        var svg = d3.select("#chart").append("svg").attr('width', width).attr('height', height);

        var cell = svg.selectAll("g")
            .data(nodes)
            .enter().append("g")
            .attr("class", "cell");

        cell.append("rect")
            .attr("class", "node")
            .attr("x", function(d) { 
                return x(d.x); })
            .attr("y", function(d) { 
                return y2(d.y); })
            .attr("width", function(d) { 
                return x(d.dx); })
            .attr("height", function(d) { 
                return y2(d.dy); })
            .style("fill", function(d) { 
                var test = (d.children ? d : d.parent).name;
                console.log(test);
                return color(Math.random());; 
            })

        cell.append("foreignObject")
            .attr("class", "foreignObject")
            .attr("width", function(d) {
                return d.dx;
            })
            .attr("height", function(d){
                return d.dy;
            })
            .attr("transform", function(d) {
                return "translate(" + x(d.x + d.dx/2) + "," + (y2(d.y)) + ") rotate(90)";
            })
            .append("xhtml:body")
            .attr("class","label")
            .append("div")
            .text(function(d){
                return d.name;
            })
            .attr("text-anchor", "middle");

我有一个正文标签内的文字（正如另一个答案所说），但我仍然没有看到文字。看起来容器div没有高度，尽管我明确地设置了高度。

发生了什么？

Answer 1

这很有用。

使用CSS在foreignObject上设置宽度和高度。

.foreignObject {
    font: 9px sans-serif;
    text-overflow: ellipsis;
    text-align: left;
    word-wrap: break-word;
    height: 100px;
    width: 100px;
}

Answer 2

在使用<foreignObject>代码之前，您需要添加<switch>代码。

看起来像这样的东西

<switch>
<foreingObject>
<body>
some code here
</body>
</foreingObject>
</switch>

这应该适用于Chrome

SVG foreignObject文本没有显示

2 个答案: