基于js中颜色的数字/百分比填充图像

Question

我正在寻找根据百分比填充图像的可能性。

是否有动态方法可以做到这一点，还是更容易在特定时间间隔内创建图像？

我正在使用角度，需要设置AJAX的1到5等级系统的百分比。

Answer 1

请检查此答案：Fill a percentage of an SVG and animate the fill

您可以做的是创建一个SVG form of a star：

<svg width="100px" height="100px" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon fill="red" stroke="blue" stroke-width="10" 
            points="350,75  379,161 469,161 397,215
                    423,301 350,250 277,301 303,215
                    231,161 321,161" />
</svg>

然后将线性渐变应用于smth，如：

<linearGradient y2="100%" x2="100%" y1="100%" x1="0%" id="F1g">
  <stop stop-color="#00FF00" offset="0%" id="F1gst1"/>
  <stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/>
</linearGradient>

无论如何，与创建和显示多个渐变图像相比，这种方式实现起来更快，更灵活，网络密集度更低。

Answer 2

只需使用两张图片和一些javascript，我相信您可以轻松完成此操作。只需要一个透明的图像就可以填充。然后在它的底部放置一个相同尺寸的图像，只是填充了填充颜色，就在第一个图像的后面（使用z-index css属性）。使用您的javascript，将其移至＆＃34;填充＆＃34;第一张图片。以下是jsFiddle演示原则的链接

它绝对不像SVG的解决方案那么干净，但至少你可以在任何图像中使用它。