SVG 텍스트 경로 : 텍스트가 브라우저에 표시되지 않습니다.

Question

누군가 내가 작성한 svg 요소의 유효성을 검사하고 왜 텍스트가 표시되지 않는지 설명 할 수 있습니까?

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

텍스트 상단에 경로를 그려서 덮습니다. 텍스트를 보려면 중 하나

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> 태그의 자식으로하여 숨겨진 경로를 만들거나 가시성 : 필요한 경우 숨김.