SVG textpath: текст не отображается в браузере

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/ и textpath часть вокруг линии 382

Можно ли предположить, что не так с этим? Нечетное время у меня на самом деле что-то работает (например, см. Jsfiddle http://jsfiddle.net/zuzzy/cxnT8/ вокруг строки 370, где она реализована неправильно, поскольку d3 идет, но на самом деле отображается текст)

Спасибо!

Answer 1

Вы нарисовали путь поверх текста, чтобы он его закрыл. Если вы хотите, чтобы увидеть текст либо

а) нарисовать его на верхней части пути

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

или

б) сделать путь, скрытый, делая это как ребенок из <defs> тега или видимость: при необходимости скрывается.