2

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

Vinzcent
  • 1,438
  • 6
  • 33
  • 59
  • I found that this only sorta works in Firefox. You have to switch tabs or click the object to get the color to update. Not sure why.... – John Smith Jun 30 '15 at 21:28

1 Answers1

6

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

Robin Berjon
  • 1,013
  • 12
  • 10