将光标设置为 <symbol> 元素答案

【问题标题】：Set cursor to be <symbol> element将光标设置为 <symbol> 元素
【发布时间】：2018-02-01 11:42:37
【问题描述】：

我有一个 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> 元素做到这一点？

【问题讨论】：

相关 CSS 技巧文章：css-tricks.com/using-css-cursors/#article-header-id-1 不幸的是，看起来他们使用 SVG 的演示（尽管是 CSS/base64 编码的）在我的 macOS 版 Chrome 上不起作用。但是你可以复制他们使用自定义元素作为“光标”来跟随鼠标的 JS 演示。
在 Windows 上的 Chrome 中似乎也不适用于 SVG...
我正在四处寻找验证，但找不到任何东西.. Chrome 中对自定义光标的 SVG 和 GIF 支持似乎已损坏.. 尝试了稳定和开发通道。 Safari 喜欢 SVG，但不喜欢 base64 SVG 或 GIF...codepen.io/geoffgraham/pen/QNgoQW
好的，这就是我的尝试。免责声明：这是一项正在进行的工作。仅适用于 Chrome、FF、Opera 中的 Windows。在 IE/Edge 中不起作用。必须向元素添加 xmlns 命名空间，并将其从更改为

标签： javascript html css mouse-cursor

【解决方案1】：

您可以设置两个<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 上运行。

【讨论】：

【解决方案2】：

@Ivan 的回答很好，但是这样会更好。

我只是做了一些改变

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>

【讨论】：