我一直在尝试创建一个交互式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系统）。
在此先感谢您的帮助！
由于CSS是声明性的，因此我认为正确的方法（尽管冗长）实际上是：
[Mode="standby"] #standby,
[Mode="comfort"] #comfort,
[Mode="economy"] #economy {
visibility: visible;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句