svg画线

参考： https://segmentfault.com/a/1190000009556665

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1802.4140625 1159.5" style="width: 1802.41px; height: 1159.5px;">
    <defs>
        <marker id="drag_arrow" refX="5" refY="2.5" markerWidth="5" markerHeight="5" orient="auto" markerUnits="strokeWidth" class="drag_fill"><polyline points="0,0 5,2.5 0,5 0.2,2.5"/></marker>
    </defs>
</svg>

var svg = document.querySelector('svg');
// 创建g标签，记录线的开始结束位置
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttribute("data-arc-target", arc.target);
g.setAttribute("data-arc-origin", arc.origin);
svg.append(g);

// path
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("stroke", "black");
path.setAttribute("marker-end", 'url(#drag_arrow)'); // 箭头
path.setAttribute('d', `M 开始x,开始y Q 曲度x,曲度y, 结束x,结束y`);
g.append(path);

// 线上文字的背景
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
rect.setAttribute("fill", "#fff");
rect.onmouseover = LineHover;
rect.onmouseout = LineHover;
g.append(rect);

// 线上文字
var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
label.setAttribute("fill", "#000"); 
label.setAttribute("x", x);
label.setAttribute("y", y);
label.textContent = 'name';
g.append(label); 

// 背景padding 5
var pos = label.getBoundingClientRect();
rect.setAttribute("x", pos.x - 5);
rect.setAttribute("y", pos.y - svgTop - 5);
rect.setAttribute("width", pos.width + 10);
rect.setAttribute("height", pos.height + 10);