SVG动画渐变 [英] SVG Animate Gradient Stop

问题描述

我有一个SVG，我想从左至右和背部的动画渐变色。
我设法左到右动画，但我不知道如何动画回来。

I have an SVG and I would like to animate a gradient stop from left to right and back. I managed to animate the left to right, but I don't know how to animate it back.

下面是我的code：

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

什么我必须做创建动作不断渐变停止从左至右动画的和背部的？

非常感谢，

文森特

推荐答案

而不是从和属性使用，请尝试使用值= 0; 1; 0。值属性允许你指定你想随着时间的推移，而不是仅仅两个在末端使用尽可能多的价值。

Instead of using from and to attributes, try using values='0;1;0'. The values attribute allows you to specify as many values you wish to use over time instead of just the two at the extremities.

它可以是有时很难消化，但在规范中的相关章节涵盖了大量的地面是有用的知道动画：的 http://www.w3.org/TR/SVG/animate.html

It can be difficult to digest at times, but the relevant chapter in the specification covers a lot of ground that is useful to know for animation: http://www.w3.org/TR/SVG/animate.html

这篇关于SVG动画渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！