重置 svg 填充 css

Posted 2023-03-06

【中文标题】重置 svg 填充 css

【英文标题】：Reset svg fill in css

【发布时间】：2017-02-27 14:05:45

【问题描述】：

我想让我的所有 svg 都具有相同的纯色。所以我用

svg *
   fill: #ccc;

但我想在 :hover 上获得默认填充。如何禁用填充并恢复默认值？

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

【参考方案1】：

您可以使用:not() 执行此操作并有效地设置“未悬停”的样式。

svg *:not(:hover)
  fill: #ccc;

以上方法可能有效，这里有一个快速的 CodePen，您可以使用：http://codepen.io/anon/pen/rrqyAx

您可以通过Mozilla Dveloper Network entry for :not()了解更多信息

或者（我很好奇）您可以使用 fill:inherit - 这同样有效。在这种情况下，使用的颜色将继承自父 svg 的填充值，也可以在 css 中设置。

svg *:hover
  fill : inherit;

我在 CodePen 中添加了一个以这种方式设置样式的 svg。

【讨论】：

关于您的第二条评论，fill:inherit 只会将颜色恢复为默认的 SVG 颜色； 10 次中有 9 次是黑色的。在更改之前，它不会将颜色恢复为 SVG 的原始填充颜色。请参阅this pen，其中原始<polyline> 是pink。悬停只会将其变为继承的 SVG 默认颜色 black。

@shennan 这就是我认为被问到的问题，尽管我同意这对于其他找到此答案的人来说是值得澄清的。

inherit 不是 fill 的有效值