SVG angular gradient

Is there a way to do an 'angular gradient' in SVG?

(I don't know the official term -- it's the kind of gradient you see in color-pickers, where it varies by angle.)

SVG seems to support only linear and radial gradients, but I'm thinking there might be some way to use a transform to simulate what I want.

thanks!


Solution 1:

...10 years later...

CSS now supports conical gradients, although browser support is mixed at the time of writing this.

You could apply a <clipPath /> to a <foreignObject /> whose contents use a CSS conical gradient to achieve the desired effect.

https://codepen.io/eastonium/pen/abOpdEm

Solution 2:

There's no standard support to do angular (conical) gradients.

But see http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient for some approximation methods (source code not included, though). Examples on that link do not work.