使用CSS更改SVG图标的颜色，类似于灰度，但更改为蓝色的阴影。
使用CSS更改SVG图标的颜色，类似于灰度，但更改为蓝色的阴影。
提问于 2022-01-09 03:13:29
我有一个SVG图标列表，其中有颜色，用于显示如下所示
，我希望能够重用这些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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-01-09 06:03:06
我发现，您可以添加一个职位绝对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>
Stack Overflow用户
发布于 2022-01-09 18:12:41
您还可以将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?). )。
的主要好处：
您不需要额外的(背景)元素来控制混合混合模式的颜色计算。
缺点：
您将不得不调整不同的色移属性，以获得所需的颜色结果。
Stack Overflow用户
发布于 2022-01-09 06:25:21
只使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70638159
复制相关文章
相似问题
腾讯云开发者
