react-native-svg中Path无法填满SVG整个高度的解决方法

上下留白是因为SVG的坐标系范围和Path的实际绘制边界不匹配：你只给SVG设置了固定宽高，但没有配置和路径边界对齐的viewBox，路径在默认坐标系里垂直方向没有占满整个高度范围，自然就会露出你设置的红色背景留白。另外2px的描边是居中沿路径绘制的，如果viewBox计算时没把描边占的空间算进去，要么会留空要么会裁掉描边边缘。

• 等Path渲染完成后，通过ref拿到Path实例，调用getBBox()方法获取路径的最小包围盒数据，返回值包含路径自身的x、y偏移、宽度、高度四个核心尺寸。
• 给SVG设置viewBox属性，计算时把描边宽度纳入考量，避免描边裁切或留空：垂直方向的起始值为bbox.y - strokeWidth/2，总高度为bbox.height + strokeWidth，水平方向直接用bbox.x和bbox.width即可，这样水平、垂直方向都刚好把路径和描边完整包裹。
• 给SVG添加preserveAspectRatio="none"属性，让路径可以非等比拉伸，完全填满你设置的SVG宽高；如果不想路径变形，可以把这个属性值改成xMidYMid slice，会等比缩放路径直到撑满SVG，超出部分自动裁切，不会有拉伸畸变。

import { useEffect, useRef, useState } from 'react';
// 如果你是web环境直接使用原生svg/path标签即可，不需要引入下面的依赖
import { Svg, Path } from 'react-native-svg';

const STROKE_WIDTH = 2;
function Chart({ chartWidth, CHART_HEIGHT, data, color }) {
  const pathRef = useRef(null);
  const [viewBox, setViewBox] = useState('0 0 1 1');

  useEffect(() => {
    if (!pathRef.current) return;
    const bbox = pathRef.current.getBBox();
    setViewBox(
      `${bbox.x} ${bbox.y - STROKE_WIDTH / 2} ${bbox.width} ${bbox.height + STROKE_WIDTH}`
    );
  }, [data]);

  return (
    <Svg
      id="chart"
      width={chartWidth}
      height={CHART_HEIGHT}
      viewBox={viewBox}
      preserveAspectRatio="none"
      style={{ backgroundColor: 'red' }}
    >
      <Path
        ref={pathRef}
        d={data}
        fill="transparent"
        stroke={color}
        strokeWidth={STROKE_WIDTH}
      />
    </Svg>
  );
}

补充优化：如果你的路径d属性数据是预计算生成的，也可以在生成坐标阶段直接把垂直方向的数值归一化到0 ~ CHART_HEIGHT区间，不需要运行时调用getBBox计算，渲染性能会更好。

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