The fill
attribute becomes a special attribute only in case it's defined as an object, instead of the
usual SVG syntax (e.g. "#ffaabb"
). If it's defined as an object, it is assumed to be a gradient definition and 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:
element.attr('rect/fill', {
type: 'linearGradient',
stops: [
{ offset: '0%', color: '#E67E22' },
{ offset: '20%', color: '#D35400' },
{ offset: '40%', color: '#E74C3C' },
{ offset: '60%', color: '#C0392B' },
{ offset: '80%', color: '#F39C12' }
]
});
For an introduction to gradients, please refer to the tutorial on Filters and Gradients.