在反应中更改具有多种颜色的 svg 的颜色

Question

我想创建一个网站，我们可以在其中使用不同的 svg，并且我们可以通过 chrome 选择器更改 svg 的颜色。我的 svg 都是一样的，你只需要用 COULEUR id 改变路径的填充。这是我的 svg 文件：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 501 501" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-8695,-3112)">
        <g id="Drapeau" transform="matrix(1,0,0,1,8695.6,3112.25)">
            <rect x="0" y="0" width="500" height="500" style="fill:none;"/>
            <g transform="matrix(2.96558,0,0,2.96558,395.922,266.199)">
                <g id="BLANC">
                    <path d="M0,-29.363L-50.317,-29.363L-50.317,-48.522L-98.411,-48.522L-98.411,-0.117L-50.317,-0.117L-50.317,0.003L-69.867,19.159L0,19.159L-21.936,-5.105L0,-29.363Z" style="fill:white;fill-rule:nonzero;"/>
                </g>
            </g>
            <g transform="matrix(2.96558,0,0,2.96558,188.727,171.993)">
                <g id="COULEUR">
                    <path d="M0,50.926L69.867,50.926L47.931,26.661L54.72,19.154L19.549,19.154L19.549,0L-7.811,0L-7.811,31.623L19.549,31.623L19.549,31.77L0,50.926Z" style="{color};fill-rule:nonzero;"/>
                </g>
            </g>
            <g transform="matrix(2.96558,0,0,2.96558,108.155,241.896)">
                <g id="TRAITS">
                    <path d="M0,6.743L0,-38.952L45.343,-38.952L45.343,6.703L0.316,6.703C0.207,6.703 0.102,6.719 .473,9.453L26.207,26.372C25.808,26.764 25.685,27.357 25.896,27.874C26.107,28.391 6 98.42,26.836 98.056,26.432L76.953,3.09Z" style="fill:rgb(0,64,59);fill-rule:nonzero;"/>
                </g>
            </g>
        </g>
    </g>
</svg>```

here is the code I made for the moment it doesn't look good to me

const ContainerSvg = styled.div`
  *[fill='${dynamicColor}'] {
    fill: ${p => p.color};
  }
  *[stroke='${dynamicColor}'] {
    fill: ${p => p.color};
  }
`;

class Magic2 extends React.PureComponent {
  state = {
    color: dynamicColor
  };
  
  onChangeColor = color => this.setState({ color: color.hex });
  render() {
    const { color } = this.state;
    return (
      <div>
        <ChromePicker
          color={color}
          onChangeComplete={this.onChangeColor}
        />
        <ContainerSvg color={color}>
          <Svg src={url}>Can't load image</Svg>
        </ContainerSvg>
      </div>
    );
  }
}
export default Magic2;```

Answer 1

  function changeColor6() {
    document.getElementById("COULEUR").querySelector("path").setAttribute("style", "fill:#52C483;fill-rule:nonzero;")
  }
import { ReactComponent as DrapeauJaune } from '../DrapeauJaune.svg';
      <button onClick={changeColor6} style={{background: color6, width: 80, height: 40, borderRadius: 7, borderWidth: 0, marginTop: -30}}/>

        <DrapeauJaune id="btn"/>

在反应中更改具有多种颜色的 svg 的颜色

Change the color of an svg with multiple colors in react

html

javascript

svg

reactjs