Cómo mover figuras SVG con el mouse: HTML5 y javascript

Las formas que podemos hacer con SVG son rectángulos, círculos, líneas, elipses entre otras más, también se pueden incluir imágenes y texto.

Veamos una forma de como dibujar un rectángulo y como hacer que se mueva usando las coordenadas del mouse.

<div id="Contenido">
    <svg width="800" height="580">
 <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
 style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
    </svg>
</div>

Los atributos de rect que podemos utilizar para darle movimiento son x e y, ya que rx y ry son para hacer el borde del rectángulo. Ahora agregamos un id a la forma rect para que con javascript podamos cambiar sus coordenadas, también agregaremos un evento onclick al elemento svg que llame a una función javascript que será la que cambie las coordenadas.

<svg width="100%" height="580" onmousemove="dragRect(event)" id="lienzo" onclick="drawRect(event)">
    <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
    style="fill:red;stroke:black;stroke-width:5;opacity:0.5" id="rect"/>
    <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
    style="fill:blue;stroke:black;stroke-width:5;opacity:0.5" id="rect2"/>
</svg>

La función de javascript queda de la siguiente forma.

1 2 3 4 5 6 7

var rectangle = document.getElementById("rect"); function drawRect(event){ var x = event.clientX; var y = event.clientY; rectangle.setAttribute('x', x); rectangle.setAttribute('y', y); }

Con la función anterior, al hacer click dentro del área de svg se dibujará un rectángulo pero cambiará de posición al hacer click de nuevo dentro del svg.

Por último agregaremos una función más para que un rectángulo se mueva al pasar sobre el área del svg utilizando onmousemove.

function dragRect(event) {
  var x = event.clientX;
  var y = event.clientY;
  rectangle.setAttribute('x', x - 8);
  rectangle.setAttribute('y', y - 8);
}

Ejemplo completo

See the Pen move rect SVG by Jesus Tepec (@JesusTepec) on CodePen.