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>

"How to append text to svg path" - is that your real question? If so, you may take a look at TextPath: github.com/wout/svg.js#textpath. If not: I am sorry your question is not clear to me — Fuzzyma
– Fuzzyma, Commented Apr 28, 2016 at 20:28
this a real question, I have tried this textPath it doesn't play nicely,probably I am doind some thing wrong. I would glad for any help, I attach my code for a reason. I don't understand how to append labels. Please take a look in my code and try to understand it. — Brk
– Brk, Commented Apr 28, 2016 at 20:33
My problem is in ticklines function, I am trying to append a text to a path. — Brk
– Brk, Commented Apr 28, 2016 at 20:34
there is nothing like "labels" for paths in svg. You can only align a text at a path. And thats what textPath is doing. — Fuzzyma
– Fuzzyma, Commented Apr 28, 2016 at 20:42
so how I get the same result as in the picture which I have append lately? — Brk
– Brk, Commented Apr 28, 2016 at 20:44

Fuzzyma · Accepted Answer · 2016-05-02 09:46:08Z

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 e.g. 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.

answered May 2, 2016 at 9:46

Fuzzyma

8,6786 gold badges32 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related