react-native-svg@12.1.0 外部URI加载SVG渲染异常（浏览器正常）

当前问题场景 #

• 项目为Vue/React Native混合架构，使用react-native-svg@12.1.0实现SVG渲染
• 待渲染SVG文件由Adobe工具导出，文件内部嵌入了CSS样式代码
• 加载方式为通过外部Uri动态拉取SVG资源，而非本地静态打包引用
• 异常表现：同一SVG资源在浏览器端可正常渲染，RN端出现样式丢失、元素错位问题，与预期渲染效果不符

现有实现代码 #

<svg-css-uri
    :key="'image_' + selectedItem.id"
    :height="200"
    :uri="selectedItem.picture.url"
></svg-css-uri>
</view>

mystyle: {
  marginLeft: 25,
  flex: 0.5,
  justifyContent: "center",
}

核心根因与排查方向 #

关于react-native-svg的CSS支持范围 #

react-native-svg@12.1.0 并不兼容浏览器环境下SVG支持的全部CSS语法，二者渲染逻辑的差异是本次异常的核心诱因，具体不兼容点包括：

• 不支持SVG内部<style>标签中定义的类选择器、属性选择器的级联匹配逻辑，仅能识别直接写在SVG元素属性上的内联样式
• 完全不支持CSS伪类、伪元素、外部样式表引用类的写法
• 对Adobe导出SVG常用的style属性内CSS简写（比如带透明度的fill值、字重类简写属性）解析存在缺陷
• 对通过CSS规则定义的渐变、遮罩、裁剪路径的引用逻辑支持不完整，易出现样式丢失、元素布局错位

动态Uri加载的额外影响 #

• 动态拉取SVG资源时，如果项目封装的svg-css-uri组件未对拉取到的原始SVG字符串做兼容预处理，会直接将带内嵌CSS的源码传入Svg组件，放大上述兼容问题
• 可先确认拉取到的SVG源码完整性，排除资源拉取截断、不完整的问题

可落地的解决方向 #

• 调整Adobe导出SVG的配置：导出时选择「内联样式」选项，关闭「导出CSS类名、外部样式」的开关，从源文件层面减少内嵌CSS代码量
• 升级react-native-svg到最新稳定版本，新版本已对SVG内CSS语法的兼容逻辑做了大量补全
• 增加SVG字符串预处理环节：拉取到SVG源码后，将样式表中定义的类规则直接映射到对应元素的内联属性上，再传入Svg组件渲染

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