设置el-progress渐变背景色

前言:前天做个修改element-ui背景色的需求,要改成渐变色,看了看官方文档也没提供这个属性,这我就头大了,查询了好多资料,才知道,修改成渐变的要修改原生的代码。

因为element-ui中的环形进度条使用的svg,想要修改背景色,需要修改svg中path的sth的stroke属性。


步骤:

①:拷贝代码,在官方解析的代码中添加defs标签,id为blue

②:修改path中的stroke的值stroke="url(#blue)"。


具体介绍如下:

先来看下未修改环形进度条的效果和使用el-progress 解析后的代码:

设置el-progress渐变背景色_第1张图片

设置el-progress渐变背景色_第2张图片

解决办法:直接将解析后的代码拷贝下来,然后修改里面的stroke属性了。如下:


                        
                        
                        

修改之后效果和解析代码:

设置el-progress渐变背景色_第3张图片

设置el-progress渐变背景色_第4张图片

你可能感兴趣的:(vue,element-ui)