SVG foreignObject text not showing

Question

I've already looked at this - SVG foreignObject not showing in Chrome

and it did not answer my question. I have text in a foreign object in SVG and it is not showing.

This is my code.

        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");

I have the text inside of a body tag (as the other answer says), but I still don't see the text. It looks like the container div has no height, although I'm explicitly setting the height.

What's going on?

praks5432 praks5432 · Accepted Answer · 2015-08-14T04:16:14

This worked.

Setting a width and height on the foreignObject with CSS.

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

SVG foreignObject text not showing

2 Answers