이 기사에서는 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 코드 작성을 피할 수 있습니다.
관련 권장 사항:
SVG(확장 가능한 벡터 그래픽) 점선 관련 속성 및 선 애니메이션 원리: 움직이는 선
jQuery로 스크롤 라인 탐색 효과 구현 method_jquery
위 내용은 textPath를 사용하여 JS의 줄에 텍스트를 구현하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!