0
274
VistasHaga clic y arrastre para seleccionar y mover puntos en un SVG
Con un SVG con líneas y puntos como este:
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> ¿Hay alguna manera con un HTML <svg> para poder hacer clic y arrastrar para seleccionar puntos? ¿Para que luego podamos arrastrar el mouse para mover estos puntos?
Antes de reinventar la rueda, ¿hay formas de hacerlo directamente con un <svg> ?
Por ejemplo, cómo usar la API de arrastrar y soltar (ver https://coursesweb.net/javascript/drag-drop-html5-attributes_t ) para lograr esto:
<tag draggable='true' ondragstart='handler(event)' id='draggable_elm'>Content</tag>para elementos SVG?
·
Juan Pablo Isaza
Responde la pregunta