否定填充: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编写的图标.其中一些图标包含带有颜色信息的内联样式.最常见的用例是忽略这些内联填充,并color通过fill: currentColor在CSS中声明来继承它们的父级.但是,在某些情况下,比如我们的徽标,我们希望能够显示这些嵌入的颜色.在其他地方,比方说,一个页脚,我们想用我们选择的单一颜色覆盖颜色.

出于原因™,我坚持使用库中的这些类.svg-icon在这种情况下,每个图标都有类和更具体的类iconLogoGlyph.

fill: currentColor如果我不能触摸课程,我如何否定只使用CSS？我已经尝试过:not选择所有但是.iconLogoGlyph,但这不会让我fill: currentColor在实际需要时使用它.

有什么相反的fill: currentColor？它不是fill: inherit或fill: none.我需要类似的东西fill: just grab what's in the SVG, yo

Answer 1

不，没有任何财产价值fill可以满足您的要求。实现您想要的效果的唯一明智的方法是使用与您想要重新着色的图标相匹配的 CSS 选择器。