CODEWITHSUNDEEP
javascripthtmlsvgdrag-and-drophtml5-draggable
Basj
Basj

Reputation: 46313

Click and drag to select and move points on a SVG

With a SVG with lines and points like this:

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>

is there a way with a HTML <svg> to be able to click and drag to select points? So that we can then mouse drag to move these points?

Before re-inventing the wheel, are there ways to do this directly with a <svg>?

enter image description here

For example, how to use the Drag and Drop API (see https://coursesweb.net/javascript/drag-drop-html5-attributes_t) to achieve this:

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

for SVG elements?

Upvotes: 1

Views: 946

Answers (0)

Related Questions