取消currentColor的填充效果

Question

有没有办法否定或删除fill：currentColor？

.svg-icon * {
  /* Targets all sub-elements so we can deliver icons with a color override of our choice */
  fill: currentColor;
}

.svg-icon.iconLogoGlyph * {
  /* How do I  negate fill: currentColor further down the cascade? */
  fill: inherit;
  /* I want the natural colors from the SVG */
}

<svg role="icon" class="svg-icon iconLogoGlyph" width="25" height="30" viewBox="0 0 25 30"><g fill="none"><path fill="#BCBBBB" d="M21 27v-8h3v11H0V19h3v8z"></path><path fill="#F48024" d="M5.402 19.101l13.561 1.96.164-2.38-13.256-2.547-.469 2.967zM7.2 12.3l12 5.6 1.1-2.4-12-5.6-1.1 2.4zm3.4-5.9l10.2 8.5 1.7-2-10.2-8.5-1.7 2zM17.1.2L15 1.8l7.9 10.6 2.1-1.6L17.1.2zM5 25h14v-3H5v3z"></path></g></svg>

我有一组使用SVG制作的图标。其中一些图标包含颜色信息的内联样式。最常见的用例是忽略这些内联填充，并通过在CSS中声明“fill: currentColor”来继承其父元素的颜色。但是，在某些情况下，比如我们的徽标，我们希望显示这些嵌入式颜色。在其他地方，比如页脚，我们希望用我们选择的单一颜色覆盖这些颜色。

由于某些原因，我被限制只能使用库中提供的类。每个图标都有一个类“svg-icon”和一个更具体的类，例如“iconLogoGlyph”。

如果我不能触碰这些类，如何仅使用CSS来否定“fill: currentColor”？我尝试使用“:not”选择除“.iconLogoGlyph”之外的所有内容，但这样做将不允许我在实际需要时使用“fill: currentColor”。

“fill: currentColor”的相反是什么？它不是“fill: inherit”或“fill: none”。我需要像“fill：just grab what's in the SVG, yo”这样的东西。

- Aaron Shekey

---

你确定 .svg-icon:not(.iconLogoGlyph) * 不起作用吗？ - ccprog

我肯定能让.svg-icon:not(.iconLogoGlyph) *忽略currentColor，但我希望默认状态是currentColor，覆盖状态是使用自然颜色。嗯。 - Aaron Shekey

这就是我的意思：.svg-icon:not(.iconLogoGlyph) * { fill: currentColor; }，完结撒花。 - ccprog

不幸的是，该CSS假定“每个图标都应该从其父级继承颜色”，而我希望“每个图标都应该从其父级继承颜色，除非我明确告诉它不要这样做。” 这是一个微妙的问题，但我希望删除继承成为覆盖，而不是继承。 嗯。 - Aaron Shekey

因此，区分因素不是svg元素上的类，而是树中的其他地方？那么你的示例是误导性的。无论如何，解决方案在于调整选择器，而不是属性。 - ccprog

我问过是否有一种方式来否定填充: currentColor，而你提供了一种忽略特定图标的方法。 - Aaron Shekey

Answer 1

有一种方法可以让它起作用，只需要稍微修改SVG。如果你将这个改为：

<path fill="#BCBBBB" d="..."></path>

请执行以下操作：

<g fill="#BCBBBB"><path d="..."></path></g>

根据规范：

1. fill不适用于<g>元素，因此在组上设置此属性不会有任何影响（即您不会突然获得填充的矩形），
2. fill可继承，因此<g>的fill将应用于<path>。

接下来，如果您在CSS中使用*:not(g)替代*（在您的特定示例中，仅使用path也可以），则在默认情况下，fill:currentColor会告诉路径使用当前颜色（忽略父级组的填充值）。在覆盖情况下，当您设置fill:inherit时，您告诉路径返回继承父级的填充值。

.svg-icon *:not(g) {
  fill: currentColor;
}

.svg-icon.iconLogoGlyph *:not(g) {
  fill: inherit;
}

<!-- these two SVGs are identical except that the
     first one doesn't have the `iconLogoGlyph` class -->

<div style="color: green">

  <svg role="icon" class="svg-icon" width="25" height="30" viewBox="0 0 25 30"><g fill="none"><g fill="#BCBBBB"><path d="M21 27v-8h3v11H0V19h3v8z"></path></g><g fill="#F48024"><path fill="#F48024" d="M5.402 19.101l13.561 1.96.164-2.38-13.256-2.547-.469 2.967zM7.2 12.3l12 5.6 1.1-2.4-12-5.6-1.1 2.4zm3.4-5.9l10.2 8.5 1.7-2-10.2-8.5-1.7 2zM17.1.2L15 1.8l7.9 10.6 2.1-1.6L17.1.2zM5 25h14v-3H5v3z"></path></g></g></svg>
  
  <svg role="icon" class="svg-icon iconLogoGlyph" width="25" height="30" viewBox="0 0 25 30"><g fill="none"><g fill="#BCBBBB"><path d="M21 27v-8h3v11H0V19h3v8z"></path></g><g fill="#F48024"><path fill="#F48024" d="M5.402 19.101l13.561 1.96.164-2.38-13.256-2.547-.469 2.967zM7.2 12.3l12 5.6 1.1-2.4-12-5.6-1.1 2.4zm3.4-5.9l10.2 8.5 1.7-2-10.2-8.5-1.7 2zM17.1.2L15 1.8l7.9 10.6 2.1-1.6L17.1.2zM5 25h14v-3H5v3z"></path></g></g></svg>

</div>

只需将这个SVG更改应用于您希望使用本地颜色的图标即可。不需要更改始终应该填充当前颜色的图标。

- balpha

---

不错的想法，虽然我之前以为图标库是不能更改的。 - ccprog

CSS类是这样的，但OP没有说SVG是这样的。而且既然他是我的同事，我知道它们不是这样的 ;) - balpha

Answer 2

如果您可以稍微更改全局fill: currentColor规则和需要保留其颜色的SVG，那么还有另一种解决方案。

将您的全局规则更改为以下内容：

path:not(.important), circle:not(.important) {
    fill: currentColor;
}

在您的SVG中，将important类添加到所有已填充的部分，例如：

<path class="important" fill="#FFF" ...

与使用 <g> 标签的解决方案不同，这种方法允许您使用编辑器工具轻松自动替换所有所需部分。

- sv3k

Answer 3

不，没有任何fill属性值能够满足您的要求。实现您想要的效果的唯一明智方法是使用CSS选择器来匹配您想要重新着色的图标。

- ccprog