Incorrect progress percentage about progress HOT 4 CLOSED

I think this maybe because https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

from progress.

Different strokeLinecap has a different start point and end point.

from progress.

Yes, different strokeLinecap has a different start point and end point. And it leads to incorrect calculation of the progress bar length. This is the rendering result in the browser of my example above:

<svg class="rc-progress-line" viewBox="0 0 100 10" preserveAspectRatio="none">
    <path class="rc-progress-line-trail"
        d="M 5,5  L 95,5" stroke-linecap="round"
        stroke="rgba(255,255,255, .4)" stroke-width="10" fill-opacity="0"></path>
    <path class="rc-progress-line-path"
        d="M 5,5  L 95,5" stroke-linecap="round"
        stroke="#FFE68D" stroke-width="10" fill-opacity="0" style="stroke-dasharray: 90px, 100px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s linear 0s, 0.06s;"></path>
</svg>

The length of rc-progress-line-path is 90(d="M 5,5 L 95,5", 95 - 5), so it will reach full state at stroke-dasharray: 90px, 100px;.

This bug can fix in two ways:

1. svg viewBox="0 0 ${100 + strokeWidth} 10", path d="M ${strokeWidth / 2},5 L ${100 + strokeWidth / 2},5", in this way, path's length is corrected to 100;
2. Recalculate the length of rc-progress-line-path, It should be equal to stroke-dasharray: ${percent * (100 - strokeWidth) / 100 }px, 100px;

from progress.

PR welcome~

from progress.