7 jun
2017

¿Como colocar porcentaje en el centro del circulo?

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");
}

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>
</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>

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation