如何使用 CSS 为 SVG 图形设置动画，例如进度条

Question

我是 SVG 新手，我正在尝试使用 CSS 为这些对象设置动画。

我正在阅读一些文档，但我没有取得任何成果。

我还有另一个想法：“将对象分成更小的部分，将所有这些部分导出为 svg，然后用 CSS 显示对象的各个部分，直到完成”

但在尝试之前，我想寻求帮助。

这就是我想要做的（显然这必须是一个流畅的动画）：

这是我尝试制作动画的 2 个示例。我觉得最复杂的是左边那个

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

Answer 1

您可以通过为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/

https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/