SVG 动画渐变停止答案

【问题标题】：SVG Animate Gradient StopSVG 动画渐变停止
【发布时间】：2011-10-21 14:29:20
【问题描述】：

我有一个 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>

我必须做些什么来创建一个不断地从左到右并返回的渐变停止的动画？

非常感谢，

文森特

【问题讨论】：

我发现这只适用于 Firefox。您必须切换选项卡或单击对象才能更新颜色。不知道为什么....

标签： animation svg gradient

【解决方案1】：

尝试使用 values='0;1;0'，而不是使用 from 和 to 属性。 values 属性允许您指定您希望随时间使用的任意数量的值，而不仅仅是末端的两个值。

有时可能难以消化，但规范中的相关章节涵盖了很多对动画有用的知识：http://www.w3.org/TR/SVG/animate.html

【讨论】：

网上唯一看到这个答案的地方，谢谢！