使用CSS缓慢地用颜色（如进度条）填充SVG图像 [英] Slowly fill SVG image with color (like progress bar) using CSS

问题描述

我想用颜色填充svg图片，而不是进度条。我将使用这个动画信息图表。

< =snippet-code-html lang-html prettyprint-override> 以绿色填充下面的图片，以显示它的30％已满。< br>< img src =https： //cdn.mediacru.sh/P-WOGKdNDiGT.svgwidth =700px>

小提琴： http://jsfiddle.net/47ayquwq/4/

解决方案

您可以通过对面具或过滤器进行动画制作，并使用 fakeSMIL库到polyfill for IE。以下是过滤器版本。

 < svg width =800pxheight =400px> < defs> < filter id =green-fillx =0％y =0％> < feFlood flood-color =green/> < feOffset dy =210> < animate attributeName =dyfrom =300to =210dur =2s/> < / feOffset> < feComposite operator =inin2 =SourceGraphic/> < feComposite operator =overin2 =SourceGraphic/> < / filter> < / defs> < image filter =url（＃green-fill）xlink：href =https://cdn.mediacru.sh/P-WOGKdNDiGT.svgheight =400width =700/> < / svg>  

I'd like to fill a svg image with colour instead of a progress bar. I will be using this for an animated infographic.

Fill the image below slowly with green colour to show it's 30% "full".<br>
<img src="https://cdn.mediacru.sh/P-WOGKdNDiGT.svg" width="700px">

Fiddle here: http://jsfiddle.net/47ayquwq/4/

解决方案

You can do this by animating a mask or a filter, and using the fakeSMIL library to polyfill for IE. Below is the filter version.

<svg width="800px" height="400px">
  <defs>
    <filter id="green-fill" x="0%" y="0%">
      <feFlood flood-color="green"/>
      <feOffset dy="210">
        <animate attributeName="dy" from="300" to="210" dur="2s"/>
        </feOffset>
      <feComposite operator="in" in2="SourceGraphic"/>
      <feComposite operator="over" in2="SourceGraphic"/>
      </filter>
    </defs>
  
     <image filter="url(#green-fill)" xlink:href="https://cdn.mediacru.sh/P-WOGKdNDiGT.svg" height="400" width="700" />
  
  </svg>

这篇关于使用CSS缓慢地用颜色（如进度条）填充SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！