Creates a gradient element
- gradient
string
gradient descriptor
Gradient Descriptor
The gradient descriptor is an expression formatted as
follows: <type>(<coords>)<colors>
. The <type>
can be
either linear or radial. The uppercase L
or R
letters
indicate absolute coordinates offset from the SVG surface.
Lowercase l
or r
letters indicate coordinates
calculated relative to the element to which the gradient is
applied. Coordinates specify a linear gradient vector as
x1
, y1
, x2
, y2
, or a radial gradient as cx
, cy
,
r
and optional fx
, fy
specifying a focal point away
from the center of the circle. Specify <colors>
as a list
of dash-separated CSS color values. Each color may be
followed by a custom offset value, separated with a colon
character.
Examples
Linear gradient, relative from top-left corner to bottom-right
corner, from black through red to white:
var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
Linear gradient, absolute from (0, 0) to (100, 100), from black
through red at 25% to white:
var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25-#fff");
Radial gradient, relative from the center of the element with radius
half the width, from black to white:
var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
To apply the gradient:
paper.circle(50, 50, 40).attr({
fill: g
});
Returns:
object
the gradient
element