Hi Charles, I tried what you suggested, and it seems to give me a hard edge between the violet and red regions. I'm not sure why it does this though, as it seems to me that it should transition smoothly from violet to red. To resolve this, I tried changing the x2 attribute to 1.1, but that did not seem to have an effect. Perhaps you could post your code.
I'm now trying to achieve a similar effect with radial gradients. Unfortunately, I haven't been able to think of a way to do this using SMIL, as I can't seem to find a way to express the notion of moving a gradient stop to the center of the radial gradient, so I've tried to implement it with script. Here's what I have so far: http://live.echo-flow.com/svg/scrolling-radial-colors.svg Visually, this is not too bad. One thing I would like to improve, though, is to find a way that is less visually jarring to add a gradient stop to the center. Even when offset=0, the new stop just kind of "pops in". I think it would be better to have more of a "zooming" effect, where the new color appears as just a pinpoint and then gradually expands. Based on this, I think a solution may be found using scale transformations in conjunction with adjusting the offset and moving the stop in DOM, but I'm not sure. If anyone has any suggestions as to how to improve this using script, or even how to achieve this effect using SMIL, I'd greatly appreciate it if you could let me know. Thanks, Jake On Tue, Sep 21, 2010 at 12:13 PM, Charles McCathieNevile <cha...@opera.com> wrote: > > > > On Tue, 21 Sep 2010 08:41:52 -0700, Jacob Beard <jbea...@cs.mcgill.ca> > wrote: > > > 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 > > Works nicely in Opera too. > > > The solution basically hinges on the gradient's spreadMethod="reflect" > > attribute, and using animateTransform to continually translate the > > gradient vector. > > I agree that this is pretty elegant. > > I made an alternative version using spreadMethod-"repeat", adding a red > gradient stop at 1.1 (to get a smooth transition from violet back to red), > and setting the transform to animate from 0 to 1.1 - this means the > colours just slide across from left to right smoothly - since that was > what I had thought you were aiming at originally. > > I think this actually violates the SVG spec which says that stops are > forced to take values in the range [0,1] if they fall outside it - > http://www.w3.org/TR/SVG/pservers.html as I read it. So I'm intrigued > about what it does in other browsers, and whether it is worth filing a > change request... > > cheers > > Chaals > > -- > Charles McCathieNevile Opera Software, Standards Group > je parle français -- hablo español -- jeg lærer norsk > http://my.opera.com/chaals Try Opera: http://www.opera.com > ------------------------------------ ----- 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/
