在React中使用ChromePicker修改多色SVG指定ID路径的填充颜色

问题原因 #

1. 你通过src属性加载外部SVG资源时，SVG的DOM结构和外层页面DOM隔离，外层CSS无法直接作用到SVG内部节点，导致样式修改不生效。
2. 你原代码中的CSS选择器是匹配fill属性等于固定值的元素，不符合你要修改id=COULEUR节点下路径颜色的需求。

解决方案1：将SVG封装为React组件（最稳定，适合固定SVG资源） #

直接把你的SVG代码改写为React组件，接收颜色参数动态修改对应节点的fill属性：

// CustomSvg.js
import React from 'react';

const CustomSvg = ({ color }) => (
  <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" style={{fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 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', fillRule: '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={{fill: color, fillRule: '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)', fillRule: 'nonzero'}}/>
          </g>
        </g>
      </g>
    </g>
  </svg>
);

export default CustomSvg;

然后修改你的业务组件代码：

import React from 'react';
import { ChromePicker } from 'react-color';
import CustomSvg from './CustomSvg';

class Magic2 extends React.PureComponent {
  state = {
    color: '#ff0000' // 替换为你的默认颜色即可
  };
  
  onChangeColor = color => this.setState({ color: color.hex });

  render() {
    const { color } = this.state;
    return (
      <div>
        <ChromePicker
          color={color}
          onChangeComplete={this.onChangeColor}
        />
        <CustomSvg color={color} />
      </div>
    );
  }
}

export default Magic2;

解决方案2：动态加载外部SVG（适合需要加载多个不同SVG的场景） #

通过请求获取SVG文本插入到页面DOM中，再通过CSS选择器控制颜色：

import React from 'react';
import { ChromePicker } from 'react-color';
import styled from 'styled-components';

const ContainerSvg = styled.div`
  #COULEUR path {
    fill: ${p => p.color};
  }
`;

class Magic2 extends React.PureComponent {
  state = {
    color: '#ff0000',
    svgContent: ''
  };

  componentDidMount() {
    // 替换为你的SVG资源地址
    fetch('/你的SVG文件地址.svg')
      .then(res => res.text())
      .then(svgText => this.setState({ svgContent: svgText }));
  }
  
  onChangeColor = color => this.setState({ color: color.hex });

  render() {
    const { color, svgContent } = this.state;
    return (
      <div>
        <ChromePicker
          color={color}
          onChangeComplete={this.onChangeColor}
        />
        <ContainerSvg 
          color={color}
          dangerouslySetInnerHTML={{ __html: svgContent }}
        />
      </div>
    );
  }
}

export default Magic2;

注意：使用dangerouslySetInnerHTML时请确保SVG来源可信，避免XSS注入风险。

内容的提问来源于stack exchange，提问作者banbz