0
315
VisualizaçõesCreating a responsive circular percentage chart with two percentages
I am trying to build a circle like the one below with any two arbitrary percentage values.
Currently I have the circle below, but I am unsure on how to go about the gaps as my current approach is to create a full circle, and then add a path on top of it.
The code for my circle is:
<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 Respostas
Responde à pergunta0
Add a pathLength of 100 so the whole circle is equal to 100 units and then tweak your stroke-dasharrays as appropriate.
<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
Relatório
0
Maybe this is what you are looking for:
<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
Relatório
Responde à pergunta