React中如何修改字符串格式SVG的所有path元素fill颜色值

问题场景 #

• 项目环境：React 项目，通过 axios 发起请求获取 SVG 资源，接口返回值为字符串格式的 SVG 内容
• 实现需求：在将 SVG 字符串转为 base64 用于图片渲染前，将所有path标签的fill属性值替换为传入的自定义颜色props.color
• 原有组件代码如下：

export const ColorSvg = props => {

  const [
    state,
    setState
  ] = React.useState({
    svgData: undefined,
  });

  React.useEffect(() => {

    if (!props.src) {
      return;
    }

    myAxiosGet(props.src) // 自定义axios封装方法
      .then(res => {

        if (res.ok) {

          // 需要在转base64前，将所有path的fill值替换为props.color
          const color = props.color;

          const base64data = btoa(unescape(encodeURIComponent(res.data)));

          setState(prevState => ({
            ...prevState,
            svgData: base64data
          }));
        }
      })
  }, [props.color, props.src]);

  return (
    <>
    { state.svgData &&

      <img height={props.height} width={props.width} src={`data:image/svg+xml;base64,${state.svgData}`} alt="" />
    }
    </>
  );
};

• 接口返回的SVG字符串示例：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.862154 9.414C0.0811059 8.63295 0.0811042 7.36662 0.862153 6.58557L1.95111 5.49661V3.95318C1.95111 2.84861 2.84654 1.95318 3.95111 1.95318H5.49454L6.58557 0.862154C7.36661 0.0811059 8.63295 0.0811042 9.41399 0.862153L10.505 1.95318H12.0452C13.1498 1.95318 14.0452 2.84861 14.0452 3.95318V5.4934L15.1374 6.58557C15.9185 7.36661 15.9185 8.63295 15.1374 9.41399L14.0452 10.5062V12.0473C14.0452 13.1519 13.1498 14.0473 12.0452 14.0473H10.5041L9.414 15.1374C8.63295 15.9185 7.36662 15.9185 6.58557 15.1374L5.49547 14.0473H3.95112C2.84655 14.0473 1.95111 13.1519 1.95111 12.0473V10.503L0.862154 9.414ZM7.73026 10.7313L12.016 6.73134L10.6513 5.26923L7.04794 8.6324L5.34931 7.04701L3.98467 8.50912L6.36563 10.7313L7.04794 11.3682L7.73026 10.7313Z" fill="#0EBC73"/>
</svg>

实现方案 #

方案1：零依赖原生实现（推荐） #

不需要安装任何第三方npm包，直接使用浏览器原生提供的DOMParser和XMLSerializer即可完成解析、修改、序列化全流程，适配所有现代浏览器，修改逻辑插入到axios请求成功的回调中即可：

myAxiosGet(props.src)
  .then(res => {
    if (res.ok) {
      const color = props.color;
      // 解析SVG字符串为DOM文档
      const parser = new DOMParser();
      const svgDom = parser.parseFromString(res.data, 'image/svg+xml');
      // 选中所有path标签，批量修改fill属性
      const allPaths = svgDom.querySelectorAll('path');
      allPaths.forEach(pathEl => {
        pathEl.setAttribute('fill', color);
      });
      // 将修改后的DOM转回SVG字符串
      const modifiedSvg = new XMLSerializer().serializeToString(svgDom);
      // 原有base64转码逻辑
      const base64data = btoa(unescape(encodeURIComponent(modifiedSvg)));

      setState(prevState => ({
        ...prevState,
        svgData: base64data
      }));
    }
  })

如果需要同时修改rect、circle、polygon、g等其他SVG标签的fill属性，只要修改querySelectorAll的选择器，传入需要匹配的标签名即可。

方案2：使用第三方npm包 #

如果项目需要兼容非浏览器环境（比如Node端预渲染），可以使用成熟的SVG/XML处理库：

• cheerio：提供类jQuery的DOM操作API，解析SVG字符串后可以直接用选择器语法选中元素修改属性，和原生DOM用法几乎一致
• svg-parser：专门针对SVG格式的解析库，会将SVG解析为结构化JSON数据，遍历修改对应节点的fill属性后，再序列化为字符串即可

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