SVG文本路径：文本不显示在浏览器中

有人能验证我创建的svg元素并解释为什么不显示文本吗

作为背景故事，我正在编写一个脚本来更好地理解d3.js，最新一期是创建一个外壳来包围节点组，并在形成外壳的路径上插入一个标签来标识它

代码生成节点，周围的外壳很好-外壳是一个SVG路径，因此我应该能够添加一个文本元素和一个映射到路径的textpath

做一些黑客，我可以让文本有时出现，但写它'正确'没有显示。生成的svg代码是：

<g id="hull_elements">
<text>
    <textPath stroke="black" xlink:href="#Secure">Secure</textPath>
</text>
<text>
    <textPath stroke="black" xlink:href="#DMZ">DMZ</textPath>
</text>
<path class="boundary" id="Secure" d="M24.994993112707032,141.1110721988244L207.12813092409354,138.58243426955073L238.50323679510393,118.21543431124748L24.97785884420025,103.5985025585574Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>

<path class="boundary" id="DMZ" d="M88.15998924466983,242.42648560274165L208.29914853798698,349.28995851784157L189.37253440909416,316.73364831006586L117.42121587510853,219.36649184836727Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>
</g>

我相信这是有效的-我可以轻松地将文本元素移动到路径上方或下方，但文本仍然不会显示

小提琴在，文本路径部分在第382行附近

有人能指出这有什么问题吗？奇怪的是，我实际上在第370行附近看到了JSFIDLE，在d3中它被错误地实现了，但实际上它显示了文本

---

谢谢

您已经在文本顶部绘制了路径，因此它覆盖了文本。如果你想看文本

把它画在小路的顶端

function tick() {
  hullvis.selectAll("path")
        .data(groups)
        .attr("d", groupPath)
        .enter().insert("path", "realnode")
        .style("fill", "lightsteelblue")
        .style("stroke", "lightsteelblue")
        .style("stroke-width", 40)
        .style("stroke-linejoin", "round")
        .attr("class", "boundary")
        .attr("id", function (d) {return d.key;});

    //redraw the hull
    hullvis.selectAll("text")
        .data(groups)
        .enter().append("text").append("textPath")
        .attr("stroke","black")
        .attr("xlink:href", function (d) {return "#" + d.key;})
        .text(function (d) { return d.key;} );

或

---

b通过将路径作为标记或可见性的子对象来隐藏路径：如果需要，则隐藏路径。

这正是问题所在。实际上，我将路径放在一个svg:g中，将text/textpath放在另一个svg:g中，以便稍后控制分层。现在开始工作…下一项工作，了解如何在形状持续改变的情况下，将文本大致保持在形状上的一个位置。。。