React Native中Svg高度与父View高度不匹配问题

差异由SVG默认的描边绘制逻辑导致：

• SVG中Line等路径元素的描边默认是居中覆盖在路径线上的，即描边宽度会平均拆分到路径的两侧，而非全部画在路径的某一边。
• 示例代码里Line的路径坐标为(0,0)到(100,0)，整条直线刚好落在Svg画布的最顶部边界（y=0位置）。设置strokeWidth=10时，10px的描边会有5px分布在路径上方（y<0的画布外区域，会被直接裁剪不显示），仅剩下5px分布在路径下方的画布可视区域内，自然无法填满10px高度的父容器。
• 目前react-native-svg不支持描边内/外对齐的属性（该属性本身也未成为正式SVG标准，各端兼容性极差），无法直接修改描边的对齐规则。

调整Line的纵向坐标，让直线路径落在Svg画布的垂直居中位置，保证10px的描边全部落在画布可视范围内即可：

// 将Line的y1、y2值从0修改为height/2（即5）
<Line x1="0" y1={height/2} x2={width} y2={height/2} stroke="red" strokeWidth={height} />

修改后描边会从y=0延伸到y=10的位置，刚好和10px高度的父View完全对齐，不会出现半高裁剪问题。

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import {Svg, Line} from 'react-native-svg';

export default function App() {
  const width = 100;
  const height = 10;
  return (
    <View style={styles.container}>
      <View style={{ width, height, borderWidth: 1 }}>
        <Svg width={width} height={height}>
          <Line x1="0" y1="0" x2={width} y2="0" stroke="red" strokeWidth={height} />
        </Svg>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

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