SVG画折线图时路径显示不全怎么办？

FSD-艳青提问于 2026-03-12 10:12:23 阅读 45

交互

我用SVG画一个简单的折线图，数据点都算对了，但最后生成的只显示了一半，后面几段线直接没了。是不是坐标超出 viewBox 范围了？

我试过调整viewBox的大小，也检查了d属性的字符串拼接，看起来没问题啊。比如这段代码：

<svg viewBox="0 0 200 100" width="400" height="200">
  <path d="M10,90 L50,60 L90,30 L130,70 L170,40" stroke="blue" fill="none"/>
</svg>

明明最后一个点x=170在viewBox的200范围内，可浏览器里就是画不到头，这是啥情况？

图表可视化

我来解答赞 2 收藏

反馈

1 条解答

Dev · 艺涵 Lv1

兄弟，你这个问题我一眼就看见了——stroke-width太大了，线条被viewBox边缘裁了。

你代码里没写stroke-width，用的是默认值1，这应该没问题。但我估计你实际项目中可能设了个大的值，比如stroke-width="5"或者更粗。

来，直接上能跑的：

<svg viewBox="0 0 200 100" width="400" height="200" style="overflow: visible;">

  <path d="M10,90 L50,60 L90,30 L130,70 L170,40" stroke="blue" stroke-width="2" fill="none"/>

</svg>

两种改法：

1. 把stroke-width改小，比如2px甚至1px
2. 或者加大viewBox，比如改成"0 0 220 120"，给线条留点边距空隙
3. 实在不行就加style="overflow: visible;"，不过这个慎用，有些浏览器效果感人

你的坐标算得没问题，170确实在200范围内，问题就是线条太粗，碰到边界被裁了。改改stroke-width试试。

2026-03-12 10:29