Question

我有一个SVG，我想从左到右设置一个渐变停止动画。我设法动画从左到右，但我不知道如何动画回来。

这是我的代码：

<svg id="mySvg" width="700px" height="498px">
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.4998" y1="250" x2="700" y2="250">
          <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1">
              <animate attributeName="offset" begin="0s" dur="2s" from="0" to="1" repeatCount="indefinite" />
          </stop>             
         <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.1"/>                                    
    </linearGradient>

    <path fill="url(#SVGID_1_)" d="M691.115,114.684c-9.084,0-16.193,7.1 ..."/>
</svg>

我需要做些什么才能创建一个动画，让渐变色块从左向右移动并返回？

非常感谢，

文森特

Answer 1

尝试使用values ='0; 1; 0'，而不是使用from和to属性。 values属性允许您指定一段时间内希望使用的值，而不是仅指定两端的值。

有时很难消化，但规范中的相关章节涵盖了很多有助于了解动画的基础：http://www.w3.org/TR/SVG/animate.html

SVG Animate Gradient Stop

1 个答案: