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%;