我有一个 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>
您必须调整中的值newTransformRule将自定义光标与默认光标居中。删除CSS规则来进行调整。
该代码适用于 Firefox、Chrome 和 Edge。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
