Menu
I have an HTML symbol
<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> which I want to use as the cursor. I'm familiar with changing the cursor via JQuery like this:
body.css('cursor', `wait`); But how can I do this for a <symbol> element?
217
To change how the mouse pointer looks , and then clicking Control Panel. In the search box, type mouse, and then click Mouse. Click the Pointers tab, and then do one of the following: To give all of your pointers a new look, click the Scheme drop-down list, and then click a new mouse pointer scheme.
To change the mouse cursor when you hover over a specific element, you need to assign the cursor CSS property to your HTML element. You will see the cursor changes when you hover over the <h1> element above. It's as if you're hovering over a <button> element.
You can set two <svg> elements one to define your SVG symbol and the other to hold the element. Then with Javascript, you can set an event listener and change the position of the whole <svg> (the one holding your element) when the user's cursor moves. Also, I have hidden the default browser cursor with the CSS property cursor: none. Here's a working code:
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>You will have to tweak the values in newTransformRule to center your custom cursor with the default cursor. Remove the CSS rule to do the adjustment.
The code is working on Firefox, Chrome and Edge.
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
