how to append text to svg path via javascript(svg.js)

Question

Hey I have some svg elements which are open paths and I want to add to them some labels. Now my original code was in canvas and I am looking for a techinuqe similiar to canvas(fillText) where you can add text label to your svg elements.

I am adding the code, I am using the library svg.js for svg capabilities. Please take a closer look at ticklines method, a method which was writing in canvas and now I am trying to convert it to svg. This my final result which I want to achieve:

Update:

I have put some changes to the code and now my labels appears but some of them are up side down. How can I fix it? I want this to be like in the picture.

 $(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

The following answer to this question was found after chatting with op:

To create a text in svg.js and move it to a specific position you use:

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

When myText is not a string make sure to convert it before passing it to the function eg myText + ""

So for the code above the following would do it:

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

Also note, that it is not possible, to append text to a path in a way like you write text at a position where your "pen" is at that moment. However aligning text at a path is ofc possible.