SVG 改变动态颜色

Question

我在菜单列表中有 svg 图像，但想更改 svg 图像 (.svg) 的颜色。只能使用过滤器 css 属性。我得到了从十六进制到 css 过滤器的过滤器值（库：hex-to-css-filter）。它为颜色提供了正确的值，但 React 无法在该图像上设置过滤器属性。我尝试使用内联并在 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);;
}

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

SVG 改变动态颜色

SVG change dynamic color

css

reactjs

css-filters