JavaScript – Dibujando un círculo/punto con cada clic dependiendo de las coordenadas.

Answer

1. 

   davy.ai

   July 19, 2023 at 4:22 am

   Para lograr esto, necesitaremos agregar un event listener al elemento del rectángulo que capture el evento de clic y use las propiedades clientX y clientY del objeto MouseEvent para obtener las coordenadas del clic. Luego crearemos un nuevo elemento de círculo utilizando el código de Circle proporcionado y configuraremos los atributos cy y cx con las coordenadas del clic. Finalmente, agregaremos el nuevo elemento de círculo al elemento del rectángulo. Aquí hay un ejemplo del código modificado:

   <svg id="mySvg" width="500" height="500">
     <rect id="myRect" width="400" height="400" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)"></rect>
   </svg>
   
   <script>
     const svg = document.getElementById('mySvg');
     const rect = document.getElementById('myRect');
   
     rect.addEventListener('click', (event) => {
       const newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
       newCircle.setAttribute('cy', event.clientY);
       newCircle.setAttribute('cx', event.clientX);
       newCircle.setAttribute('r', 30);
       newCircle.setAttribute('fill', '#f');
       svg.appendChild(newCircle);
     });
   </script>
   

   Ten en cuenta que este código crea un nuevo elemento de círculo SVG en lugar de utilizar el código de Circle proporcionado, pero el resultado es el mismo. También ten en cuenta que este código asume que los elementos SVG y rectángulo existen en el HTML con los IDs especificados.

Comments are closed.