Как сменить курсор внутри use?

Question

Левый круг является тегом 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>

Answer 1

Можно прокинуть значение через 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: Не знаю, может есть и способы лучше.

Answer 2

Используем <use>? Тогда логично использовать и <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>

Answer 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>

БЛОГ НА HUSL

Как сменить курсор внутри use?

Ответы (3 шт):