Question

我一直在尝试创建交互式SVG，在其中更改某些自定义属性会更改SVG，但是我遇到了麻烦-我想通过将模式名称作为属性，我找不到一种简单的方法来隐藏或显示这些模式的不同图标。

基本上，问题是-是否有任何方法可以将元素属性的值用作选择器，而无需事先知道该值是什么？

考虑以下CSS代码：

#root[Mode="some_mode"] [id=attr(Mode)] {
    /* .. style .. */
}

此SVG代码：

<g id="root" Mode="some_mode">
    <g id="mode1" />
    <g id="mode2" />
    <!-- and so on -->
</g>

这似乎是执行此操作的最明显和合乎逻辑的方法，但它不起作用，因此我采取了一种拙劣的方法：

#root[Mode="standby"] #standby { visibility: visible; }
#root[Mode="comfort"] #comfort { visibility: visible; }
#root[Mode="economy"] #economy { visibility: visible; }
/* and so on for every mode that I have */

我知道可以使用JS完成此操作，但诀窍在于该SVG必须不使用JS（这是针对使用SVG进行自定义图形的SCADA系统）。

提前感谢您的帮助！

Answer 1

由于CSS是声明性的，所以我认为正确的方法（尽管冗长）实际上是：

[Mode="standby"] #standby,
[Mode="comfort"] #comfort,
[Mode="economy"] #economy {
  visibility: visible;
}

在CSS中使用元素的属性值作为选择器

1 个答案: