如何实现半圆形SVG的两端圆角效果

你只需要给两个<circle>元素添加stroke-linecap="round"属性即可实现描边端点的圆角效果，这个属性是SVG原生提供的描边端点样式控制属性，除了round（圆角）外还有butt（默认直角）、square（方头延伸）可选。

修改后的完整SVG代码如下：

<svg width="200" height="100" style="transform: rotateY(180deg); overflow: hidden;">
  <circle cx="100" cy="100" r="90" fill="none" stroke="#D0D0CE" stroke-width="10"
    stroke-dasharray="282.74" stroke-linecap="round" style="stroke-dashoffset: 282.74;"></circle>
  <circle
    cx="100" cy="100" r="90" fill="none" stroke="#FFFFFF" stroke-width="10"
    stroke-dasharray="282.7433388230814" stroke-linecap="round" style="stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s;">
  </circle>
</svg>

补充说明 #

• 如果你发现圆角端点出现裁切，可以适当调大SVG的width、height属性，同时调整cx、cy坐标避免溢出裁切
• stroke-linecap属性的圆角半径和描边宽度自动匹配，不需要额外设置参数

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