React Native SVG Transformer无法通过replaceAttrValues修改SVG颜色

我用react-native-svg-transformer和react-native-svg尝试给SVG批量替换颜色，但完全没效果。修改甚至删除.svgrrc文件都没有任何变化，怀疑这个配置文件没被系统识别。我已经严格按照react-native-svg-transformer的文档配置了metro.config.js，但问题依旧。

问题相关代码 #

目标SVG文件（SVGBoard.svg） #

<svg width="5988" height="4684" viewBox="0 0 5988 4684" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="5988" height="4684" fill="#f01"/>
<rect x="3144" y="200" width="2644" height="4284" fill="#000"/>
<path d="M3174 200H3593L3383.5 1895.5L3174 200Z" fill="#f01"/>
<path d="M3607 200H4026L3816.5 1895.5L3607 200Z" fill="#ff1"/>
<path d="M4040 200H4459L4249.5 1895.5L4040 200Z" fill="#f01"/>
<path d="M4473 200H4892L4682.5 1895.5L4473 200Z" fill="#ff1"/>
<path d="M4906 200H5325L5115.5 1895.5L4906 200Z" fill="#f01"/>
<path d="M5339 200H5758L5548.5 1895.5L5339 200Z" fill="#ff1"/>
<path d="M3593 4483.5H3174L3383.5 2788L3593 4483.5Z" fill="#f01"/>
<path d="M4026 4483.5H3607L3816.5 2788L4026 4483.5Z" fill="#ff1"/>
<path d="M4459 4483.5H4040L4249.5 2788L4459 4483.5Z" fill="#f01"/>
<path d="M4892 4483.5H4473L4682.5 2788L4892 4483.5Z" fill="#ff1"/>
<path d="M5325 4483.5H4906L5115.5 2788L5325 4483.5Z" fill="#f01"/>
<path d="M5758 4483.5H5339L5548.5 2788L5758 4483.5Z" fill="#ff1"/>
<rect x="200" y="200" width="2644" height="4284" fill="#000"/>
<path d="M230 200H649L439.5 1895.5L230 200Z" fill="#f01"/>
<path d="M663 200H1082L872.5 1895.5L663 200Z" fill="#ff1"/>
<path d="M1096 200H1515L1305.5 1895.5L1096 200Z" fill="#f01"/>
<path d="M1529 200H1948L1738.5 1895.5L1529 200Z" fill="#ff1"/>
<path d="M1962 200H2381L2171.5 1895.5L1962 200Z" fill="#f01"/>
<path d="M2395 200H2814L2604.5 1895.5L2395 200Z" fill="#ff1"/>
<path d="M649 4483.5H230L439.5 2788L649 4483.5Z" fill="#f01"/>
<path d="M1082 4483.5H663L872.5 2788L1082 4483.5Z" fill="#ff1"/>
<path d="M1515 4483.5H1096L1305.5 2788L1515 4483.5Z" fill="#f01"/>
<path d="M1948 4483.5H1529L1738.5 2788L1948 4483.5Z" fill="#ff1"/>
<path d="M2381 4483.5H1962L2171.5 2788L2381 4483.5Z" fill="#f01"/>
<path d="M2814 4483.5H2395L2604.5 2788L2814 4483.5Z" fill="#ff1"/>
</svg>

组件调用代码 #

<SVGBoard width={300} height={300} primary='#5A391A' secondary='#FFFFFF' tertiary='#000000' quaternary='#6CC6BB'/>

.svgrrc 配置文件 #

{
  "replaceAttrValues": {
    "#000": "{props.primary}",
    "#f01": "{props.secondary}",
    "#ff1": "{props.tertiary}",
    "#f00": "{props.quaternary}"
  }
}

对比案例（可正常生效） #

简单SVG文件（Triangle.svg） #

<svg width="40" height="100" viewBox="0 0 40 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0L40 100H0L20 0Z" fill="#000"/>
</svg>

组件调用代码 #

<Triangle fill='green'/>

这个简单SVG可以正常将填充色替换为green。

排查与解决方法 #

1. 直接在metro.config.js中配置SVGR选项
   部分版本的react-native-svg-transformer不会自动读取外部.svgrrc，可以把配置直接写进metro.config.js：

   const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
   const svgTransformer = require('react-native-svg-transformer');
   
   const config = {
     transformer: {
       babelTransformerPath: require.resolve('react-native-svg-transformer'),
       svgr: {
         replaceAttrValues: {
           "#000": "{props.primary}",
           "#f01": "{props.secondary}",
           "#ff1": "{props.tertiary}",
           "#f00": "{props.quaternary}"
         }
       }
     },
     resolver: {
       assetExts: getDefaultConfig(__dirname).resolver.assetExts.filter(ext => ext !== 'svg'),
       sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'svg'],
     },
   };
   
   module.exports = mergeConfig(getDefaultConfig(__dirname), config);
   

2. 检查颜色值匹配度
   确认SVG中的颜色值和配置里的完全一致（注意大小写，比如#F01和#f01会被视为不同值）。另外你的目标SVG里没有#f00，所以quaternary属性本来就不会生效。

3. 清除缓存重启Metro
   执行命令清除缓存，再重启服务：

   npx react-native start --reset-cache
   

4. 重命名.svgrrc为.svgrrc.js
   改成JS格式的配置文件，避免JSON格式识别问题：

   module.exports = {
     replaceAttrValues: {
       "#000": "{props.primary}",
       "#f01": "{props.secondary}",
       "#ff1": "{props.tertiary}",
       "#f00": "{props.quaternary}"
     }
   };
   

5. 核对依赖版本兼容性
   确保react-native-svg、react-native-svg-transformer和你的React Native版本匹配，版本不兼容可能导致配置失效。

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