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

Question

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

我希望能够在我的 web 应用程序的其他地方重复使用这些 SVG，但要更改图标的颜色，这样它就不会显示颜色，而是只显示某种颜色的阴影。 （蓝色）

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

我得到的最接近的是关注这个How change hue of image with different colors with css filter to hue of blue

但我不希望图标后面有方形背景。 （我只是想让 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

您也可以直接在您的甜甜圈图标上应用 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?).

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

缺点：
您必须调整不同的色调偏移属性才能获得所需的颜色结果。

Answer 2

我发现您可以添加一个位置绝对 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 3

仅使用带有 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>