主页 / 问题 / 1385890
Accepted
Qwertiy
Asked:2022-07-26 19:35:14 +0000 UTC2022-07-26 19:35:14 +0000 UTC

如何在使用中更改光标？

  • 772

左圈是标签circle，右圈是use使用左圈的标签。

我怎样才能使它只有左边的圆圈有cursor: pointer，而右边的有一个常规箭头？

html, body { height: 100%; }
body { display: grid; margin: 0; }
svg { width: 100%; max-height: 100%; margin: auto; }

circle { cursor: pointer; }
use, use circle { cursor: auto; }
<svg viewBox="-5 -5 19 10">
  <circle id="smth" r="4" fill="blue" />
  <use xlink:href="#smth" x="9" />
</svg>

css

3 个回答

  1. Best Answer

    您可以通过 css 变量传递值：

    html, body { height: 100%; }
body { display: grid; margin: 0; }
svg { width: 100%; max-height: 100%; margin: auto; }

svg { --cursor: pointer; }
use { --cursor: auto; }
circle { cursor: var(--cursor); }
    <svg viewBox="-5 -5 19 10">
  <circle id="smth" r="4" fill="blue" />
  <use xlink:href="#smth" x="9" />
</svg>

    PS：我不知道，也许有更好的方法。

    • 5

  2. 我们用<use>吗？那么使用 and 是合乎逻辑的<defs>：

    html, body { height: 100%; }
body { display: grid; margin: 0; }
svg { width: 100%; max-height: 100%; margin: auto; }

use:nth-of-type(1) { cursor: default; }
use:nth-of-type(2) { cursor: pointer; }
use:nth-of-type(3) { cursor: crosshair; }
    <svg viewBox="-5 -5 19 10">
  <defs>
    <circle id="smth" r="2" fill="blue" />
  </defs>
  <use xlink:href="#smth" x="0" />
  <use xlink:href="#smth" x="4" />
  <use xlink:href="#smth" x="8" />
</svg>

    此外，您不应该在属性中指定参数，然后尝试用 CSS 属性“杀死”它们。如果您指定属性，那么只有那些是静态的或由脚本修改的。

    使用正确的 SVG 标记（引用、分组），所有 CSS 样式都可以按预期工作：

    html, body { height: 100%; }
body { display: grid; margin: 0; }
svg { width: 100%; max-height: 100%; margin: auto; }

.red use { y: -2px; fill: #f00; }
.blue use { y: 2px; fill: #00f; }

.red use:nth-of-type(1) { cursor: default; }
.red use:nth-of-type(2) { cursor: pointer; }
.red use:nth-of-type(3) { cursor: crosshair; }

.cell { cursor: cell; }
.help { cursor: help; }
.zoom { cursor: zoom-in; }
    <svg viewBox="-5 -5 19 10">
  <defs>
    <circle id="smth" r="2" />
  </defs>
  <g class="red">
    <use xlink:href="#smth" x="0" />
    <use xlink:href="#smth" x="4" />
    <use xlink:href="#smth" x="8" />
  </g>
  <g class="blue">
    <use xlink:href="#smth" x="0" class="cell" />
    <use xlink:href="#smth" x="4" class="help" />
    <use xlink:href="#smth" x="8" class="zoom" />
  </g>
</svg>

    • 3

  3. 您可以将圆圈包裹在一个组中并将光标应用于它：

    html, body { height: 100%; }
body { display: grid; margin: 0; }
svg { width: 100%; max-height: 100%; margin: auto; }

g { cursor: pointer; }
    <svg viewBox="-5 -5 19 10">
  <g>
    <circle id="smth" r="4" fill="blue" />
  </g>
  <use xlink:href="#smth" x="9" />
</svg>

    • 3

相关问题