如何使用CSS为进度条制作SVG图形动画 [英] How to animate a SVG figure like a progress bar with CSS
问题描述
我是SVG的新手，我正在尝试使用CSS为这些对象设置动画.
我正在阅读一些文档，但没有取得任何成就.
我还有另一个想法:将对象分成较小的部分，将所有这些部分导出为svg，然后使用CSS来显示对象的各个部分，直到完成为止"
但是在尝试之前，我想寻求帮助.
这就是我想要做的(显然这必须是流畅的动画):
这是我尝试制作动画的两个示例.我认为最复杂的是左侧的那个
<div class="demo">
<svg class="progress"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 209.29 106.77">
<defs>
<style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill-rule:evenodd;fill:url(#linear-gradient-2);}</style>
<linearGradient id="linear-gradient" x1="208.06" y1="15.09" x2="148.49" y2="88.62" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bababa"/>
<stop offset="0.28" stop-color="#979797"/>
<stop offset="1" stop-color="#424242"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="12.55" y1="97.95" x2="78.02" y2="26.75" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4682b4"/>
<stop offset="1" stop-color="#002e6e"/>
</linearGradient>
</defs>
<g id="c2" data-name="c2">
<g id="Layer_1" data-name="Layer 1">
<path class="cls-1" d="M135.21,71.21,130,76.3a52.67,52.67,0,0,0,9.56,8.58l1.43-1.76L208.64,0ZM160.15,89.3,158,93a52.93,52.93,0,0,0,14.44,1.23l.55-1.38L209.29,3.59Z"/>
<path class="cls-2" d="M24.42,9.83A52.69,52.69,0,0,0,8.24,82.57a51.86,51.86,0,0,0,3.65,5l5.16-5,.15-.15c-.68-.92-1.35-1.87-2-2.85a49.58,49.58,0,0,1,65.44-70A52.71,52.71,0,0,0,24.42,9.83Zm59,84.7a49.52,49.52,0,0,1-24.12,7.71l-1.61,4-.24.58A52.67,52.67,0,0,0,101.3,74.63,49.52,49.52,0,0,1,83.4,94.53Z"/>
</g>
</g>
</svg>
</div>
您可以通过为color-stop和/或offset设置动画来设置渐变动画.然后，通过调整不同的值，您可以创建所需的效果.
这是一个简单的示例，其中我为左一个的颜色和右一个的偏移设置了动画.
<div class="demo">
<svg class="progress"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 209.29 106.77">
<defs>
<style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill-rule:evenodd;fill:url(#linear-gradient-2);}</style>
<linearGradient id="linear-gradient" x1="208.06" y1="15.09" x2="148.49" y2="88.62" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bababa"/>
<stop offset="0.28" stop-color="#979797">
<animate attributeName="offset" values=".0;.28" dur="8s" fill="freeze" />
</stop>
<stop offset="1" stop-color="#424242">
<animate attributeName="offset" values="0;1" dur="8s" fill="freeze" />
</stop>
<stop offset="1" stop-color="rgba(0,0,0,0)">
<animate attributeName="offset" values="0;1" dur="8s" fill="freeze" />
</stop>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="12.55" y1="97.95" x2="78.02" y2="26.75" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgba(0,0,0,0)">
<animate attributeName="stop-color" values="rgba(0,0,0,0); #4682b4" dur="8s" fill="freeze" />
</stop>
<stop offset="1" stop-color="rgba(0,0,0,0)">
<animate attributeName="stop-color" values="rgba(0,0,0,0); #002e6e" dur="8s" fill="freeze" />
</stop>
</linearGradient>
</defs>
<g id="c2" data-name="c2">
<g id="Layer_1" data-name="Layer 1">
<path class="cls-1" d="M135.21,71.21,130,76.3a52.67,52.67,0,0,0,9.56,8.58l1.43-1.76L208.64,0ZM160.15,89.3,158,93a52.93,52.93,0,0,0,14.44,1.23l.55-1.38L209.29,3.59Z"/>
<path class="cls-2" d="M24.42,9.83A52.69,52.69,0,0,0,8.24,82.57a51.86,51.86,0,0,0,3.65,5l5.16-5,.15-.15c-.68-.92-1.35-1.87-2-2.85a49.58,49.58,0,0,1,65.44-70A52.71,52.71,0,0,0,24.42,9.83Zm59,84.7a49.52,49.52,0,0,1-24.12,7.71l-1.61,4-.24.58A52.67,52.67,0,0,0,101.3,74.63,49.52,49.52,0,0,1,83.4,94.53Z"/>
</g>
</g>
</svg>
</div>
一些有用的链接:
https://css-tricks.com/guide-svg-animations- smil/
https://designmodo.com/animate-svg-gradients/
But before trying that I wanted to ask for help. This is what I was trying to do (obviously this must be a fluid animation): Here are the 2 examples that I was trying to animate. I think the most complicated one is the one on the left
You can animate the gradient by animating the Here is a simple example where I animate the colors of the left one and the offset of the right one.
Some usefull links: https://css-tricks.com/guide-svg-animations-smil/ https://designmodo.com/animate-svg-gradients/ https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/ 这篇关于如何使用CSS为进度条制作SVG图形动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！<div class="demo">
<svg class="progress"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 209.29 106.77">
<defs>
<style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill-rule:evenodd;fill:url(#linear-gradient-2);}</style>
<linearGradient id="linear-gradient" x1="208.06" y1="15.09" x2="148.49" y2="88.62" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bababa"/>
<stop offset="0.28" stop-color="#979797"/>
<stop offset="1" stop-color="#424242"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="12.55" y1="97.95" x2="78.02" y2="26.75" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4682b4"/>
<stop offset="1" stop-color="#002e6e"/>
</linearGradient>
</defs>
<g id="c2" data-name="c2">
<g id="Layer_1" data-name="Layer 1">
<path class="cls-1" d="M135.21,71.21,130,76.3a52.67,52.67,0,0,0,9.56,8.58l1.43-1.76L208.64,0ZM160.15,89.3,158,93a52.93,52.93,0,0,0,14.44,1.23l.55-1.38L209.29,3.59Z"/>
<path class="cls-2" d="M24.42,9.83A52.69,52.69,0,0,0,8.24,82.57a51.86,51.86,0,0,0,3.65,5l5.16-5,.15-.15c-.68-.92-1.35-1.87-2-2.85a49.58,49.58,0,0,1,65.44-70A52.71,52.71,0,0,0,24.42,9.83Zm59,84.7a49.52,49.52,0,0,1-24.12,7.71l-1.61,4-.24.58A52.67,52.67,0,0,0,101.3,74.63,49.52,49.52,0,0,1,83.4,94.53Z"/>
</g>
</g>
</svg>
</div>color-stop and/or the offset. Then by adjusting different values you may create the effect you want.<div class="demo">
<svg class="progress"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 209.29 106.77">
<defs>
<style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill-rule:evenodd;fill:url(#linear-gradient-2);}</style>
<linearGradient id="linear-gradient" x1="208.06" y1="15.09" x2="148.49" y2="88.62" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bababa"/>
<stop offset="0.28" stop-color="#979797">
<animate attributeName="offset" values=".0;.28" dur="8s" fill="freeze" />
</stop>
<stop offset="1" stop-color="#424242">
<animate attributeName="offset" values="0;1" dur="8s" fill="freeze" />
</stop>
<stop offset="1" stop-color="rgba(0,0,0,0)">
<animate attributeName="offset" values="0;1" dur="8s" fill="freeze" />
</stop>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="12.55" y1="97.95" x2="78.02" y2="26.75" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgba(0,0,0,0)">
<animate attributeName="stop-color" values="rgba(0,0,0,0); #4682b4" dur="8s" fill="freeze" />
</stop>
<stop offset="1" stop-color="rgba(0,0,0,0)">
<animate attributeName="stop-color" values="rgba(0,0,0,0); #002e6e" dur="8s" fill="freeze" />
</stop>
</linearGradient>
</defs>
<g id="c2" data-name="c2">
<g id="Layer_1" data-name="Layer 1">
<path class="cls-1" d="M135.21,71.21,130,76.3a52.67,52.67,0,0,0,9.56,8.58l1.43-1.76L208.64,0ZM160.15,89.3,158,93a52.93,52.93,0,0,0,14.44,1.23l.55-1.38L209.29,3.59Z"/>
<path class="cls-2" d="M24.42,9.83A52.69,52.69,0,0,0,8.24,82.57a51.86,51.86,0,0,0,3.65,5l5.16-5,.15-.15c-.68-.92-1.35-1.87-2-2.85a49.58,49.58,0,0,1,65.44-70A52.71,52.71,0,0,0,24.42,9.83Zm59,84.7a49.52,49.52,0,0,1-24.12,7.71l-1.61,4-.24.58A52.67,52.67,0,0,0,101.3,74.63,49.52,49.52,0,0,1,83.4,94.53Z"/>
</g>
</g>
</svg>
</div>
