如何让SVG路径曲线在大stroke-width下保持平滑清晰？

问题原因 #

你遇到的问题核心有两点：

• 曲线参数过小：原路径里的圆弧半径仅为1，二次贝塞尔曲线的控制点与端点距离极近，当stroke-width增大到10时，宽描边会直接覆盖这些细微曲线，导致视觉上消失。
• 描边超出视口：SVG描边默认是居中绘制的，原路径距离SVG边缘仅5px，当stroke-width=10时，一半描边会超出视口被裁剪，进一步加剧曲线消失的问题。

修改后的代码 #

.box {
  height: 200px;
  width: 400px;
}

<div class="box">
  <svg height="100%" width="100%" viewBox="0 0 400 200">
    <path d="M 10 10  
             H 390
             Q 400 10 400 20     <!-- 右上角圆角 -->
             V 80
             Q 400 90 390 100    <!-- 右上部过渡圆角 -->
             A 30 30 0 0 0 390 140 <!-- 中间圆弧，半径30 -->
             Q 400 150 400 160   <!-- 右下部过渡圆角 -->
             V 180
             Q 400 190 390 190   <!-- 右下角圆角 -->
             H 10
             Q 0 190 0 180       <!-- 左下角圆角 -->
             V 20
             Q 0 10 10 10        <!-- 左上角圆角 -->
             Z" 
          stroke="red" 
          stroke-linejoin="round" 
          fill="none" 
          stroke-width="10" />
  </svg>
</div>

关键调整说明 #

• 路径内移：将起点从(5,0)改为(10,10)，确保描边（宽度10，居中绘制）不会超出SVG视口边缘。
• 增大曲线参数：把原圆弧半径从1改为30，二次贝塞尔曲线的控制点距离端点调整为10，保证宽描边下曲线依然清晰可见。
• 优化描边属性：将stroke-linecap="round"改为stroke-linejoin="round"，让路径拐角处的描边更平滑（linecap用于开放路径的端点，linejoin用于路径拐角）。
• 规范闭合路径：用Z命令代替重复的起点，让路径闭合逻辑更清晰。

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