SVG中的CSS特征检测

我正在使用：hover、：active和：focus构建SVG信息图形，以添加一层交互性来增强它。图形可以很好地静态渲染为，但当它被内联放置或作为时，它会得到增强

如果可能的话，我希望图形显示一个“交互式”标签——当SVG在标记中呈现时，它不会出现。没有脚本。独立于环境。本质上，我正在尝试“CSS特性检测”

我的方法是设置一个基本CSS规则：

.red {
    fill: red;
   }

为整个SVG图面添加：悬停状态规则

svg:hover .red {
    fill: cyan
   }

内联和SVG遵守这一规则。基于IMG的SVG忽略了它。他们应该这样做。太好了

我想的诀窍是。。。设置：非：悬停状态。当SVG未悬停时，执行此操作。IMG标签怎么知道是什么：不是：悬停，对吗

svg:not(:hover) .red {
    fill: blue;
   }

果不其然，内联和SVG遵守这条规则，并将填充改为蓝色

不幸的是，标签版本也没有什么帮助。：/

我不明白渲染器是如何在中禁用：hover{…}的，但却能够很好地解析它，从而不破坏svg:not:hover{…}

我想做的事不可能吗

这是一个用于澄清的代码笔演示：

---

最简单的方法是使用javascript在根元素上设置特定的类。脚本，而不是从

---

我不认为它“禁用：hover{…}”，在解析样式或类似的东西时，不会以任何方式忽略它。当通过嵌入时，任何SVG内容都不会触发悬停事件。如果没有触发任何事件，那么svg:not:hover当然会一直应用，就像svg本身一样。你是说我可以编写svg:not:doublebackflip{…}，因为事件从未触发过，如果：doublebackflip作为一个无效的伪类不会触发解析错误，那么这个规则会得到遵守……但是，理论上是的。foo:not.someclass与foo:not.someclass没有区别——它适用于所有没有类someclass的foo元素。如果你想用这种方式表达的话，“元素拥有那个类的事件”永远不会在这里触发，所以…同样的事情。是的，这是有道理的。很好的解释。干杯我不认为有什么办法可以解决这个问题。这可能是我唯一的方法，但我一直在尽可能避免使用JS，因为SVG图像上传程序总是会对其进行清理。他们似乎不使用CSS。我能想到的唯一其他解决方案是使用不同的片段url url.svgelement为您的图像提供服务。然后，您可以滥用：target伪选择器，如下所示：，但js可能更具可伸缩性。我猜如果js将“交互式”标签添加到对象/内联版本，最糟糕的情况——即脚本在某个地方被剥离——并不是那么可怕的用户体验。我欣赏你的想法。谢谢