是因为最近在做需求的时候，发现了这么一张UI图。乍一看这个图，脑子里好像是用几个div和border-radio来实现的。仔细一看，发现整体图形图像的底色是有渐变的，所以不能用几个元素来拼凑。这只能用于具有单一背景颜色的图形。整体渐变的背景色需要一个元素来绘制这个图形，但是这样太麻烦了，还有一种方法就是使用遮罩。前端的遮罩包括CSS遮罩、SVG遮罩和Canvas遮罩。CSSmasks需要引入图片。如果要导入图片，最好让UI给我每个进度的图片。Canvas觉得大不了，所以这里用SVG遮罩。代码实现先绘制自定义形状的遮罩图形标签，里面的代码就不展示了，仅供参考。rx,ry是矩形圆角边框。标签是遮罩元素，SVG元素可以作为遮罩显示。白色是完全透明的，黑色是不透明的。再定义下渐变色<停止偏移量="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/>再画一个图形，并引入蒙版注意元素的位置必须在遮罩元素的位置以内才能看到效果，效果差不多就完成了，在进度显示中，控制遮罩矩形的宽度即可和圆的数量是的，SVG也有组的概念，我尝试给组添加渐变，但是没有用，标签是用来将多个形状组成一个组的。“url(#grad1)”>但不是，它相当于为每个元素添加渐变。
