--- In [email protected], Jacob Beard <jbea...@...> wrote: > > 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.
What about this variant: http://wwwpub.zih.tu-dresden.de/~s9783698/scrolling-radial-colors.xml Here is the code: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> <svg width="100%" height="100%" viewBox="0 0 800 400" version="1.1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; > <desc>Example lingrad01 - fill a rectangle using a linear gradient paint server</desc> <g> <defs> <radialGradient id="circularRainbowGradient" r=".6"> <!-- First and last stops have identical color, innermost stop doesn't move (see script) --> <stop offset=".0" stop-color="violet"/> <stop offset=".0" stop-color="red"/> <stop offset=".2" stop-color="orange"/> <stop offset=".4" stop-color="yellow"/> <stop offset=".6" stop-color="green"/> <stop offset=".8" stop-color="blue"/> <stop offset="1" stop-color="violet"/> </radialGradient> </defs> <circle fill="url(#circularRainbowGradient)" stroke="none" cx="400" cy="100" r="100"> </circle> </g> <script type="application/ecmascript"><![CDATA[ var RATE=10; var STEP=.001; circularRainbowGradient=document.getElementById("circularRainbowGradient"); var stops = circularRainbowGradient.getElementsByTagName("stop") //console.log(stops); //alert(stops[1].offset.baseVal) var intervalId = window.setInterval(function(){ // Leave zeroth stop alone for (i=1; i<stops.length; i++) { var stop = stops.item(i) var stopParent=stop.parentNode; var newOffset = stop.offset.baseVal+STEP; if(newOffset > 1.2){ //console.log(stop.getAttributeNS(null,"stop-color") + " - back to start"); // Change color of stop to color of following stop so that outermost and innermost // stop colors will match stop.setAttributeNS(null,"stop-color",stops.item(i-1).getAttributeNS(null,"stop-color")) stopParent.removeChild(stop); stopParent.insertBefore(stop,stops.item(0)); stop.offset.baseVal=0; }else{ //console.log(stop.getAttributeNS(null,"stop-color") + " : " + newOffset % 1); stop.offset.baseVal=newOffset % 1.2; } } },RATE); ]]> </script> </svg> ------------------------------------ ----- 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/
