Closed. This question needs to be more
CodePudding user response：
To Need a smooth edge at the end of circle drawed
<circle
strokeDashoffset="85"
stroke-linecap="round"
stroke-width="8"
r="45"
cx="50"
cy="50"
/>
The important property here is
stroke-linecap="round"
CodePudding user response：
I can see that you are doing some kind of "meter". In this case a <path> could be a good option. You can see the value "85" is the first value in the stroke-dasharray. So, this is the only value that you need to change except from the text in <text>.
<svg viewBox="0 0 100 100" width="200" height="200">
<circle cx="50" cy="50" r="45" fill="none" stroke-width="8" stroke="LightYellow" />
<path pathLength="100" d="M50 5 a 45 45 0 1 0 1 0"
stroke="orange" fill="none" stroke-width="8"
stroke-linecap ="round" stroke-dasharray="85 100"
stroke-dashoffset="0"/>
<text x="50" y="50" dominant-baseline="middle" text-anchor="middle"
font-family="sans-serif" font-weight="bold" font-size="20"
fill="orange">85%</text>
</svg>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
