css - 如何在半圆形 SVG 中创建圆角

Question

我有这个半圆的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>

看起来像这样：

但是，我希望半圆的角是圆形的，如下所示：

我怎样才能做到这一点？

标签： csssvgcss-shapes

Answer 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>