Skip to main content
1 de 2
enxaneta
  • 3.9k
  • 3
  • 12
  • 21

Para dibujar este tipo de "chart" en SVG necesitas utilizar la propiedad `stroke-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.`

enxaneta
  • 3.9k
  • 3
  • 12
  • 21