将光标设置为<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>
