Estoy tratando de llenar un círculo SVG que tiene un radio de 13,5. Y encontré un cálculo, pero al ingresar el valor como 100, solo está lleno a la mitad. Lo cual me cree que hay algo mal con la parte matemática. Poner el valor como 225 lo llena por completo. Y eso no es lo que se desea en absoluto.
SVG:
//Background of progress circle <circle r="13.5" cx="16" cy="16" fill="transparent" stroke="#9E9E9E" stroke-width="3" stroke-dasharray="84.82300164692441" stroke-dashoffset="28.27433388230813" /> </svg> //Progress circle <svg style={{ height: '32px', width: '32px', transform: 'rotate(150deg)' }}> <circle r="13.5" cx="16" cy="16" fill="transparent" stroke="#000" stroke-width="3" stroke-dasharray={dashArrayValue} stroke-dashoffset={dashOffsetValue} /> </svg>Código de cálculo
let value = 100 let radius = 13.5 let circumference = radius * 2 * Math.PI let percent = value * 100 / 220 let offset = circumference - ((-percent * 62) / 100) / 100 * circumference let convertedOffset = -offset setDashArrayValue(`${circumference}`) //${circumference} setDashOffsetValue(`${convertedOffset}`)Con suerte, alguien puede detectar la falla porque ciertamente no puedo ya que mis matemáticas son horribles.
Gracias.
Si es la matriz de guiones lo que intenta manipular, aquí hay algunos ejemplos. Puedes ver que solo estoy cambiando dos valores; la rotación del círculo (donde comenzará el trazo) y el primer valor en la matriz de guiones (la longitud del trazo). También agregué el atributo pathLength que controla la longitud total del trazo del círculo (en este caso, 360, pero también podría ser 100, lo que encaja mejor en su caso de uso).
<p>From 12 o'clock to 3 o'clock: <svg height="32px" width="32px"> <circle r="13.5" cx="16" cy="16" fill="transparent" stroke="#000" stroke-width="3" pathLength="360" stroke-dasharray="90 360" transform="rotate(-90 16 16)"/> </svg> </p> <p>From 12 o'clock to 6 o'clock: <svg height="32px" width="32px"> <circle r="13.5" cx="16" cy="16" fill="transparent" stroke="#000" stroke-width="3" pathLength="360" stroke-dasharray="180 360" transform="rotate(-90 16 16)"/> </svg> </p> <p>From 12 o'clock to 10 o'clock: <svg height="32px" width="32px"> <circle r="13.5" cx="16" cy="16" fill="transparent" stroke="#000" stroke-width="3" pathLength="360" stroke-dasharray="300 360" transform="rotate(-90 16 16)"/> </svg> </p> <p>From 6 o'clock to 10 o'clock: <svg height="32px" width="32px"> <circle r="13.5" cx="16" cy="16" fill="transparent" stroke="#000" stroke-width="3" pathLength="360" stroke-dasharray="120 360" transform="rotate(90 16 16)"/> </svg> </p>Y la versión interactiva:
document.forms.form01.number.addEventListener('change', e => { let number = e.target.value; document.getElementById('c1').attributes['stroke-dasharray'].value = `${number} 100`; }); <form name="form01"> <input name="number" type="range" value="50" min="0" max="100" /> </form> <p><svg height="32px" width="32px"> <circle id="c1" r="13.5" cx="16" cy="16" fill="transparent" stroke="#000" stroke-width="3" pathLength="100" stroke-dasharray="50 100" transform="rotate(-90 16 16)"/> </svg></p>