知识储备

1.svg 去W3School学习学习

http://www.w3school.com.cn/svg/svg_circle.asp

小测试

示例代码1
html

<div class="pie">10</div>

css

.pie{   
   width: 100px; 
   height: 100px;  
   border-radius: 50%; 
   background: yellowgreen;    
   background-image: linear-gradient(90deg, transparent 50%,#655 0);
}

.pie::before{  
   content: ''; 
   display: block; 
   margin-left: 50%;   
   height: 100%;  
   background-color: inherit;  
   transform-origin: 0 50%;  
   border-radius: 0 100% 100% 0 / 50%;   
   /*transform: rotate(.5turn);*/  
   animation: spin 50s linear infinite,bg 100s step-end infinite; 
   animation-play-state: paused;   
   animation-delay: inherit;
}

这一节我们需要引入JS来更好的实现代码额可用性
js

<script>  
  var pieList =document.getElementsByClassName('pie');
  for(var i=0,len=pieList.length; i<len; i++){  
    var percent = parseFloat(pieList[i].textContent);
    pieList[i].style.animationDelay = '-' + percent + 's';
  }
</script>

svg解法

html

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

css

svg{    
  width: 300px; 
  height: 300px; 
  transform: rotate(-90deg);    
  background: yellowgreen;  
  border-radius: 50%;
}

circle{  
  fill: yellowgreen;  
  stroke: #655; 
  stroke-width: 32; 
  stroke-dasharray: 50 100;  
  /*animation: fillup 5s linear infinite;*/
}

js

<script>
var pieList =document.getElementsByClassName('pie');
for(i=0,len=pieList.length; i<len; i++){  
  var percent = parseFloat(pieList[i].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',percent + " 100"); 
  svg.setAttribute('viewBox', '0 0 32 32');  
  title.textContent = pieList[i].textContent;   
  pieList[i].textContent = '';   
  svg.appendChild(title);   
  svg.appendChild(circle); 
  pieList[i].appendChild(svg);
}
</script>

效果图：

圆饼图