2

im trying to put the marker-mid on the line element, im using SVG.js. For example im using this code:

var draw = SVG('yourdivid');
var line = draw.line( 100, 100, 0, 0).move(20, 20); 
line.stroke({ color: '#000', width: 2};

now how can i put the marker at the mid of this line using the marker-mid? i read the doc of svg.js and also this" https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-mid#Examples" they say that you can use the marker-mid element also with the line, i know that this marker works with the path element, but i need to use it with a line, can you help me please? thank you for your help

omar
  • 21
  • 2
  • 2
    There's no mid there, a line has a beginning and an end only – Robert Longson May 11 '17 at 16:02
  • 1
    "mid" refers to the middle points of a multi-segment path. Ie. the second to the second-to-last points. Since a `` has only a start and an end point, there are no mid points to place markers on. – Paul LeBeau May 11 '17 at 16:49
  • thank you for your answer, so how can i solve this problem? coz im using svg.draw.js to draw the line and then i need a mid-marker on it, there are any other way to make it? – omar May 15 '17 at 13:07

2 Answers2

1

You could just work out the mid point of the line yourself and draw a circle at that point.

var start = [100, 100];
var end = [0, 0];

function midPoint(start, end) {
    return [
          (start[0] + end[0]) / 2,
          (start[1] + end[1]) / 2
    ];
}

var lineGroup = svg.group();
lineGroup.line(start[0][0], start[0][1], end[0][0], end[0][1]);

var dot = lineGroup.circle(3);
var mid = midPoint(start, end);
dot.cx(mid[0]);
dot.cy(mid[1]);
p0wdr.com
  • 307
  • 2
  • 4
1

marker-mid does not work on lines. To have start and end markers, this code would do it:

var draw = SVG('yourdivid');

draw.line( 100, 100, 0, 0)
    .move(20, 20)
    .stroke({ color: '#000', width: 2})
    .marker('start', 10, 10, function(add){
        add.circle(10).center(5,5) 
    })

However, to have markers at the mid of a line see p0wdr.com's answer

Fuzzyma
  • 7,619
  • 6
  • 28
  • 60
  • As wrote @Paul LeBeau in the above comment; '"mid" refers to the middle points of a multi-segment path ... Since a has only a start and an end point, there are no mid points to place markers on' – Davide Feb 11 '19 at 12:00