Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is an svg:text just not displaying?

Tags:

css

svg

d3.js

I must be missing something obvious, but I can't get the <text> to show up. See http://jsfiddle.net/ydaLh/ for HTML + CSS

<svg style="width: 320px; height: 200px; top: 0px; left: 0px; position: relative;">
    <g class="depth">
        <g class="children">
            <rect class="child" x="99" y="0" width="47" height="30">
                <text dy=".75em" x="105" y="6">PRIMARY</text>
            </rect>
            <rect class="child" x="90" y="0" width="8" height="30">
                <text dy=".75em" x="96" y="6">MASTER</text>
            </rect>
            <rect class="parent" x="90" y="0" width="56" height="30"></rect>
        </g>
    </g>
</svg>

Based on http://bost.ocks.org/mike/treemap/

like image 813
Remus Rusanu Avatar asked Feb 20 '13 00:02

Remus Rusanu


1 Answers

In SVG you don't nest text elements within graphical elements, you must have something similar to:

svg
  .append("rect")
  .append("text");

But you actually need:

svg.append("rect"); 
svg.append("text"); 
like image 103
methodofaction Avatar answered Sep 21 '22 15:09

methodofaction