Hi, Another method might be to use an animated filter, probably using feColourMatrix. I use a filter like this to cause things to change colour in my web comic to show that something will happen (usually displaying a speach bubble) when you mouse over them. However this only works in ASV3 and Opera (not sure about Squigle as it only displays SVG it isn't much use for things that interact with other types of web content).
Richard Pearman http://www.pixelpalaces.com/ The next stage in the evolution of web comics: http://www.onlinecomics.net/pages/details/listing.php?comicID=4415 Read my Helium articles: http://www.helium.com/users/212199 South Alberta Cactus and succulent society: http://www.facebook.com/group.php?gid=20360241008 --- In [email protected], Jacob Beard <jbea...@...> wrote: > > 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...@...> 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: [email protected] -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: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
