Question

我试图将marker-mid放在线元素上，即时使用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” 他们说你可以使用标记中间元素和线，我知道这个标记与路径元素一起使用，但是我需要用它来使用它，你能帮我吗？谢谢你的帮助

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的回答

SVG.js行标记 - 中

2 个答案: