Me gustaría conectar dos puntos (círculos) con una línea:
window.onclick = () => { document.getElementById('c2').setAttribute("cx", 150); } <svg> <circle cx="10" cy="10" r="2" id="c1" /> <circle cx="90" cy="50" r="2" id="c2" /> <line x1="10" y1="10" x2="90" y2="50" stroke="black" /> </svg><br> Click here to move a circle. de modo que si modifico el centro de cualquier <circle> con setAttribute("cx", 150) , la línea sigue automáticamente la nueva posición del círculo .
¿Hay alguna manera de hacer esto con <use> ? Algo así como (pseudo-código):
<svg> <circle cx="10" cy="10" r="2" id="c1" /> <circle cx="90" cy="50" r="2" id="c2" /> <use x1=xlink:c1:cx y1=xlink:c1:cy x2=xlink:c2:cx y2=xlink:c2:cy stroke="black" type="line" /> </svg> Objetivo: no quiero tener que establecer las coordenadas dos veces, tanto en el circle como en la line . En cambio, me gustaría establecer las coordenadas una vez y que la line use una referencia a los elementos del circle .
Nota: He leído que SVG conecta dos puntos con una línea , pero no me ayudó.
Puede usar un<marker> que se puede colocar al principio, en el medio y al final de un elemento.
window.onclick = () => { document.getElementById('l1').setAttribute("x2", 150); } <svg viewBox="0 0 200 100" width="200"> <defs> <marker id="circle" viewBox="0 0 4 4" refX="2" refY="2" markerWidth="4" markerHeight="4"> <circle cx="2" cy="2" r="2" /> </marker> </defs> <line id="l1" x1="10" y1="10" x2="90" y2="50" stroke="black" marker-start="url(#circle)" marker-end="url(#circle)"/> </svg><br> Click here to move a circle.