将光标设置为<symbol>元素

我有一个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> 

我想用作光标。 我熟悉如下通过JQuery更改光标:

 body.css('cursor', `wait`); 

但是我怎样才能做到这一点<symbol>元素?

您可以设置两个<svg>元素来定义您的SVG符号,另一个元素用于保存元素。 然后用Javascript,你可以设置一个事件监听器,当用户的光标移动时,改变整个<svg> (持有你的元素的那个)的位置。 另外,我隐藏了CSS属性cursor: none的默认浏览器光标。 这是一个工作代码:

 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> 

@伊万答案是好的,但是,这样会更好。

我只是做了一些改变

 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>