I'm trying to create a color-picker which must dynamically generate its images and figured it would be a whole lot easier to generate SVG than a raster image. Unfortunately, I can't figure out how to represent the big, two-dimensional gradient which will form the centerpiece of the picker.
For example, if the currently selected axes are blue and green, I need to paint a square which has the lower-left corner black, the upper-left blue, the lower-right green, and the upper-right cyan.
If there's a way to accomplish this by overlaying two linearGradient
-filled squares and playing with their opacity, I wasn't able to work it out. I also tried creating a gradient whose start end end colors were other gradients (hoping I was being clever), but all that got me was a "big black nothing". Google searches have thus far gotten me nowhere.
I'd hate to resort to a stack of 256 1-pixel high gradients, both because of the increase in size and complexity and because I suspect it wouldn't resize well. Perhaps someone with a bit more working knowledge of SVG can suggest something