Is there a special case in the spec somewhere that forbids using a linear gradient for stroke on horizontal and vertical lines?
A co-worker asked for a 1-pixel wide gradient between two colors to solve a problem he was working on. I figured that it would be easy to use a line element with the stroke referencing a linearGradient. I was surprised to find that it did not work. Obviously, I was able to generate what he needed by filling a 1 pixel wide rectangle. But, it seemed wrong. While testing I moved one end of my test line without moving the other and found that a diagonal line does have the gradient applied to the stroke. I've verified similar behavior with the path element. At the moment, I've tested * FF3 on Mac OS X and Linux * Chrome 5 on Mac OS X and Linux * Opera 11 on Mac OS X and Linux On some of these combinations don't show the vertical or horizontal lines at all, others show them as a medium gray color. I've attached my test file. In all cases, the rectangle, diagonal lines, the diagonal paths, and the two-part paths all display with a gradient. I find it hard to believe that all of these browsers made exactly the same mistake. So, does anyone know if there is a spec issue or if I've just done something amazingly dumb? My test is listed below: <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> <defs> <linearGradient id="grad"> <stop offset="3%" stop-color="#00f"/> <stop offset="97%" stop-color="#0ff"/> </linearGradient> <linearGradient id="vgrad" y2="100%" x2="0%"> <stop offset="3%" stop-color="#00f"/> <stop offset="97%" stop-color="#0ff"/> </linearGradient> </defs> <line x1="5" y1="10" x2="105" y2="20" fill="none" stroke-width="1" stroke="url(#grad)"/> <rect x="5" y="30" width="100" height="1" stroke="none" fill="url(#grad)"/> <path d="M5,40h100v20" fill="none" stroke-width="1" stroke="url(#grad)"/> <line x1="5" y1="80" x2="105" y2="80" fill="none" stroke-width="1" stroke="url(#grad)"/> <path d="M5,90h100" fill="none" stroke-width="1" stroke="url(#grad)"/> <line x1="150" y1="10" x2="150" y2="110" fill="none" stroke-width="1" stroke="url(#vgrad)"/> <path d="M160,10v100" fill="none" stroke-width="1" stroke="url(#vgrad)"/> <line x1="200" y1="10" x2="250" y2="110" fill="none" stroke-width="1" stroke="url(#grad)"/> <path d="M200,30L250,130" fill="none" stroke-width="1" stroke="url(#grad)"/> </svg> -- Bugs lurk in corners and congregate at boundaries. -- Boris Bezier ------------------------------------ ----- 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/
