左圈是标签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 变量传递值:
PS:我不知道,也许有更好的方法。
我们用
<use>
吗?那么使用 and 是合乎逻辑的<defs>
:此外,您不应该在属性中指定参数,然后尝试用 CSS 属性“杀死”它们。如果您指定属性,那么只有那些是静态的或由脚本修改的。
使用正确的 SVG 标记(引用、分组),所有 CSS 样式都可以按预期工作:
您可以将圆圈包裹在一个组中并将光标应用于它: