Как сделать круговую диаграмму на SVG с заливкой?

#html #css #svg

Нужно сделать вот такую круговую диаграмму, с заливкой в центре заполненной части. 


 


Как сделать заливку? 

Бордер генерирую вот так: 



var stroke = 477, bg = 251;
  var percent = $('svg').attr('data-percent'),
      newStroke = stroke * (percent/100),
      newbg = bg * (percent/100);
      $('.start-2').css('stroke-dasharray', newBg+' '+bg);
      $('.start').css('stroke-dasharray', newStroke+' '+stroke);
  console.log(newStroke+' '+stroke);
 
svg {
  width: 300px;
  height: 300px;
}

.start {
  stroke-dasharray: 238.5 477;
  transition: 1s;
  fill-rule: nonzero;
  fill:none;
  stroke:green;
  stroke-width:4;
}
.start-2 {
  stroke-dasharray: 125.5 251;
  transition: 1s;
  fill: none;
  stroke-width: 75;
}







    

Ответы

Ответ 1

Решил самостоятельно. Может кому пригодится.



var stroke = 477,
  bg = 251;

$('[data-role="pie-chart"]').each(function() {
  var percent = $(this).attr('data-percent'),
    newStroke = stroke * (percent / 100),
    newBg = bg * (percent / 100),
    $this = $(this);
  setTimeout(function() {
    $('.pie-chart__bg', $this).css('stroke-dasharray', newBg + ' ' + bg);
    $('.pie-chart__border', $this).css('stroke-dasharray', newStroke + ' ' + stroke);
  }, 500);
});
.pie-chart {
  width: 300px;
}

.pie-chart__gradient-from {
  stop-color: #fff;
  stop-opacity: 1;
}

.pie-chart__gradient-to {
  stop-color: #e2e2e2;
  stop-opacity: .75;
}

.pie-chart__bg {
  stroke-dasharray: 0 251;
  transition: 1s;
  fill: none;
  stroke-width: 75;
}

.pie-chart__border {
  stroke-dasharray: 0 477;
  transition: 1s;
  fill-rule: nonzero;
  fill: none;
  stroke: #757575;
  stroke-width: 4;
}

.pie-chart_gray .pie-chart__border {
  stroke: #757575;
}

.pie-chart_yellow .pie-chart__border {
  stroke: #F9DF3C;
}

.pie-chart_orange .pie-chart__border {
  stroke: #FC9C1E;
}

.pie-chart_green .pie-chart__border {
  stroke: #86BF40;
}

.pie-chart_blue .pie-chart__border {
  stroke: #214DA6;
}










Codepen