我有一個 SVG 圖示串列，其中包含我用來顯示的顏色，如下所示
我希望能夠在我的 web 應用程式的其他地方重新使用這些 SVG，但更改圖示的顏色，以便它不顯示顏色，而只顯示某種顏色的陰影。（藍色）
有沒有辦法通過 CSS 將其更改為類似于灰度的藍色？（我寧愿不上傳單獨的 SVG 來執行此操作）
我得到的最接近的是遵循這個如何使用css過濾器將具有不同顏色的影像的色調更改為藍色的色調
但我不希望圖示后面的藍色背景。（我只是想讓 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>uj5u.com熱心網友回復：
我發現您可以添加一個位置絕對 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>uj5u.com熱心網友回復：
您可以將 SVG 的填充、描邊和背景顏色更改為您想要的任何顏色...洗掉<path>標簽中的 SVG 填充屬性并添加額外的 CSS 規則，如下例所示：
.donut svg {
background-color: lightgray;
fill: blue;
stroke: white;
}
.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;
}
*/
.donut svg {
background-color: lightgray;
fill: blue;
stroke: white;
}<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"/>
<path d="M6.1 6.1A14 14 0 002 16h5a9 9 0 019-9V2a14 14 0 00-9.9 4.1z"/>
</svg>
</div>
</div>uj5u.com熱心網友回復：
您也可以直接在您的甜甜圈圖示上應用 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>主要好處：
您不需要額外的元素來控制混合混合模式顏色計算。
缺點：
您必須調整不同的色調偏移屬性才能獲得所需的顏色結果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/406937.html
標籤：
上一篇：通過狀態欄以非模態形式顯示提示