title: how to append text to svg path via javascript(svg.js)
body: <p>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.</p>
  
  <p>I am adding the code, I am using the library svg.js for svg capabilities.
  Please take a closer look at <strong>ticklines</strong> 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:</p>
  
  <p><a href="https://i.stack.imgur.com/LVrkt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LVrkt.png" alt="enter image description here"></a></p>
  
  <p><strong>Update:</strong></p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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&lt;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&lt;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&lt;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 );
          }*/
      }
    }
  
  }
      
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.0/svg.js"&gt;&lt;/script&gt;
  &lt;div id="drawing"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>