svg 图表-圆环

css

.chart-circle-bg{
	fill:none ;
	stroke:#E4EAF5 ;
	stroke-width:10;
	stroke-miterlimit:10;
	cx:100;
	cy:100;
	r:55.056;
		    
}
.chart-circle-line{
	fill:none;
	stroke-linecap: round;
	animation: spin 4s infinite linear;
	stroke-width:10;
	stroke-miterlimit:10;
}

js

<script>
$('input').bind('input propertychange', the_change);

function the_change(){
	var it = $(this);
	var css=($(this).attr("class"));
	var target=$(".chart-circle-line");
	var js_target=document.getElementsByClassName("chart-circle-line")[0].getBoundingClientRect();
	var h=js_target.height||Bottom - Top;
	var w=js_target.width||Right - Left;
	switch (css){
	case "ray":
		target.css("stroke-dasharray",it.val()/100*h*Math.PI+" "+it.val()/100*w*Math.PI)
		break;
	case "set":
		target.css("stroke-dashoffset",it.val()/100*h*Math.PI)
		break;
	}
}
</script>

html

<svg class="f3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g >
	<circle class="chart-circle-bg" />
</g>
<defs class="">
		<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0%" style="stop-color:#FF675C;stop-opacity:1"/>
		<stop offset="100%" style="stop-color:#FF325C;stop-opacity:1"/>
		</linearGradient>
	</defs>
<g >
	<path class="chart-circle-line" xmlns="http://www.w3.org/2000/svg"  
	stroke="url(#orange_red)" 	
	d="M100,44.944c30.407,0,55.056,24.649,55.056,55.056   c0,30.406-24.648,55.057-55.056,55.057c-30.406,0-55.056-24.65-55.056-55.057C44.944,69.593,69.594,44.944,100,44.944"
	/>
</g>
</svg>
<input class='ray' >
<input class='set' >