React-PDF使用三元条件渲染<Svg>组件时出现错误

问题背景 #

<MyHeaderSvg>组件直接在React-PDF的<Document>/<Page>组件树中渲染完全正常，但放到<View>的render回调内，通过pageNumber三元判断（第一页渲染SVG，其他页渲染<NonSvgHeader>）时，会触发各种解析错误。测试发现：字符串格式的数值属性、<Text>元素、<G>的字符串transform属性都是报错诱因。

具体修复步骤 #

1. 转换SVG属性为React-PDF兼容格式 #

React-PDF在动态渲染场景下，对字符串类型的数值/变换属性解析存在问题，需要手动转换：

• 将带单位的坐标属性从字符串改为纯数值：

  // 原错误写法
  <Text x={`${535-20}px`} y="50%">Some title</Text>
  // 修复后（y的50%对应SVG高度的一半，这里SVG高度80，所以y=40）
  <Text x={535-20} y={40} style={styles.title}>Some title</Text>
  

• 将<G>的字符串transform拆分为单独的数值属性：

  // 原错误写法
  <G transform="translate(20,21) scale(0.749 0.749)">...</G>
  // 修复后
  <G translateX={20} translateY={21} scaleX={0.749} scaleY={0.749}>...</G>
  

2. 替换SVG内的<Text>为React-PDF原生组件 #

React-PDF的SVG模块对<Svg>内部的<Text>支持有限，动态渲染时极易报错，直接改用React-PDF的原生<Text>组件，通过绝对定位对齐到SVG对应位置：

// 原写法（SVG内嵌套Text）
<Svg width="555" height="80">
  <Text style={styles.title} x={515} y={40}>Some title</Text>
  {/* 其他SVG元素 */}
</Svg>

// 修复后（Text独立于SVG，用定位对齐）
<View style={{ position: 'absolute', width: 555, height: 80 }}>
  <Svg width="555" height="80">
    {/* 其他SVG元素（Rect、G等） */}
  </Svg>
  <Text style={{ ...styles.title, position: 'absolute', right: 20, top: '50%', transform: 'translateY(-50%)' }}>
    Some title
  </Text>
</View>

3. 避免Defs资源ID冲突 #

如果<Defs>内定义了渐变、滤镜等资源，动态渲染时要给每个页面的资源分配唯一ID，防止跨页ID冲突：

<Svg width="555" height="80">
  <Defs>
    <LinearGradient id={`header-rectangle-${pageNumber}`} x1="0%" y1="0%" x2="100%" y2="0%">
      <Stop offset="0%" stopColor="#4A90E2" />
      <Stop offset="100%" stopColor="#2962FF" />
    </LinearGradient>
  </Defs>
  <Rect width="100%" height="80" rx={8} ry={8} fill={`url(#header-rectangle-${pageNumber})`} />
</Svg>

4. 改用Page的header属性实现条件渲染 #

React-PDF对<Page>的header/footer属性有专门的渲染优化，比在<View>内动态渲染更稳定：

<Document>
  <Page
    size="A4"
    header={({ pageNumber }) => (
      pageNumber === 1 ? <MyFixedHeaderSvg /> : <NonSvgHeader />
    )}
    margin={{ top: 100 }} // 留出头部空间
  >
    {/* 页面主体内容 */}
  </Page>
</Document>

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