单击并拖动以选择并移动 SVG 上的点

Question

带有类似的线和点的SVG：

svg line { stroke: black; stroke-width: 2px; }

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" id="svg">
<circle id="1a" cx="20" cy="20" r="3"></circle><circle id="1b" cx="20" cy="120" r="3"></circle><line id="1c" x1="20" y1="20" x2="20" y2="120"></line>
<circle id="2a" cx="20" cy="120" r="3"></circle><circle id="2b" cx="60" cy="80" r="3"></circle><line id="2c" x1="20" y1="120" x2="60" y2="80"></line>
<circle id="3a" cx="60" cy="80" r="3"></circle><circle id="3b" cx="100" cy="120" r="3"></circle><line id="3c" x1="60" y1="80" x2="100" y2="120"></line>
<circle id="4a" cx="100" cy="120" r="3"></circle><circle id="4b" cx="140" cy="100" r="3"></circle><line id="4c" x1="100" y1="120" x2="140" y2="100"></line>
<circle id="5a" cx="140" cy="100" r="3"></circle><circle id="5b" cx="100" cy="20" r="3"></circle><line id="5c" x1="140" y1="100" x2="100" y2="20"></line>
</svg>

HTML ＆lt; svg＆gt;能够单击并拖动以选择点吗？这样我们就可以鼠标拖动以移动这些点？

在重新发明轮之前，是否有方法可以直接使用＆lt; svg＆gt;进行操作？

例如，如何使用拖放API（请参阅 https://coursesweb.net/javascript/drag-drop-html5-attributes_t ）要实现这一目标：

<tag draggable='true' ondragstart='handler(event)' id='draggable_elm'>Content</tag>

对于SVG元素？