Menu
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!
720
SVG provides for two types of gradients: linear gradients and radial gradients. Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.
To use a gradient, we have to reference it from an object's fill or stroke attributes. This is done the same way you reference elements in CSS, using a url . In this case, the url is just a reference to our gradient, which I've given the creative ID, "Gradient". To attach it, set the fill to url(#Gradient) , and voila!
The x1, x2, y1,y2 attributes of the <linearGradient> tag define the start and end position of the gradient. The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end.
An angular gradient is also known as a “conic” gradient. This gradient applies the color function as the angle changes, relative to a center point and defined start and end angles.
...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
98
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
