SOURCE

let circle = document.getElementsByTagName('circle')[1];

let perimeter = 2 * Math.PI * 50;
let percent = 0.9;
circle.setAttribute('stroke-dasharray', percent * perimeter + ' ' + (1 - percent) * perimeter)

<svg class="svg" width="200" height="200" viewport="0 0 200 200">
    <circle cx="100" cy="100" r="50" stroke="#D1D3D7" stroke-width="10" fill="none"></circle>
    <!-- matrix太难了 -->
    <!-- <circle class="test" transform="matrix(0,-1,1,0,0,200)" cx="100" cy="100" r="50" stroke="red" stroke-width="10" fill="none" stroke-dasharray="0 2900"></circle> -->
    <circle class="test" transform="rotate(-90)" transform-origin="center"  cx="100" cy="100" r="50" stroke="red" stroke-width="10" fill="none" stroke-dasharray="0 2900"></circle>
</svg>

/* .test {
    transform: rotate(-90deg);
    transform-origin: center;
} */