如何在半圆形 SVG 中创建圆角答案

【问题标题】：How to create rounded corners in semi circle SVG如何在半圆形 SVG 中创建圆角
【发布时间】：2021-11-17 22:43:07
【问题描述】：

我有这个半圆的 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" style="stroke-dashoffset: 282.74;"></circle><circle 
    cx="100" cy="100" r="90" fill="none" stroke="#FFFFFF" stroke-width="10" stroke- 
    dasharray="282.7433388230814" style="stroke-dashoffset: 0; transition: stroke- 
    dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s;">. 
  </circle>
</svg>

看起来像这样：

但是，我希望半圆的角是圆形的，就像这里：

我怎样才能做到这一点？

【问题讨论】：

标签： css svg css-shapes

【解决方案1】：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="103px" viewBox="0 0 200 103" enable-background="new 0 0 200 103" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="8.774" stroke-linecap="round" stroke-miterlimit="10" d="M195.675,98.851
    c0-52.17-42.822-94.463-95.644-94.463c-52.823,0-95.644,42.293-95.644,94.463"/>
</svg>

【讨论】：

解释而不是代码转储对所有人都有帮助
我决定粘贴以另一种方式定义的 SVG，以便可以看到 'stroke-linecap="round"' 完成了这项工作。