Hi David, Thanks for the reply. The demos you linked to were interesting and instructive.
In the end, it seems I was able to find a fairly elegant way of accomplishing this task using SMIL (tested in Chromium): http://live.echo-flow.com/svg/scrolling-colors.svg The solution basically hinges on the gradient's spreadMethod="reflect" attribute, and using animateTransform to continually translate the gradient vector. As I said, I think this is rather elegant, but if anyone can think of a better approach, I'd be very interested to know. Thanks, Jake On Mon, Sep 20, 2010 at 6:40 PM, ddailey <ddai...@zoominternet.net> wrote: > > > > Hi Jake, > > I've played some with what I think is the same thing you've been trying to do > and haven't been completely satisfied with my results. > > Take a look at the first cluster of links at > http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/edges_of_plausibility.htm > In those I do something with animating the position of gradients within a > stop. > > Two older examples using script and dating from before Chaals McCathie > Neville had emerged from his pouch, can be seen here: > http://srufaculty.sru.edu/david.dailey/svg/waves.html > http://srufaculty.sru.edu/david.dailey/svg/eggcloning3.svg. They ripple > gradients out from a center point deflecting content on top via > feDisplacement which I think is only implemented in IE/ASV and Opera so far. > (Though Chrome shows hints of starting to play with feDisplacement which is a > good thing!) > > The problem I seem to recall having was in getting the transitions between > waves to "match up", one of several boundary problems that I've bumped into > from time to time. > > Hope this might help, and I'll be interested in whatever solutions you find. > > cheers > David > > ----- Original Message ----- > From: Jacob Beard > To: svg-developers > Sent: Monday, September 20, 2010 4:15 PM > Subject: [svg-developers] animating gradients > > Hi, > > I'm just starting to learn about SVG SMIL animation, and I'm > attempting to perform a simple task involving linear gradients. What > I'd like to do is have a simple linear gradient with a set of stops, > and then animate the stops so that the colours "cycle" through the > fill. What I mean by this is, given something like the following > gradient > > <linearGradient id="MyGradient"> > <stop offset=".10" stop-color="red"/> > <stop offset=".30" stop-color="green" /> > <stop offset=".50" stop-color="yellow" /> > <stop offset=".70" stop-color="blue" /> > <stop offset=".90" stop-color="blue"/> > </linearGradient> > > The first stop should go from offset .1 to 1, then 0 to .1, and > repeat. The second stop offset should go from .3 to 1, then 0 to .3, > and so on. > > It's easy enough for me to imagine how to represent this in script, as > each stop is simply being animated the same way at each time step, > starting from a different offset, but it's not clear to me how you can > accomplish the same thing using SMIL. > > If anyone has any insight into this, I'd appreciate it if you could > let me know. Thanks, > > Jake > > [Non-text portions of this message have been removed] > > ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
