Actualmente estoy trabajando en un sitio web con un cursor personalizado. (Un div encadenado a la posición del mouse).

Sé que quiero implementar un archivo SVG en este proyecto, pero no puedo mover el cursor personalizado sobre el SVG.

¿Qué está pasando y cómo puedo solucionarlo?

 const cursor = document.querySelector(".cursor"); window.addEventListener('mousemove', function(e){ cursor.style.top = ey + "px"; cursor.style.left = ex + "px"; });

 * { cursor: none; } .cursor { position: fixed; z-index: 10; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: black; transform: translate(-50%, -50%); pointer-events: none; } #testObject { position: absolute; width: 300px; height: 300px; }

 <div class="cursor"></div> I can't hover over the object below. (The cursor get's stuck on the edge.)<br><br> <object data="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/SVG_example_markup_grid.svg/2560px-SVG_example_markup_grid.svg.png" type="image/svg+xml" id="testObject"></object>

JSFiddle: aquí

Nota: Como puede ver en mi fragmento de código, estoy usando <object> para implementar el SVG. Sé que usar <img> resolvería mi problema, pero tengo que usar <object> , porque tengo un script que llega al interior del archivo SVG y luego agrega un EventListener('mouseenter') a una forma con un específico identificación. – Hasta donde yo sé, eso solo es posible con <object> , así que tengo que encontrar una solución que funcione con <object> .

Actualizar: