Is it possible to create (or fake) a 2D gradient in SVG?

I am trying to create a color picker that needs to dynamically generate its images and figured it would be much easier to generate an SVG than a bitmap. Unfortunately I can't figure out how to represent the large 2D gradient that will make up the center of the picker.

For example, if the currently selected axes are blue and green, I need to draw a square with bottom left corner black, top left blue, bottom right green, and top right cyan.

If there is a way to do this by overlaying two linearGradient

filled squares and playing with their opacity, I have not been able to process it. I also tried to create a gradient whose starting end colors were different gradients (hoping I'm smart), but all I got was "big black nothing". Google searches so far have led me nowhere.

I would really like to use a stack of 256 1 pixel gradients, both because of the increase in size and complexity, and because I suspect it won't change much. Perhaps someone with a little more experienced SVG knowledge can suggest something

+1


source to share


1 answer


There is a color picker implementation in svg

here .



I haven't tested it because I don't have a browser svg

. The code is available, so you can see how it was implemented there.

0


source







All Articles