css - SVG 改变动态颜色

Question

我在菜单列表中有 svg 图像，但想更改 svg 图像 (.svg) 的颜色。只能使用过滤器 css 属性。我得到了从十六进制到 css 过滤器的过滤器值(库:hex-to-css-filter)。它为颜色提供了正确的值，但 React 无法在该图像上设置过滤器属性。 我尝试使用 inline 并在 css 中使用 root 变量。一些代码片段描述如下:

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);;
}

Answer 1

您可以将给定的 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");