Lo primero, un poco de trigonometría (cortesía de Paul Dixon): para obtener el punto dentro de una circunferencia a partir de cierto ángulo, debes aplicar la siguiente fórmula:
x = cx + r * cos(a)
y = cy + r * sin(a)
en el que cx
y cy
son las coordenadas del centro del círculo, r
es el radio, y a
es el ángulo que quieres expresado en radianes. Eso lo vamos a usar para calcular la posición de destino del arco que vamos a crear.
Y además hay que tener otra parte importante en cuenta: el ángulo se empieza a contar desde el eje de la X (como se indica en el gráfico siguiente), mientras que el porcentaje que quieres mostrar se empieza a contar desde el eje de la Y. Por lo que vas a tener que corregir el ángulo π/2 radianes:
Teniendo eso en cuenta, para calcular el punto de destino del arco, las cuentas que habrá que hacer serán como esto (se puede simplificar, pero lo he dejado así para que se vea la corrección mejor y ya en radianes):
x = cx + r * cos( 2π * porcentaje - π/2 );
y = cy + r * sin( 2π * percentaje - π/2 );
Y ahora la parte divertida: el valor que va a ir dentro del d
en el path
que quieres que represente el porcentaje. Sería algo como esto:
M <cx>,<cy> L<cx>,<cx - r> A <r>,<r> <modificador de arco> <x>,<y> Z
Donde:
<cx>
: es la coordenada X del centro de la circunferencia
<cy>
: es la coordenada Y del centro de la circunferencia
<r>
: es el radio de la circunferencia
<modificador de arco>
: esto serán los tres dígitos (con valores 0 ó 1), que van a depender el valor del ángulo: si es más de 180 será "0 1,1" y si no será "1 0,1". (Daniel Pataki tiene un post muy bueno en inglés, en el que lo explica mejor mientras enseña como crear una gráfica).
<x>
: es el valor x
que calculaste con las fórmulas de arriba.
<y>
: es el valor y
que calculaste con las fórmulas de arriba.
A partir de ahí se puede deducir que <cx - r>
es la coordenada X del centro de la circunferencia menos el radio.
Después de explicar qué es cada cosa, voy a poner una descripción de qué es lo que hace. Para ello, voy a suponer que la imagen es un cuadrado de 240x240, la circunferencia tiene un radio de 100 con el centro en 120,120, y que queremos representar un 20% cuyas coordenadas son 215.1056,89.0983. El d
sería entonces:
M120,120 L120,20 A100,100 1 0,1 215.1056,89.0983 Z
Esto es lo que hace:
- Se sitúa en la posición 120,120 (sin dibujar nada)
- Dibuja una línea hasta 120,20
- Desde la posición actual, dibuja un arco hasta 215.1056,89.0983
- Cierra el arco (dibujando una línea desde el punto actual hasta el original 120,120)
Espero que sirva para entender mejor qué es lo que se hace.
Aquí dejo un ejemplo con el código funcionando:
function circlePath(cx, cy, r, percentil){
var coordx = cx + r * Math.cos( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
var coordy = cy + r * Math.sin( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
var modif = percentil >= 50 ? "0 1,1" : " 1 0,1";
var variables = "M" + cx + "," + cy + " L" + cx +"," + (cx - r) + " A" + r + "," + r + " " + modif + " " + coordx + ", " + coordy + " Z";
var pathEl = document.getElementById("porcentaje");
pathEl.setAttribute("d", variables);
pathEl.setAttribute("fill", "red");
document.getElementById("porcentaje-texto").innerHTML = percentil + "%";
}
circlePath(120,120,120, 75);
<svg class="circulo" width="240" height="240" viewBox="0 0 240 240">
<circle cx="120" cy="120" r="120" fill="#ebeced"></circle>
<path id="porcentaje" d="" fill="#58d6a6"></path>
<circle cx="120" cy="120" r="100" fill="#ffffff"></circle>
<text id="porcentaje-texto" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" fill="black" stroke="none" style="font-size:40px">0%</text>
</svg>
<hr/>
<button onclick="circlePath(120,120,120,10)">10%</button>
<button onclick="circlePath(120,120,120,20)">20%</button>
<button onclick="circlePath(120,120,120,30)">30%</button>
<button onclick="circlePath(120,120,120,40)">40%</button>
<button onclick="circlePath(120,120,120,50)">50%</button>
<button onclick="circlePath(120,120,120,60)">60%</button>
<button onclick="circlePath(120,120,120,70)">70%</button>
<button onclick="circlePath(120,120,120,80)">80%</button>
<button onclick="circlePath(120,120,120,90)">90%</button>
Nota: he hecho un poco de trampa y el código falla para el porcentaje 100%. Podrías añadir una pequeña condición para ese caso en la que se pinte el círculo de rojo en lugar de calcular arcos y demás.