<!-- 虚线是从3点钟方向开始，所以逆时针旋转90度 -->
<style>
.svg { transform: rotate(-90deg); }
</style>
<script type='text-x-template' id='svg'>
<svg width='200' height='200' class='svg'>
<!-- 外圈圆 -->
<circle cx="100" cy="100" r="80" stroke="#dcdcdc" stroke-width="10" fill="none" />
<!-- 内圈圆，虚线用于展示进度 -->
<circle cx="100" cy="100" r="80" stroke="#ff0000" stroke-width="10" fill="none" :stroke-dasharray='dashArrayWidth.end'>
<!-- svg动画 -->
<animate attributeName="stroke-dasharray" :from="dashArrayWidth.start" :to="dashArrayWidth.end" dur="1s"/>
<animate attributeName="stroke" from="#ff0000" to="#53d74c" dur="1s" />
</circle>
</svg>
</script>
Vue.component('mysvg', {
template: '#svg',
props: ['num'],
computed: {
dashArrayWidth: function () {
//计算周长
var line = 2 * Math.PI * 80
return {
//stork-dasharray有两个参数，第一个代表虚线的宽度，第二个代表虚线两两的间隔
start: '0,' + line,//开始状态
end: line * (this.num / 100) + ',' + line * ((100 - this.num) / 100)//结束状态
}
}
}
})
