React Native中使用react-native-svg渲染SVG显示空白如何解决

渲染空白由三个核心问题导致：

• SvgCss组件对SVG内联@font-face、CSS keyframes动画、多层嵌套SVG的兼容度极低，无法解析base64格式内嵌字体，会直接导致渲染失败
• 根SVG节点设置的viewBox为0 0 100 100，但内部文字的x坐标为500、嵌套SVG的y偏移为525，所有可见内容完全落在可视区域外，即使渲染成功也看不到内容
• 高版本react-native-svg已经不再推荐使用SvgCss渲染字符串格式SVG，该组件存在大量未修复的样式解析bug

按以下步骤调整即可正常渲染：

1. 替换渲染组件：将SvgCss替换为官方专门用于渲染字符串SVG的SvgXml组件，兼容度远高于旧组件
2. 调整视口配置：修改根SVG的viewBox尺寸覆盖内容的坐标范围，建议设置为0 0 1000 700，宽高设为100%自适应父容器
3. 移除不兼容特性：
   • 删掉SVG内联style里的@font-facebase64字体声明，react-native-svg不支持解析SVG内嵌字体，需要使用自定义字体的话，提前将字体包集成到React Native原生项目，配置好字体名后直接在样式中通过fontFamily引用
   • 删掉SVG内的keyframes动画配置，该类CSS动画在RN端无法生效，需要动画效果可以用React Native自带的AnimatedAPI或者react-native-reanimated实现
4. 修正元素坐标：调整内部嵌套SVG的y偏移值，确保所有文字、图形元素都落在viewBox可视范围内

import * as React from 'react';
import { SvgXml } from 'react-native-svg';

export default function SvgComponent(props) {
  const xml = `<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1000 700'>
    <style>
      .bg { fill: whitesmoke; width: 100%; height: 100%; }
      tspan { fill: black; font-size: 70px; text-transform: uppercase; text-anchor: middle; }
    </style>
    <rect class='bg' />
    <!-- 调整y偏移到可视区域内 -->
    <svg y='300' overflow='visible'>
      <text>
        <tspan x='500'>inoculate the soul</tspan>
      </text>
      <text y='90'>
        <tspan x='500'>------------------</tspan>
      </text>
    </svg>
  </svg>`

  return <SvgXml xml={xml} width="100%" height="100%" />;
}

• 如果SVG字符串是从后端接口动态获取，渲染前建议校验viewBox和内部元素坐标的匹配度，避免内容偏移到可视区外
• 简单的SVG样式（fill、基础字体属性、透明度）可以直接写在SVG内联style中，复杂效果尽量通过react-native-svg提供的属性单独设置，兼容性更好

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