为什么 svg:text 不显示？答案

【问题标题】：Why is an svg:text just not displaying?为什么 svg:text 不显示？
【发布时间】：2013-02-04 21:39:38
【问题描述】：

我一定遗漏了一些明显的东西，但我无法让 <text> 出现。有关 HTML + CSS，请参阅 http://jsfiddle.net/ydaLh/

<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>

基于http://bost.ocks.org/mike/treemap/

【问题讨论】：

在 SVG 中，你不能在图形元素中嵌套文本元素，你必须有 svg.append("rect").append("text") 这样的东西，但你实际上需要 svg.append("rect"); svg.append("text")
@Duopixel 你能把它添加为答案吗？

标签： css svg d3.js

【解决方案1】：

在 SVG 中，你不能在图形元素中嵌套文本元素，你必须有类似的东西：

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

但你实际上需要：

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

【讨论】：