Nuevo en Js, estoy creando una guía de pronunciación interactiva a través de un svg en línea.
Puedes verlo aquí: https://codepen.io/r-pg/pen/OJgoXWQ
Actualmente estoy tratando de agregar información sobre herramientas de estilo básico que mostrará una oración asociada. He vinculado sus coordenadas relativas a la posición del cursor.
El js que estoy usando para esto está aquí:
function tooldef() { let t1 = document.querySelector('text[data-tooltip]'); let t2 = document.querySelector('text:nth-of-type(2)'); t1.addEventListener('onmousemove', showToolTip(evt)); t2.addEventListener('onmousemove', showToolTip(evt)); } function showToolTip(evt) { let t = evt.currentTarget; let phrase = t.getAttribute('data-tooltip'); document.getElementById('tooltip').innerHTML = phrase; tooltip.style.display = "block"; tooltip.style.left = evt.offsetX + 0 + 'px'; tooltip.style.top = evt.offsetY + 0 + 'px'; /* console.log(tooltip);*/ console.log(evt.offsetX); console.log(evt.offsetY); } function hideToolTip(evt) { tooltip.style.display = "none"; }Esto funciona perfectamente bien cuando se carga a través de codepen o localmente, sin embargo, cuando aplico esto a Wordpress, empuja la información sobre herramientas hacia la derecha y no puedo identificar por qué. ¿Hay algún problema con el código o es un problema interno dentro de WP?
Su código para colocar la información sobre herramientas asume un par de cosas:
Si está incrustando el SVG dentro de otro contenido, entonces uno o ambos dejarán de ser ciertos.
Está adjuntando los eventos mousemove a los elementos SVG <text> . Entonces, las coordenadas devueltas en el evento estarán en el espacio de coordenadas SVG. Si el SVG se escala a cualquier tamaño que no sea 1070 x 900, las coordenadas de su evento no coincidirán con las coordenadas de la página.
Si siempre muestra el SVG a 1070 x 900, entonces su solución podría ser tan simple como simplemente obtener el desplazamiento de página del SVG, luego agregue esa posición X e Y a la posición devuelta en el evento.
Sin embargo, si está escalando el SVG, deberá convertir las coordenadas de las coordenadas SVG a las coordenadas de la página. Hay muchas otras preguntas aquí sobre ese tema. Por ejemplo, este: https://stackoverflow.com/a/48354404/1292848