0
357
ViewsCreación de un gráfico de porcentaje circular receptivo con dos porcentajes
Estoy tratando de construir un círculo como el de abajo con dos valores porcentuales arbitrarios.
Actualmente tengo el círculo a continuación, pero no estoy seguro de cómo solucionar los espacios, ya que mi enfoque actual es crear un círculo completo y luego agregar una ruta encima.
El código de mi círculo es:
<svg viewBox="0 0 36 36" className="circular-chart orange"> <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" strokeDashoffset="1" strokeDasharray="1000" strokeWidth="1.5" stroke="blue" /> <path strokeDasharray="69, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" strokeWidth="1.5" stroke="red" /> </svg>
·
Juan Pablo Isaza
2 answers
Answer question0
Agregue una longitud de ruta de 100 para que todo el círculo sea igual a 100 unidades y luego modifique sus rayas de trazo según corresponda.
<svg width="400px" height="400px" viewBox="0 0 36 36" className="circular-chart orange"> <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-dasharray="0 69 30.75 0.25" stroke-width="1.5" stroke="blue" pathLength="100" /> <path stroke-dasharray="68.75, 31.25" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="1.5" stroke-dasharray="61 39" stroke="red" pathLength="100" /> </svg>
·
Juan Pablo Isaza
Report
0
Tal vez esto es lo que estás buscando:
<svg viewBox="0 0 36 36" className="circular-chart orange"> <path d="M 33.915493,18 C 33.915493,26.789888 26.789894,33.9155 18,33.9155 9.2101061,33.9155 2.0845069,26.789888 2.0845069,18 2.0845069,9.2101123 9.2101061,2.0845 18,2.0845 26.789894,2.0845 33.915493,9.2101123 33.915493,18 Z" style="fill:none;stroke:#0000ff; stroke-width:1.5px;strokeDashoffset:1;strokeDasharray:1000"/> <path d="M 10.760589,3.8225001 C 12.932326,2.7113308 15.39296,2.0845 18,2.0845 c 8.789894,0 15.915493,7.1256123 15.915493,15.9155 0,8.789888 -7.125599,15.9155 -15.915493,15.9155 -5.153422,0 -9.7347676,-2.449325 -12.643428,-6.24736" style="fill:none;stroke:#ff7700; stroke-width:1.5px;strokeDashoffset:1;strokeDasharray:69, 100"/> </svg>
·
Juan Pablo Isaza
Report
Answer question