【Svg】H5使用Svg实现渐变色进度环

        不考虑使用echart的情况下,可以用svg实现渐变色进度环。

1.  元素

        用div写好长和宽，里面包一个svg，svg里放进去linearGradient 和circle元素，circle使用linearGradient 的线性渐变来展示。

<div class="progress"
        :style="{
            width: width + 'px', height: height + 'px'
        }"
    >
        <svg xmlns="http://www.w3.org/2000/svg">
            <linearGradient>
            </linearGradient>
            <circle />
        </svg>
</div>

看到有些说明， "在创建一个<linearGradient>元素之前，我们需要先了解该元素属于需要预先定义的元素，也就是无法直接在svg当中直接使用。需要预先在<svg>元素中先创建一个<defs>元素，然后在其中创建需要使用的<linearGradient>并为其赋值唯一id，方便后面在需要使用的地方指定使用。"，但是我这边不用defs也没看到有啥问题。

2. 属性 

        接下来是实现效果， linearGradient中使用stop来添加渐变色。