css - 否定填充 :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 让它们继承父级的 color。但是，在某些情况下，例如我们的 Logo ，我们希望显示这些嵌入的颜色。在其他地方，比如页脚，我们想用我们选择的单一颜色覆盖颜色。

出于原因™，我坚持使用库中的这些类。每个图标都有类 svg-icon 和一个更具体的类，在本例中为 iconLogoGlyph。

如果我无法触及类，如何仅使用 CSS 来否定 fill: currentColor？我已经尝试使用 :not 来选择除 .iconLogoGlyph 之外的所有内容，但这不会让我在实​​际需要时使用 fill: currentColor

fill: currentColor 的反义词是什么？它不是 fill: inherit 或 fill: none。我需要类似 fill 的东西:只需捕获 SVG 中的内容，哟 🤔

Answer 1

如果您对 SVG 稍作修改，就有一种方法可以使它正常工作。如果你不是这样:

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

这样做:

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

即将所有填充的形状包裹在组中，并在组而不是路径本身上指定填充，然后会发生以下情况:

根据 the spec ,

1. fill不适用于 <g>元素，因此在组上设置此属性不会造成伤害(例如，您不会突然得到一个填充的矩形)，并且

2. fill是继承的，因此 <g>的 fill将适用于 <path> .

接下来，如果不是*你用*:not(g)在您的 CSS 中(在您的特定示例中，仅使用 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 更改为您希望使用原生颜色的图标。始终应该用当前颜色填充的图标不需要更改。