Para dibujar este tipo de "chart" en SVG necesitas utilizar la propiedad `stroke-dasharraystroke-dasharray
.
// calcula el perimetro del circulo #test
let perimetro = 50 * 2 * Math.PI;
let _input = document.querySelector("[type='range']");
_input.addEventListener("input",()=>{
dibujar_chart();
})
window.addEventListener("load",()=>{
dibujar_chart();
})
function dibujar_chart(){
let valor = Number(_input.value);
let dash = perimetro * valor / 360;
let espacio = perimetro - dash;
test.style.strokeDasharray = dash + " " + espacio
}
svg{width:100vh; display:block;margin:0 auto; background:#258dd9;
transform:rotate(-90deg)}
div{
position:relative;
bottom:2em;
width:90vh;
height:1em;
margin:0 auto;
}
[type="range"]{display:block;width:100%;}
#test{stroke-dasharray: 100 300;
}
<svg viewBox="0 0 200 200">
<circle id="centro" cx="100" cy="100" r="30" fill="#94c7ec"></circle>
<circle id="borde" cx="100" cy="100" r="50" stroke-width="14" stroke="#94c7ec" fill="none"></circle>
<circle id="test" cx="100" cy="100" r="50" stroke-width="8" stroke="#fff" fill="none" ></circle>
</svg>
<div><input type="range" min="0" max = "360" value="45" /></div>
Espero que sea lo que necesitas.`Por favor lea más acerca de cómo dibujar línea discontinuas en SVG con stroke-dasharray
: Dibujar líneas