SVG.js线路标记-mid

Question

我试着把标记-mid放在line元素上，我使用SVG.js。例如，我使用下面的代码：

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

现在，我如何使用marker mid将标记放在这行的中间？我读了svg.js的文档，还有这个“https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-mid#Examples”，他们说你也可以在代码行中使用svg.js-mid元素，我知道这个标记可以和path元素一起使用，但我需要在一行中使用它，你能帮我吗？谢谢你的帮助

Answer 1

你可以自己算出这条线的中点，然后在那里画一个圆。

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]);

Answer 2

marker-mid在线路上不起作用。为了拥有开始和结束标记，下面的代码可以做到这一点：

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) 
    })

但是，要在一行中间使用标记，请参阅p0wdr.com的答案