Question

有人可以验证我创建的svg元素并解释为什么文本没有显示？

作为一个背景故事，我有一个脚本，我正在努力更好地理解d3.js，最新的问题是创建一个包围节点组的船体，并在形成船体的路径上插入一个标签来识别它。

代码生成节点，周围的船体很好 - 船体是一个SVG路径，所以我应该能够添加一个文本元素和一个映射到路径的文本路径。

做一些黑客攻击，我可以让文字有时出现但是'正确'写出来没有显示任何东西。生成的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>

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

小提琴位于http://jsfiddle.net/zuzzy/hWd7K/1/，文字路径部分位于第382行

有谁能说明这有什么问题？奇怪的是，我实际上得到了一些工作（例如，参见第370行的jsfiddle http://jsfiddle.net/zuzzy/cxnT8/，其中d3实现错误，但它实际上显示了文本）

谢谢！

Answer 1

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

a）在路径上绘制

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）通过将路径设为<defs>标记或可见性的子项来隐藏路径：必要时隐藏。

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

1 个答案: