svg图片 填充颜色

需求

一张全灰色的svg图片，根据所占的百分比用蓝色填充

方法

1. svg蒙版 + 背景渐变（控制渐变函数中间的百分比即可达到效果）

mask-image: url(mask.svg);
mask-size: 100% 100%;
-webkit-mask-image: url(mask.svg);
-webkit-mask-size: 100% 100%;
background: -webkit-linear-gradient(bottom, #0073E6 0%, #0073E6 50%, #DDD 50%, #DDD 100%);

2. svg蒙版 + 纯灰图片蓝色补全（控制纯灰色图片高度即可达到效果）

mask-image: url(mask.svg);
mask-size: 100% 100%;
background: #0073E6 url('gray.png') no-repeat;
background-size: 100% 50%;
-webkit-mask-image: url(mask.svg);
-webkit-mask-size: 100% 100%;