React Native中使用SVG文件遇SVGR警告：filter元素被丢弃，效果不符预期

一、React Native里用SVG的常规操作 #

1. 先装依赖
   打开终端跑命令：

   npm install react-native-svg
   # 或者用yarn
   yarn add react-native-svg
   

2. 两种导入SVG的方式
   • 转成React组件用：用SVGR工具（在线版或本地CLI均可）把SVG文件转成React组件代码，直接复制到项目里当成普通组件导入使用。
   • 直接导入SVG文件：需要配置metro解析规则：
     先装转换工具：

     npm install react-native-svg-transformer --save-dev
     

     然后修改项目根目录的metro.config.js：

     const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
     const config = {};
     module.exports = mergeConfig(getDefaultConfig(__dirname), {
       resolver: {
         assetExts: getDefaultConfig(__dirname).resolver.assetExts.filter(ext => ext !== 'svg'),
         sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'svg'],
       },
       transformer: {
         babelTransformerPath: require.resolve('react-native-svg-transformer'),
       },
     });
     

     之后就能直接导入SVG文件当组件用：

     import MySvg from './my.svg';
     // 渲染
     <MySvg width={200} height={200} />
     

二、解决SVGR提示filter不支持的问题 #

你碰到的SVGR has dropped some elements not supported by react-native-svg: filter警告，核心原因是react-native-svg目前不支持SVG原生的<filter>标签及部分复杂滤镜属性，给你几个实用解决办法：

1. 手动替换filter效果为RN支持的属性 #

如果filter是做阴影这类简单效果，直接用RN的阴影样式或者react-native-svg的Shadow组件代替：
比如原SVG里带filter的矩形：

<filter id="dropShadow">...</filter>
<rect filter="url(#dropShadow)" x="10" y="10" width="100" height="100" fill="#fff" />

改成RN适配的代码：

import { Svg, Rect } from 'react-native-svg';

<Svg width={120} height={120}>
  <Rect
    x={10}
    y={10}
    width={100}
    height={100}
    fill="#fff"
    style={{
      shadowColor: '#000',
      shadowOffset: { width: 2, height: 2 },
      shadowOpacity: 0.5,
      shadowRadius: 3,
      // Android用elevation
      elevation: 3
    }}
  />
</Svg>

2. 预处理SVG，删掉不兼容的filter元素 #

用Figma、AI或者在线SVG编辑器打开原SVG，直接删掉<filter>相关的代码，或者把滤镜效果转成矢量图形（比如把阴影转成单独的形状层），再导出干净的SVG，之后再用SVGR转换就不会有警告了。

3. 用react-native-svg支持的基础滤镜组件（进阶） #

如果必须用滤镜，试试react-native-svg提供的Defs+Filter组合，只支持部分基础滤镜，比如高斯模糊+偏移的阴影：

import { Svg, Rect, Defs, Filter, FeGaussianBlur, FeOffset, FeMerge, FeMergeNode } from 'react-native-svg';

<Svg width={120} height={120}>
  <Defs>
    <Filter id="customShadow">
      <FeOffset dx={2} dy={2} />
      <FeGaussianBlur stdDeviation={3} result="blur" />
      <FeMerge>
        <FeMergeNode in="blur" />
        <FeMergeNode in="SourceGraphic" />
      </FeMerge>
    </Filter>
  </Defs>
  <Rect
    x={10}
    y={10}
    width={100}
    height={100}
    fill="#fff"
    filter="url(#customShadow)"
  />
</Svg>

注意：提前确认react-native-svg支持的滤镜元素，别用不兼容的属性。

三、排查显示效果不符的问题 #

除了filter的锅，显示不对还可能是这些原因：

• viewBox属性不对：转成组件后检查viewBox值和原SVG是否一致，或者给Svg组件手动设置width/height
• 颜色/路径转换错误：看看转成的组件里fill、stroke这些属性和原SVG是否匹配，SVGR可能会把十六进制颜色转成RGB，确认下有没有偏差
• 布局挤压：把SVG组件放在合适的容器里，设置flex或者固定尺寸，避免被父容器拉伸变形

内容的提问来源于stack exchange，提问作者Phạm Huy Hoàng