svg圆形进度条circle实现

<!-- 虚线是从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)//结束状态
            }
        }
    }
})