我在選單串列中有 svg 影像，但想更改 svg 影像（.svg）的顏色。只能使用 filter css 屬性。我得到了從 hex 到 css 過濾器的過濾器值（庫：hex-to-css-filter）。它為顏色提供了正確的值，但反應無法在該影像上設定過濾器屬性。我嘗試使用行內并在 css 中使用根變數。一些代碼片段描述如下：
const filterValue = hexToCSSFilter('#575a98').filter; // invert(40%) sepia(15%) saturate(1783%) hue-rotate(199deg) brightness(83%) contrast(84%)
document.documentElement.style.setProperty('--menu-image-filter', `${filterValue}`);
同樣在 style.css
:root {
--menu-image-filter: invert(79%) sepia(28%) saturate(1346%) hue-rotate(77deg) brightness(90%) contrast(85%); // Default
}
span.svg_path img{
width: 35px;
filter: var(--menu-image-filter);;
}
uj5u.com熱心網友回復：
您可以將給定的 svg url 轉換為文本，然后您可以使用 CSS 中的填充和描邊方法更改顏色。
代碼是，
function getTheSvg(url) {
return fetch(url).then((res) => res.text());
}
const getTextFromSvg = async (url) => {
let svgVal = await getTheSvg(url).then((res) => {
return res;
});
getTextFromSvg("https://yoururl.svg");
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/465713.html