javascript - imagen - Establecer el cursor para que sea el elemento<symbol>
imagen de cursor (2)
La respuesta de @Ivan es buena, pero, de esta manera, funcionará mejor.
Acabo de hacer algunos cambios
document.addEventListener(''mousemove'', function(e) {
let newTransformRule = ''translate('' + (e.pageX - 380) + ''px, '' + (e.pageY - 60) + ''px)'';
document.querySelector(''#arrowCanvas'').style.transform = newTransformRule;
});
body {
cursor: none;
}
#arrowCanvas {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
<svg id="arrowContainer">
<symbol id="arrow" viewBox="0 0 8.4666659 8.4666659">
<g transform="translate(0,-288.53334)">
<path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path>
<path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path>
</g>
</symbol>
</svg>
<svg id="arrowCanvas" width="100" height="60">
<use href="#arrow" width="100" height="50"/>
</svg>
Tengo un símbolo HTML
<symbol id="arrow" viewBox="0 0 8.4666659 8.4666659">
<g transform="translate(0,-288.53334)">
<path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path>
<path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path>
</g>
</symbol>
que quiero usar como cursor Estoy familiarizado con cambiar el cursor a través de JQuery de esta manera:
body.css(''cursor'', `wait`);
Pero, ¿cómo puedo hacer esto para un elemento <symbol> ?
Puede establecer dos elementos <svg> uno para definir su símbolo SVG y el otro para mantener el elemento. Luego, con Javascript, puede establecer un detector de eventos y cambiar la posición de todo el <svg> (el que contiene su elemento) cuando se mueve el cursor del usuario. Además, he ocultado el cursor del navegador predeterminado con el cursor: none propiedad CSS cursor: none . Aquí hay un código de trabajo:
document.addEventListener(''mousemove'', function(e) {
let newTransformRule = ''translate('' + (e.pageX - 360) + ''px, '' + (e.pageY - 115) + ''px)'';
document.querySelector(''#arrowCanvas'').style.transform = newTransformRule;
});
body {
cursor: none;
}
<svg>
<symbol id="arrow" viewBox="0 0 8.4666659 8.4666659">
<g transform="translate(0,-288.53334)">
<path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path>
<path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path>
</g>
</symbol>
</svg>
<svg id="arrowCanvas" width="100" height="60">
<use href="#arrow" width="100" height="50"/>
</svg>
Tendrá que ajustar los valores en newTransformRule para centrar su cursor personalizado con el cursor predeterminado. Elimine la regla CSS para hacer el ajuste.
El código está funcionando en Firefox, Chrome y Edge.