ホームページ > 記事 > ウェブフロントエンド > textPath を使用して JS の行にテキストを実装する方法のチュートリアル

textPath を使用して JS の行にテキストを実装する方法のチュートリアル

小云云オリジナル: 2018-05-15 11:09:132019ブラウズ

この記事では主に、textPath を使用して JS で行上のテキストを実現する方法についてのチュートリアルを共有します。最近のプロジェクトでは、関係図を実装するには、テキストを行上に描画する必要があります。この関数を実装するには、次のような効果を実現できるように、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 の行にテキストを実装する方法のチュートリアル

関連記事