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中声明color来继承父级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

这样的东西

Answer 1

如果稍微修改SVG，有一种方法可以使其工作。如果你，而不是这个：

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

这样做：

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

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

根据the spec，

fill不适用于<g>个元素，因此在群组中设置此属性并不会造成伤害（因为，您不会突然得到）填充的矩形）和
fill是继承的，因此<g>＆＃39; fill将适用于<path>。

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

＆＃13;

fill: inherit

＆＃13;

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

＆＃13;

您只需将此SVG更改为您希望使用原生颜色的图标。总是应该用当前颜色填充的图标不需要更改。

Answer 2

不，2016没有符合您要求的财产价值。实现所需效果的唯一合理方法是使用与要重新着色的图标匹配的CSS选择器。

Answer 3

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

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

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

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

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

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

否定填充：currentColor

3 个答案: