7 jun
2017

¿Cómo puedo volverlo dinámico svg circle?

Tengo este código, necesito volverlo dinámico

<svg  width="240" height="240" viewBox="0 0 240 240"><circle cx="120" 
cy="120" r="120" fill="#ebeced"></circle><path d="M 120.0,120.0 L 120.0,0.0 A 
120.0,120.0 0 1 1 75.71350260559888,8.471052418954017 Z" fill="#58d6a6"></path>
<circle cx="120" cy="120" r="100" fill="#ffffff"></circle></svg>

<svg width="240" height="240" viewBox="0 0 240 240"><circle cx="120" cy="120" 
r="120" fill="#ebeced"></circle><path d="M 120.0,120.0 L 120.0,0.0 A 120.0,120.0 
0 1 1 55.59949741795174,18.744998804110452 Z" fill="#58d6a6"></path><circle 
cx="120" cy="120" r="100" fill="#ffffff"></circle></svg>

Dejo 2 ejemplos, no encuentro una relación, como debe variar.

Esa gráfica ahora significa 90% de X, quiero volverlo dinámico para cualquier porcentaje.

Acá está mi avance:

function circlePath(cx, cy, r){
var variables="M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";;

var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute(variables);
document.querySelector('svg').appendChild(pathEl);
}

circlePath(120,120,120);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg  class="circulo" width="240" height="240" viewBox="0 0 240 240"><circle cx="120" 
cy="120" r="120" fill="#ebeced"></circle ><path d="M 120.0,120.0 L 120.0,0.0 A 
120.0,120.0 0 1 1 75.71350260559888,8.471052418954017 Z" fill="#58d6a6"></path>
<circle cx="120" cy="120" r="100" fill="#ffffff"></circle></svg>

Me basé en: https://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path

y acá un ejemplo: http://jsfiddle.net/godly/zL5Su/

¡Pero no funciona!

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation