Добавление анимации заполнения в круговую диаграмму svg

Question

Я хочу анимировать круговую диаграмму с динамическим и неизвестным значением при загрузке. Скажем, я получить значение как можно скорее и превратить его в округлых процентах:

var percentage = Math.round(sum * 100/total); 

Тогда я положил значение там:

<div class="pie animated" id="pie-get-percentage"></div> 

$('#pie-get-percentage').html(percentage); 

SVG

$(document).ready(function() { 
    $('#pie-get-percentage').html(percentage); 

    function $$(selector, context) { 
     context = context || document; 
     var elements = context.querySelectorAll(selector); 
     return Array.prototype.slice.call(elements); 
    } 

    $$('.pie').forEach(function(pie) { 
     var p = parseFloat(pie.textContent); 
     var NS = "http://www.w3.org/2000/svg"; 
     var svg = document.createElementNS(NS, "svg"); 
     var circle = document.createElementNS(NS, "circle"); 
     var title = document.createElementNS(NS, "title"); 

     circle.setAttribute("r", 16); 
     circle.setAttribute("cx", 16); 
     circle.setAttribute("cy", 16); 
     circle.setAttribute("stroke-dasharray", p + " 100"); 

     svg.setAttribute("viewBox", "0 0 32 32"); 
     title.textContent = pie.textContent; 
     pie.textContent = ''; 
     svg.appendChild(title); 
     svg.appendChild(circle); 
     pie.appendChild(svg); 
    }); 

}); 

CSS

.pie-wrapper { 
    .pie { 
     width: 100px; 
     height: 100px; 
     display: inline-block; 
     margin: 10px; 
     transform: rotate(-90deg); 
    } 
    svg { 
     background: $primary; 
     border-radius: 50%; 
    } 
    circle { 
     fill: $primary; 
     stroke: $secondary; 
     stroke-width: 32; 
    } 
    @keyframes grow { 
     to { 
      stroke-dasharray: 100 100 
     } 
    } 
    .pie.animated { 
     animation: grow 2s linear; 
    } 
} 

Как вы можете видеть, мне показалось, что мне пришлось просто поиграть с правилами CSS .pie.animated, но до сих пор мне не удалось анимировать до моего динамического значения, только полный круг.

В принципе, если моя ценность составляет 42%, я пытаюсь вырастить свой круг до 42% от SVG. Но проблема в том, что я не могу дать динамическое значение моей анимации CSS. Возможно, мне, возможно, придется использовать встроенный CSS, но я не уверен, что это возможно для ключевых кадров анимации.

JSFiddle является here

Answer 1

Я играл с JQuery часть вашего JSFiddle, и это то, что я в конечном итоге.

<div class="pie">60%</div> 

<div class="pie">90%</div> 

<div class="pie">12%</div> 

Идея проста. Я использую таймер интервала javascript, чтобы каждый раз называть таймер подсчета. Я также добавил некоторые max-val, inc-val и другую связанную переменную, чтобы заставить ее работать.

function $$(selector, context) { 
    context = context || document; 
    var elements = context.querySelectorAll(selector); 
    return Array.prototype.slice.call(elements); 
} 

function count(){ 
    var isUsed = false; 
$$('.pie').forEach(function(pie) { 
    var p = parseFloat(pie.textContent); 

    if(pie.maxValue == null){ 
     pie.maxValue = p; 
     pie.incValue = p/100.0; 
     pie.lastValue = 0; 
    } 
    else 
     pie.lastValue = pie.lastValue + pie.incValue; 

    if(pie.lastValue <= pie.maxValue){ 
     var NS = "http://www.w3.org/2000/svg"; 
     var svg = document.createElementNS(NS, "svg"); 
     var circle = document.createElementNS(NS, "circle"); 
     var title = document.createElementNS(NS, "title"); 

     circle.setAttribute("r", 16); 
     circle.setAttribute("cx", 16); 
     circle.setAttribute("cy", 16); 
     circle.setAttribute("stroke-dasharray", pie.lastValue + " 100"); 

     svg.setAttribute("viewBox", "0 0 32 32"); 
     title.textContent = pie.textContent; 
     pie.textContent = ''; 
     svg.appendChild(title); 
     svg.appendChild(circle); 
     pie.appendChild(svg); 

     isUsed = true; 
    } 

}); 
    if(isUsed) 
     window.setTimeout(function() { count(); }, 30); 
} 

window.setTimeout(function() { count(); }, 30); 

count();