Как я это могу направлять динамический svg circle?

У меня есть этот код, я нуждаюсь в том, чтобы направить это динамический

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

Я оставляю 2 примера, не нахожу связь, как он должен меняться.

Этот график сейчас значит 90 % X, я хочу направить это динамический для любого процентного содержания.

Здесь - мое продвижение:

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>

Я основался в: https://stackoverflow.com / questions / 5737975/circle-drawing-with-svgs-arc-path

и здесь пример: http://jsfiddle.net/godly/zL5Su/

Но оно не функционирует!

12
задан 23.05.2017, 15:39
0 ответов