Set cursor to be <symbol> element

Question

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?

Answer 1

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.