Question

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.

Here is my 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>

What do I have to do to create an animation that moves the gradient stop constantly from left to right and back?

Thanks a lot,

Vincent

Answer 1

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.

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