react-native-svg中SVG图标显示异常：stroke-width属性无效问题

云原生阿岚

2026-8-21

解决react-native-svg中stroke-width不生效的问题

针对你遇到的iOS模拟器中SVG线条stroke-width不生效、显示过细的问题，可尝试以下几种解决思路：

调整viewBox避免线条被裁剪
你的Line组件x1设为2，stroke-width为4时，线条会向左右各延伸2个单位，导致部分线条超出viewBox范围被裁剪，视觉上就会显得过细。修改viewBox为viewBox="-2 0 18 24"，给左右留出足够空间容纳完整的stroke：
```
<Svg width="14" height="24" viewBox="-2 0 18 24" fill="none">
  <Line x1="2" y1="0" x2="2" y2="24" stroke="#A0978E" stroke-width="4" />
  <Line x1="12" y1="0" x2="12" y2="24" stroke="#A0978E" stroke-width="4" />
</Svg>
```

用Rect组件替代Line组件
部分场景下react-native-svg的Line组件在iOS平台对stroke的渲染存在兼容性问题，换成Rect组件直接用fill实现实心块，可绕过stroke相关的渲染bug：

<Svg width="14" height="24" viewBox="0 0 14 24" fill="none">
  {/* 对应原第一条竖线，位置和宽度匹配原stroke范围 */}
  <Rect x="0" y="0" width="4" height="24" fill="#A0978E" />
  {/* 对应原第二条竖线，x=10保证整体宽度与原SVG一致 */}
  <Rect x="10" y="0" width="4" height="24" fill="#A0978E" />
</Svg>

升级react-native-svg版本
一些旧版本的react-native-svg在iOS平台存在stroke-width渲染的已知bug，尝试升级到最新稳定版：
```
npm install react-native-svg@latest
# 或使用yarn
yarn add react-native-svg@latest
```
添加stroke端点渲染属性
给Line组件添加strokeLinecap="square"属性，确保stroke的端点完整渲染，避免因端点截断导致视觉上的线条变细：
```
<Line x1="2" y1="0" x2="2" y2="24" stroke="#A0978E" stroke-width="4" strokeLinecap="square" />
```