如何为SVG路径半圆形指定角添加圆角（不使用stroke-linecap: round）

如果不想用全局生效的stroke-linecap: round，仅给指定角添加圆角，可以选择以下两种方案：

方案1：裁剪法（改动最小，适合单侧圆角需求） #

思路是先给路径开启圆角端点，再通过裁剪路径剪掉不需要圆角的一侧多余圆弧，代码示例如下：

<svg viewBox="0 0 200 200">
  <!-- 定义裁剪路径，裁掉左端点超出的圆角部分 -->
  <clipPath id="clipLeft">
    <rect x="29" y="0" width="200" height="200" />
  </clipPath>
  <g>
    <!--background -->
    <path fill="none" stroke-width="16" stroke="#607985" d="M30 100 A 40 40 0 0 1 170 100"></path>
    <!-- strokes -->
    <path id="meter-back" fill="none" stroke-width="15" stroke="white" d="M30 100 A 40 40 0 0 1 170 100"></path>
    <!--progress 仅右端保留圆角，左端裁剪 -->
    <path id="meter-fill" 
          clip-path="url(#clipLeft)"
          stroke-linecap="round"
          fill="none" 
          stroke-dashoffset="219.942" 
          stroke-dasharray="109.971, 109.971" 
          stroke="rgba(96,121,133,0.7)" 
          stroke-width="15" 
          d="M30 100 A 40 40 0 0 1 170 100" 
          stroke="#607985"></path>
  </g>
</svg>

你可以调整裁剪路径的坐标和范围，灵活选择保留哪一侧的圆角。

方案2：自定义填充路径（灵活度最高，支持任意角自定义圆角） #

如果需要控制多个位置的圆角，建议放弃用描边实现进度条，直接绘制闭合的填充路径，手动在需要的位置添加圆角圆弧，完全自定义每个角的效果。
比如要给进度条右端的内外两个角加7.5px圆角，可以这么写路径：

<svg viewBox="0 0 200 200">
  <g>
    <!--background -->
    <path fill="none" stroke-width="16" stroke="#607985" d="M30 100 A 40 40 0 0 1 170 100"></path>
    <!-- strokes -->
    <path id="meter-back" fill="none" stroke-width="15" stroke="white" d="M30 100 A 40 40 0 0 1 170 100"></path>
    <!-- 自定义填充的进度条，右端两个角加7.5px圆角 -->
    <path d="M30 92.5 A 32.5 32.5 0 0 1 162.5 92.5 
             A 7.5 7.5 0 0 0 162.5 107.5
             A 47.5 47.5 0 0 0 30 107.5 Z" 
          fill="#607985"/>
  </g>
</svg>

这种方式可以完全按需给任意角加圆角，不会影响其他位置的样式。

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