javascript（svg.js）を介してsvgパスにテキストを追加する方法

Question

ちょっと開いたパスであるいくつかのsvg要素があり、それらにいくつかのラベルを追加したいと思います。 私の元のコードはキャンバスにありました。キャンバス（fillText）に類似したtechinuqeを探しています。ここであなたのsvg要素にテキストラベルを追加できます。

私はコードを追加しています。私はsvg機能のためにライブラリsvg.jsを使用しています。 のティックラインの方法を詳しく見てください。キャンバスで書いていたメソッドですが、今はそれをsvgに変換しようとしています。 この私が達成したい私の最終的な結果：

アップデート：私はいくつかのコードを変更し、今、私のラベルを入れている

が表示されますが、それらのいくつかは、ダウン側を上にしています。 どうすれば修正できますか？私はこれを写真のようにしたい。

$(function(){ 
 
    var draw = SVG('drawing').size(1024, 1020); 
 
    
 
    // Define all your triangle points 
 
    var v0={x:58,y:845}; 
 
    var v1={x:984,y:845}; 
 
    var v2={x:521,y:41}; 
 
    var triangle=[v0,v1,v2]; 
 

 
    // Define all your segments here 
 
    var segments=[ 
 
     { 
 
     points:[{x:58,y:845},{x:272,y:845},{x:567,y:333},{x:461,y:150}], 
 
     fill:'rgb(172,236,222)', 
 
     label:{text:'D1',cx:300,cy:645,withLine:false,endX:null,endY:null}, 
 
     }, 
 
     { 
 
     points:[{x:272,y:845},{x:567,y:333},{x:646,y:468},{x:572,y:597},{x:716,y:845}], 
 
     fill:'deepskyblue', 
 
     label:{text:'D2',cx:490,cy:645,withLine:false,endX:null,endY:null}, 
 
     }, 
 
     { 
 
     points:[{x:716,y:845},{x:845,y:845},{x:683,y:565},{x:734,y:476},{x:503,y:76},{x:461,y:150},{x:646,y:468},{x:572,y:595}], 
 
     fill:'lightCyan', 
 
     label:{text:'DT',cx:656,cy:645,withLine:false,endX:366,endY:120}, 
 
     }, 
 
     { //here - I am in hell.-s5 
 
     points:[{x:530,y:59},{x:512,y:59},{x:521,y:41}], 
 
     fill:'black', 
 
     label:{text:'PD',cx:600,cy:52,withLine:true,endX:520,endY:70}, 
 
     }, 
 
     { 
 
     points:[{x:595,y:235},{x:614,y:203},{x:530,y:59},{x:512,y:59},{x:503,y:76}], 
 
     fill:'navajoWhite', 
 
     label:{text:'T1',cx:670,cy:140,withLine:true,endX:574,endY:105}, 
 
     }, 
 
     { 
 
     points:[{x:753,y:446},{x:735,y:476},{x:595,y:235},{x:614,y:203}], 
 
     fill:'tan', 
 
     label:{text:'T2',cx:800,cy:290,withLine:true,endX:662,endY:120}, 
 
     }, 
 
     { 
 
     points:[{x:845,y:845},{x:683,y:565},{x:753,y:446},{x:984,y:845}], 
 
     fill:'peru', 
 
     label:{text:'T3',cx:800,cy:645,withLine:false,endX:null,endY:null}, 
 
     }, 
 
    ]; 
 

 
     // label styles 
 
     var labelfontsize=12; 
 
     var labelfontface='verdana'; 
 
     var labelpadding=3; 
 
    
 
     var arrowheadLength=10; 
 
     var arrowheadWidth=8; 
 
     //var arrowhead=document.createElement('canvas'); 
 
    // premakeArrowhead(); 
 
    
 
    for(var i=0;i<segments.length;i++){ 
 
     drawSegment(segments[i]); 
 
    } 
 
    // draw ticklines 
 
    ticklines(v0,v1,9,Math.PI*1.2,20,true); 
 
    ticklines(v1,v2,9,Math.PI*3/4,20,true); 
 
    ticklines(v2,v0,9,Math.PI*2,20,false); 
 
    // draw molecules 
 
    //moleculeLabel(v0,v1,100,Math.PI/2,'% CH4'); 
 
    //moleculeLabel(v1,v2,100,0,'% C2H4'); 
 
    //moleculeLabel(v2,v0,100,Math.PI,'% C2H2'); 
 
    // draw outer triangle 
 
    drawTriangle(triangle); 
 
    // draw legend 
 
    //drawLegend(legendTexts,10,10,12.86); 
 
    
 
    function drawTriangle(t){ 
 
     var triangle = draw.path('M '+ t[0].x +' '+ t[0].y+ ' L '+ t[1].x +' '+ t[1].y+ ' '+ t[2].x +' '+ t[2].y+' Z') 
 
     .attr({ fill: "transparent" ,stroke: "black" , "stroke-width": "2"}); 
 
    } 
 
    
 
function drawSegment(s){ 
 
    // draw and fill the segment path 
 
    var str = 'M '+ s.points[0].x +' '+ s.points[0].y; 
 
    for(var i=1;i<s.points.length;i++){ 
 
     str = str.concat(' L '+ s.points[i].x +' '+ s.points[i].y); 
 
    } 
 
    str = str.concat(' Z'); 
 
    draw.path(str).attr({ fill: s.fill ,stroke: "black" , "stroke-width": "2"}); 
 
    // draw segment's box label 
 
// if(s.label.withLine){ 
 
//  lineBoxedLabel(s,labelfontsize,labelfontface,labelpadding); 
 
// }else{ 
 
//  boxedLabel(s,labelfontsize,labelfontface,labelpadding); 
 
// } 
 
} 
 
function ticklines(start,end,count,angle,length,isReversed){ 
 
    var dx=end.x-start.x; 
 
    var dy=end.y-start.y; 
 
// ctx.lineWidth=1; 
 
    for(var i=1;i<count;i++){ 
 
    var x0=parseInt(start.x+dx*i/count); 
 
    var y0=parseInt(start.y+dy*i/count); 
 
    var x1=parseInt(x0+length*Math.cos(angle)); 
 
    var y1=parseInt(y0+length*Math.sin(angle)); 
 
    draw.path('M '+ x0 +' '+ y0+' L '+ x1 +' '+ y1).attr({stroke: "black" , "stroke-width": "1"}); 
 
    if(i==2 || i==4 || i==6 || i==8){ 
 
     var labelOffset=length; 
 
     var x1=parseInt(x0-labelOffset*Math.cos(angle)); 
 
     var y1=parseInt(y0-labelOffset*Math.sin(angle)); 
 
     
 
     var text = draw.text(function(add) { 
 
      add.tspan(parseInt(i*10)) 
 
      }).path(' M '+ x1 +' '+ y1 +' L '+ x0 +' '+ y0); 
 
     
 
/*  if(!isReversed){ 
 
     var text = draw.text(function(add) { 
 
      add.tspan(parseInt(i*10)) 
 
      }).path(' M '+ x1 +' '+ y1 +' L '+ x0 +' '+ y0); 
 
     }else{ 
 
      var text = draw.text(function(add) { 
 
      add.tspan(parseInt(i*10)) 
 
      }).path(' M '+ x1 +' '+ y1 +' L '+ x01 +' '+ y01); 
 
     }*/ 
 
    } 
 
    } 
 

 
} 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.0/svg.js"></script> 
 
<div id="drawing"> 
 
</div>

Answer 1

この質問に次のような答えはOPとおしゃべり後に発見されました：svg.js内のテキストを作成し、使用する特定の位置に移動するには

：

draw.text(myText).move(100, 200) 

myTextが文字列でない場合は、関数に渡す前に変換してください。以下上記のコードは、それを行うだろうためmyText + ""

ので：

draw.text(parseInt(i*10) + "").move(x1, y1) 

また、あなたがあなたの位置にテキストを書き込むような方法でパスにテキストを追加するために、それは可能ではないことに注意"ペン"はその瞬間です。 しかし、パスにテキストを配置することは可能です。