0
362
Views¿Cómo dibujar un elemento SVG en el centro del clic?
El usuario hace un clic y luego obtiene las coordenadas (x, y) . Intento dibujar el globo svg en lugar de hacer clic:
El globo tiene código:
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" style="enable-background:new 0 0 88 88;" xml:space="preserve"> <style type="text/css"> .st0{fill:none;} .st1{fill:#007dbb;} </style> <g id="marker2"> <g> <g> <path class="st0" d="M74.8,84.5c-20.1,0-39.9,0-59.7,0c0-27.1,0-54.2,0-81.4c19.9,0,39.8,0,59.7,0C74.8,30.2,74.8,57.3,74.8,84.5 z"/> </g> <g> <g> <path class="st1" d="M68,31.3c0,11.2-7.6,20.7-17.8,23.5c-2,0.5-4.9,2.2-6.2,8.3c-1.6-6-4.3-7.8-6.3-8.3 C27.5,51.9,20,42.5,20,31.3C20,17.9,30.7,7,44,7C57.3,7,68,17.9,68,31.3z"/> <path class="st1" d="M44,67c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2.7-6-6S40.7,67,44,67z"/> </g> </g> </g> </g> <g id="Layer_1_1_"> </g> </svg>Es una imagen SVG.
Primero, ¿cómo establecer el ancho, la altura de este globo y cómo llegar al punto del globo en el centro del clic (resaltado en rojo)?
Traté de establecer el ancho y la altura de esta manera:
let group = document.getElementById('marker2'); group.setAttribute("width", '30px'); group.setAttribute("height", '30px');Pero ahora funciona, cuando he tratado de encontrar un centro de círculo:
<path class="st1" d="M44,67c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2.7-6-6S40.7,67,44,67z"/>¿Podría explicarme cómo colocar ballooin en el centro del clic?
Mi idea es obtener la bandeja de salida rectangular de id="marker2" y luego encontrar el centro:
let rectSmallCircle = getRect('st1'); let box = getRect('marker2'); let height = box.height; let centerWidth = box.width / 2; let startPositionX = centerWidth; let startPositionY = height - rectSmallCircle.height / 2;
·
Juan Pablo Isaza
1 answers
Answer question0
Juega con las posiciones
const svg = `<svg viewBox="0 0 88 88"><style>.st0{fill:none;}.st1{fill:#007dbb;}</style><g id="marker2"><path class="st0" d="M74.8,84.5c-20.1,0-39.9,0-59.7,0c0-27.1,0-54.2,0-81.4c19.9,0,39.8,0,59.7,0C74.8,30.2,74.8,57.3,74.8,84.5 z"/><path class="st1" d="M68,31.3c0,11.2-7.6,20.7-17.8,23.5c-2,0.5-4.9,2.2-6.2,8.3c-1.6-6-4.3-7.8-6.3-8.3 C27.5,51.9,20,42.5,20,31.3C20,17.9,30.7,7,44,7C57.3,7,68,17.9,68,31.3z"/><path class="st1" d="M44,67c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2.7-6-6S40.7,67,44,67z"/></g></svg>` const container = document.getElementById("svgContainer"); document.getElementById("lnk").addEventListener("click", function(e) { e.preventDefault(); container.innerHTML = svg; const dot = document.querySelectorAll(".st1")[1] dot.setAttribute('style', 'fill: green'); const bbox = dot.getBBox(); const center = [bbox.x / 2 + bbox.height / 2, bbox.y / 2 + bbox.width / 2] const clickX = e.clientX, clickY = e.clientY; document.getElementById("output").innerHTML = `${clickX},${clickY} - ${center}` container.style.top = (clickX-100-center[0]+88)+"px" container.style.left = (clickY-100-88)+"px" }) #svgContainer { height: 200px; position:absolute; } svg { height: 200px } <h1>Test svg</h1> <p id="output"></p> <p><br/></p> <p><br/></p> <div id="svgContainer"></div> <p>Click the <a id="lnk" href="#">Link</a></p>
·
Juan Pablo Isaza
Report
Answer question