使用CSS缓慢地用颜色(如进度条)填充SVG图像 [英] Slowly fill SVG image with color (like progress bar) using CSS
本文介绍了使用CSS缓慢地用颜色(如进度条)填充SVG图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用颜色填充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屋!
查看全文