使用 CSS 更改类似于灰度的 SVG 图标的颜色，但更改为蓝色阴影

Question

我有一个 SVG 图标列表，其中包含我用来显示的颜色，如下所示

我希望能够在我的 web 应用程序的其他地方重新使用这些 SVG，但要更改图标的颜色，以便不显示颜色，而是只显示特定的颜色阴影。 (蓝色)

有没有办法通过CSS将其更改为类似于灰度的蓝色？（我不想上传单独的 SVG 来执行此操作）

我得到的最接近的是关注这个

但是 我不想要图标后面的正方形背景。（我只是想让 SVG 改变颜色）

.background {
  padding: 16px;
  background: rgb(199, 229, 242);
}

.donut {
  width: 32px;
  height: 32px;
  position: relative;
}


.donut::before, .donut::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.donut::before {
  background-color: gray;
  mix-blend-mode: color;
}
.donut::after {
  mix-blend-mode: overlay;
  background-color: blue;
}

<div class="background">
  <div class="donut">
    <svg  fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M23.778 4.36A14 14 0 0016 2v5a9 9 0 11-9 9H2A14 14 0 1023.778 4.36z" fill="#E1BD16"/>
      <path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z" fill="#F85F4E"/>
    </svg>
  </div>
</div>

Answer 1

我发现您可以添加带有所需颜色填充的位置绝对 SVG。然后使用 mix-blend-mode: overlay; 和 filter: grayscale(1); 你可以得到你想要的颜色

.background {
  padding: 16px;
  background: rgb(199, 229, 242);
}

.donut {
  width: 32px;
  height: 32px;
  filter: grayscale(1);
  mix-blend-mode: overlay;
  z-index: 1;
}

.donut-background {
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 0;
}

.donut-background * {
  fill: #2C93BF;
}

<div class="background">
    <svg class="donut-background" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M23.778 4.36A14 14 0 0016 2v5a9 9 0 11-9 9H2A14 14 0 1023.778 4.36z" fill="#E1BD16"/>
      <path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z" fill="#F85F4E"/>
    </svg>
    
    
    <svg class="donut" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M23.778 4.36A14 14 0 0016 2v5a9 9 0 11-9 9H2A14 14 0 1023.778 4.36z" fill="#E1BD16"/>
      <path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z" fill="#F85F4E"/>
    </svg>
</div>

Answer 2

使用仅包含 SVG 路径而非背景的滤镜来根据原始颜色更改颜色：

.background {
  margin: 1rem;
}

.donut {
  height: 32px;
  width: 32px;
}

.donut svg:hover {
  filter: hue-rotate(180deg);
}

<div class="background">
  <div class="donut">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M23.778 4.36A14 14 0 0016 2v5a9 9 0 11-9 9H2A14 14 0 1023.778 4.36z" fill="#E1BD16"/>
      <path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z" fill="#F85F4E"/>
    </svg>
  </div><br>
  Hover over image.
</div>

Answer 3

您还可以直接在甜甜圈图标上应用 css 过滤器，如下所示：

  filter: hue-rotate(180deg) saturate(75%);

简单的颜色偏移示例

.background {
  padding: 16px;
  background: rgb(199, 229, 242);
}

.icon-use {
  width: 32px;
  height: 32px;
  display: inline-block;
}

.filter-blue-hover:hover,
.filter-blue {
  filter: hue-rotate(180deg) saturate(75%);
}

<svg class="donut" style="display:none" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <symbol id="icon">
      <path d="M23.778 4.36A14 14 0 0016 2v5a9 9 0 11-9 9H2A14 14 0 1023.778 4.36z" fill="#E1BD16" />
      <path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z" fill="#F85F4E" />
    </symbol>
  </svg>
<div class="background">
  <svg viewBox="0 0 32 32" class="icon-use filter-blue">
    <use href="#icon" />
  </svg>
</div>
<p>
  <svg viewBox="0 0 32 32" class="icon-use filter-blue-hover">
    <use href="#icon" />
  </svg> Filter on hover - no background color needed.
</p>

编辑：标准化着色
此示例避免了由相对色调偏移引起的不需要的颜色。
我们首先通过 sepia(100%).
将所有内容着色为棕褐色调通过这个归一化步骤，我们可以确保所有过滤后的颜色都在所需的色调范围内（在本例中为“偏蓝”）。

//toggleFilter
function toggleFilter() {
  let filterItems = document.querySelectorAll(".toggleFilter");
  filterItems.forEach(function(el, i) {
    el.classList.toggle("filter-blue");
  });
}

.icon-use {
  width: 1em;
  height: 1em;
  display: inline-block;
  font-size: 10vw;
  transition: 0.3s;
}

.filter-blue {
  transition: 0.3s filter ease-in-out;
  filter: invert(0%) sepia(100%) saturate(300%) hue-rotate(-180deg);
}

.filter-blue:hover {
  filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg);
}

.icon-wrp {
  position: relative;
  display: inline-block;
  width: 1em;
  font-size: 10vw;
}

<p>
  <button id="btnFilter" onclick="toggleFilter()">Toggle Filter</button>

</p>

<svg class="donut" style="display:none" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <symbol id="slice">
      <circle cx="50%" cy="50%" r="25%" fill="none" pathLength="99" />
    </symbol>
</svg>

<div class="icon-wrp">
  <!-- pie chart-->
  <svg viewBox="0 0 32 32" class="toggleFilter">
        <use href="#slice" stroke="#E1BD16" stroke-width="16" />
        <use href="#slice" stroke="#F85F4E" stroke-width="16" stroke-dasharray="33 100" />
        <use href="#slice" stroke="purple" stroke-width="16" stroke-dashoffset="-33" stroke-dasharray="33 100" />
  </svg>
</div>

<div class="icon-wrp">
  <!-- pie chart-->
  <svg viewBox="0 0 32 32" class="toggleFilter " transform="scale(1.5)">
        <use href="#slice" stroke="blue" stroke-width="4" />
        <use href="#slice" stroke="green" stroke-width="4" stroke-dasharray="33 100" />
        <use href="#slice" stroke="orange" stroke-width="4" stroke-dashoffset="-33" stroke-dasharray="33 100" />
  </svg>
</div>

<div class="icon-wrp">
  <!-- pie chart-->
  <svg viewBox="0 0 32 32" class="toggleFilter ">
        <use href="#slice" stroke="yellow" stroke-width="16" />
        <use href="#slice" stroke="cyan" stroke-width="16" stroke-dasharray="33 100" />
        <use href="#slice" stroke="magenta" stroke-width="16" stroke-dashoffset="-33" stroke-dasharray="33 100" />
  </svg>
</div>

此方法基于此处描述的流行 svg 着色概念 (How to change the color of an svg element?).

主要好处：
您不需要额外的（背景）元素来控制混合混合模式颜色计算。

缺点：
您将不得不调整不同的色调偏移属性以获得所需的颜色结果。

使用 CSS 更改类似于灰度的 SVG 图标的颜色，但更改为蓝色阴影

Change the color of a SVG icon similar to grayscale but to shades of blue with CSS

css

svg