paper.defineGradient(gradientDefinition)
Define an SVG gradient for later reuse within the paper. The method returns the gradient id and the gradientDefinition
must have the following form:
{
type: <type of gradient>,
stops: <stop colors>,
attrs: <additional attributes>
}
Where type
is either 'linearGradient'
or 'radialGradient'
, attrs
is an object containing additional SVG attributes for the SVG gradient element and stops
is an array of the ramps of color on the gradient. Each stop object is of the form:
{
offset: <offset>,
color: <color>,
opacity: <opacity>
}
Where offset
is a string representing the offset of the gradient stop, color
indicates what
color to use at that gradient stop and opacity
is a number in the [0..1] range representing the
transparency of the stop color.
Example use:
var gradientId = paper.defineGradient({
type: 'linearGradient',
stops: [
{ offset: '0%', color: '#E67E22' },
{ offset: '20%', color: '#D35400' },
{ offset: '40%', color: '#E74C3C' },
{ offset: '60%', color: '#C0392B' },
{ offset: '80%', color: '#F39C12' }
]
});
svgNode.setAttribute('fill', 'url(#' + gradientId + ')');
For an introduction to gradients, please refer to the tutorial on Filters and Gradients.