React PDF Renderer中如何将SVG复选框与文本对齐？

云原生阿岚

2026-7-8

解决React PDF中SVG复选框与文本的对齐问题

核心问题分析

你当前的代码有两个关键问题导致对齐失败：

Flex容器仅设置了水平居中（justify-content: center），缺少垂直居中的配置
SVG内部的多边形位置偏移，且SVG容器尺寸与文本不匹配

修复步骤及代码调整

1. 完善Flex布局的垂直对齐

给包裹SVG和Text的View添加align-items: center，确保元素在垂直方向居中对齐：

<View style={{display: 'flex', justifyContent: 'flex-start', alignItems: 'center'}}>

（把justify-content改成flex-start更符合复选框+文本的常规排版，如果你需要整体水平居中可以保留center）

2. 修正SVG的坐标与尺寸

SVG的默认坐标系和viewBox会影响图形的显示位置，调整如下：

给Svg组件添加viewBox属性，明确坐标范围
调整Polygon的points，让复选框在SVG容器内居中显示
缩小SVG容器尺寸，匹配14号文本的高度

3. 优化文本的边距设置

把文本的margin:14改成仅左侧边距，避免上下边距干扰垂直对齐

修改后的完整代码

JSX部分：

<Document>
  <Page style={styles.body} size="A4">
    <View style={{display: 'flex', justifyContent: 'flex-start', alignItems: 'center'}}>
      <Svg style={styles.checkbox} viewBox="0 0 14 14">
        <Polygon style={styles.box} points="1,1 13,1 13,13 1,13" />
      </Svg>
      <Text style={styles.text}>
        some text
      </Text>
    </View>
  </Page>
</Document>

样式部分：

const styles = StyleSheet.create({
  text: {
    marginLeft: 8, // 仅保留左侧间距
    fontSize: 14,
    textAlign: "left",
    fontFamily: "Helvetica",
  },
  checkbox: {
    height: 14, // 匹配文本字号
    width: 14,
  },
  box: {
    fill: 'none', // 确保是空心框
    stroke:"black",
    strokeWidth: 1,
  },
});