将光标设置为<符号>元件 [英] Set cursor to be <symbol> element

问题描述

我有一个HTML符号

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>

我想用作光标。我熟悉像这样通过JQuery改变游标：

which I want to use as the cursor. I'm familiar with changing the cursor via JQuery like this:

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

但我怎样才能做到< symbol> < svg>

But how can I do this for a <symbol> element?

推荐答案

c>元素来定义您的SVG符号，另一个元素用于保存元素。然后使用Javascript，您可以设置事件侦听器，并在用户光标移动时更改整个< svg> （持有元素的那个）的位置。另外，我隐藏了CSS属性 cursor：none 的默认浏览器光标。这里有一个工作代码：

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>

您必须调整 newTransformRule 中的值以将自定义光标与默认光标居中。删除CSS规则进行调整。

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.

代码正在使用Firefox，Chrome和Edge。

The code is working on Firefox, Chrome and Edge.

这篇关于将光标设置为<符号>元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！