Javascript 将光标设置为<；符号>；要素

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

但是如何对

元素执行此操作？

您可以设置两个

元素，一个用于定义SVG符号，另一个用于保存元素。然后使用Javascript，您可以设置一个事件侦听器，并在用户光标移动时更改整个

（保存元素的那一个）的位置。此外，我还使用CSS属性

cursor:none

隐藏了默认浏览器光标。下面是一个工作代码：

document.addEventListener（'mousemove'，函数（e）{
让newtransfermrule='translate（+'（e.pageX-360）+'px'，+（e.pageY-115）+'px'）；
document.querySelector（“#arrowCanvas”）.style.transform=newTransferMRule；
});
正文{
光标：无；
}
@Ivan的答案很好，但是，这样会更好

我只是做了一些改变


document.addEventListener（'mousemove'，函数（e）{
让newtransfermrule='translate（+'（e.pageX-380）+'px'，+（e.pageY-60）+'px'）；
document.querySelector（“#arrowCanvas”）.style.transform=newTransferMRule；
});
正文{
光标：无；
}
#箭头画布{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：-1；
}

相关CSS技巧文章：不幸的是，他们使用SVG（尽管是CSS/base64编码的SVG）的演示在我的Chrome for macOS上不起作用。但你可以复制他们的JS演示，使用自定义元素作为“光标”跟随鼠标。在Windows上的Chrome中，SVG似乎也不起作用…我正在四处寻找验证，但找不到任何东西。。Chrome中对自定义光标的SVG和GIF支持已中断。。尝试稳定和开发频道。Safari喜欢SVG，但不喜欢base64 SVG或GIF。。。好吧，这是我的尝试。免责声明：这是一项正在进行的工作。仅在Chrome、FF、Opera中的Windows上工作。在IE/Edge中不起作用。必须向元素添加xmlns名称空间，并将其从一个更改为一个元素。这与你想要实现的目标有一点点距离吗？
body.css('cursor', `wait`);