使用CSS控制SVG颜色 [英] Controlling SVG colors with CSS

问题描述

我在库中设置了一些图标，这些图标使用了一些基本的CSS和一个SVG Sprite（通过webpack生成）。

I'm setting up a few icons in a library that's using some basic CSS and an SVG Sprite (generated through webpack).

我想要的一些图标能够使用多种颜色进行着色。我的设置如下：

Some of the icons I want to be able to color with multiple colors. My set up looks like:

mail.svg （为简单起见，省略了svg的详细信息）

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" width="64" height="64">
  <polyline class="primary-stroke" fill="none" stroke-width="2" [more-stuff-here]></polyline>
  <path fill="none" stroke-width="2" [more-stuff-here]></path>
  <line class="primary-stroke" fill="none" stroke-width="2" [more-stuff-here]></line>
</svg>

我的计算CSS（ blue 是主要的强调颜色）看起来像：

My computed CSS (blue is the primary accent color) looks like:

svg {
  fill: currentColor;
  stroke: currentColor;
}

.primary-stroke {
  stroke: blue;
  fill: none;
}

我的HTML看起来像：

And my HTML looks like:

<svg><use xlink:href="#mail"></svg>

这一切都与预期完全一致，但现在我想更进一步。我希望能够在元素中添加一个类来确定此实例是否应包含1种单色或2种颜色。

This all works exactly as expected, but now I want to take it a step further. I want to be able to add a class to the element to determine if this instance should contain 1 single color or 2 colors.

我的尝试非常简单。我刚刚在 svg 元素中添加了一个单色类，如下所示：

My attempt was pretty simple. I just added a single-color class to the svg element to look like:

<svg class="single-color"><use xlink:href="#mail"></svg>

并修改了SCSS。计算出的CSS看起来像：

And modified the SCSS. The computed CSS looks like:

.single-color .primary-stroke {
  stroke: currentColor;
  fill: none;
}

但是，它肯定不起作用。 主要样式仍然生效。我刚开始使用SVG并且我不确定是否可以使用精灵来实现我的目标？

But, it definitely does not work. The primary styles still take effect. I'm new to working with SVGs and I'm not sure if what I'm trying to do is even possible with a sprite?

CodePens演示了问题：

• 工作演示（没有精灵）： https://codepen.io/amlyhamm/pen/ddjXBp

不工作（使用精灵）： https://codepen.io/amlyhamm/pen/paZbMq

Not Working (using Sprites): https://codepen.io/amlyhamm/pen/paZbMq

两个例子都使用相同的类和SVG。

Both examples use the same classes and SVGs.

推荐答案

< use> 元素引用的元素本身不是DOM链的一部分，它只出现在阴影中DOM，因此，您无法通过选择器访问它。

The element referenced by the <use> element is not per se part of the DOM chain, it is only present in the shadow DOM, and hence, you can't access it through your selector.

解决方案是直接定位< use> 元素本身，不要为内部 .prima设置规则ry-stroke 这样他们就可以继承< use> 。

The solution would be to target directly the <use> element itself, and don't set rules for the inner .primary-stroke so that they can inherit from the <use>.

/* 
  don't set any direct rule on the .variable ones 
  otherwise, they won't be able to inherit from the <use>
*/

/* target the uses */
.stroke-only use[href="#rects"] {
  stroke: blue;
  fill: none;
}
.stroke-and-fill use[href="#rects"] {
  stroke: blue;
  fill: green;
}

/* this one won't get influenced by the <use> */
.fixed {
  fill: orange;
  stroke: red;
}

svg { display: block; }

<svg width="0" height="0" style="position:absolute;z-index:-1">
  <defs>
    <g id="rects">
      <rect class="variable" x=5 y=5 width=50 height=50 />
      <rect class="fixed" x=60 y=5 width=50 height=50 />
    </g>
  </defs>
</svg>

<svg class="stroke-only" height=70 >
  <use href=#rects />
</svg>

<svg class="stroke-and-fill" height=70 >
  <use href=#rects />
</svg>

然后对于codepen中的示例，您需要为不改变颜色的一条路径添加特定规则，例如：

And then for the example in your codepen, you'll need to add specific rules for the one path that doesn't change color e.g:

#mail path:not([class]) {
  stroke: currentColor;
  fill: none;
}

更新了代码集。

但最好用类来标记它（就像我用<$做的那样） c $ c> .fixed ）如果你可以控制这个精灵表。

But the best would be to mark it with a class (like I did with .fixed) if you have control over this sprite-sheet.

这篇关于使用CSS控制SVG颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！