집 > 기사 > 웹 프론트엔드 > textPath를 사용하여 JS의 줄에 텍스트를 구현하는 방법에 대한 튜토리얼

textPath를 사용하여 JS의 줄에 텍스트를 구현하는 방법에 대한 튜토리얼

小云云원래의: 2018-05-15 11:09:131986검색

이 기사에서는 JS에서 텍스트를 선으로 구현하기 위해 textPath를 사용하는 방법에 대한 튜토리얼을 주로 공유합니다. 최근 프로젝트에서는 관계 다이어그램을 구현하려면 선에 텍스트를 그려야 합니다. 이 기능을 구현하려면 SVG의 연결된 선을 레이블 선에서 경로로 변경해야 다음과 유사한 효과를 얻을 수 있습니다.

간단한 예는 다음과 같습니다.

<svg viewBox="0 0 1000 300" 
   xmlns="http://www.w3.org/2000/svg"  
   xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <path id="MyPath" 
     d="M 100 200  
       C 200 100 300  0 400 100 
       C 500 200 600 300 700 200 
       C 800 100 900 100 900 100" fill="none" stroke="red"/> 
 <text font-family="Verdana" font-size="42.5"> 
  <textPath xlink:href="#MyPath" rel="external nofollow" > 
   We go up, then we go down, then up again 
  </textPath> 
 </text> 
</svg>

경로를 구현한 다음 해당 ID 속성을 설정해야 합니다. 그런 다음 textPath 태그를 생성하고 이를 위의 ID 속성에 연결하여 경로에 텍스트를 연결할 수 있습니다.

D3에서는 다음을 수행할 수 있습니다.

var link = svg.append("g").selectAll(".edgepath") 
       .data(graph.links) 
       .enter() 
       .append("path") 
       .style("stroke-width",0.5) 
       .style("fill","none") 
       .attr("marker-end",function(d){ 
        return "url(#"+d.source+")"; 
       }) 
       .style("stroke","black") 
       .attr("id", function(d,i){ 
        return "edgepath"+i; 
       }); 
var edges_text = svg.append("g").selectAll(".edgelabel") 
        .data(graph.nodes) 
          .enter() 
          .append("text") 
          .attr("class","edgelabel") 
          .attr("id", function(d,i){ 
           return "edgepath"+i; 
          }) 
          .attr("dx",80) 
          .attr("dy",0); 
edges_text.append("textPath") 
      .attr("xlink:href", function(d,i){ 
        return "#edgepath"+i; 
      }).text(function(d){ 
       return d.id; 
      })

사실 이 코드는 위 예제를 구현한 것이므로 지루한 SVG 코드 작성을 피할 수 있습니다.

textPath를 사용하여 JS의 줄에 텍스트를 구현하는 방법에 대한 튜토리얼

관련 기사