React Native中如何让SVG Path适配SVG ViewBox？

你遇到的核心问题是对SVG的viewBox和缩放逻辑理解有误：

• 原始Feather图标是基于0 0 24 24的固定坐标系设计的，所有Path的坐标都是相对这个24x24的画布定义的。
• 你动态将viewBox设置为扫描框的实际宽高（比如0 0 300 200），但Path的坐标还是沿用了原始的固定数值（比如M6.13 1），这些数值在新的坐标系里只是很小的一部分，自然无法撑满SVG容器。

最简单的修复方式是保留原始图标固定的viewBox，通过SVG的width和height属性控制整体缩放，让内部Path自动跟随容器尺寸适配。

修改后的代码 #

import * as React from "react";
import Svg, { SvgProps, Path } from "react-native-svg";

export const ViewFinder = (props: SvgProps & { top: number; left: number }) => {
  const { width, height, top, left } = props;
  return (
    <Svg
      width={width}
      height={height}
      style={{
        borderColor: "green",
        borderWidth: 2,
        position: "absolute",
        left: left,
        top: top,
      }}
      fill="none"
      stroke="green"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      preserveAspectRatio="none" // 若需要完全拉伸适配扫描框，用none；要保持图标比例则用"xMidYMid meet"
      viewBox="0 0 24 24" // 固定原始图标坐标系
    >
      <Path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></Path>
      <Path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></Path>
    </Svg>
  );
};

关键调整说明 #

1. 固定viewBox为原始值：让Path的坐标始终基于24x24的逻辑画布，SVG的width和height负责将整个画布缩放到扫描框的实际尺寸，内部Path会自动按比例缩放。
2. 移除style中的宽高百分比：避免覆盖传入的width和height属性，确保SVG尺寸完全匹配扫描框的bounds。
3. 补全图标样式属性：加上原始Feather图标自带的strokeWidth、strokeLinecap、strokeLinejoin，保证显示效果和原图标一致。

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