This is an introduction to filters and gradients to style your JointJS elements and links. JointJS uses standard SVG filters and gradients, only instead of writing the SVG markup code, you define your filters and gradients with plain JavaSript objects. JointJS then generates all the necessary SVG elements for you.
Filters can be applied on elements' and
links' subelements using the filter
attribute:
filter
- the filter to use on this subelement.
Defining filters is addressed in the
special attributes section of
JointJS docs.There are two ways to set the filter
attribute:
filter
attribute is set to 'url(#myfilter)'
, the
browser will try to find an element with ID 'myfilter'
- which can be an SVG
<filter>
element - and apply that filter on the subelement.{
name: string, // filter name
args?: object // (optional) filter arguments (depending on the filter used)
}
The full list of built-in filters and their parameters can be found in the API reference. The following example shows all built-in filters in action. As you can see, filters can be applied on link subelements as well.
JointJS source code: filters.js
Gradients are applied within the stroke
and fill
attributes of
elements' and
links' subelements:
fill
- the fill to apply on this subelement.
Specifying the fill value is addressed in the
special attributes section of
JointJS docs.stroke
- the stroke to apply on this subelement.
Specifying the stroke value is addressed in the
special attributes section of
JointJS docs.There are two ways to set these two attributes:
'orange'
, '#ff0000'
or
'rgba(255, 165, 0, 0.3)'
, this includes pattern references.
For example, if the fill
attribute is set to 'url(#mypatterm)'
, the
browser will try to find an element with ID 'mypattern'
- which can be an SVG
<pattern>
element - and apply that pattern on the subelement.{
type: 'linearGradient' | 'radialGradient', // type of gradient
stops: Array<{ // an array of stop colors
offset: string, // offset of the stop (percentage)
color: string, // color of the stop
opacity?: number // (optional) opacity of the stop (number between 0 and 1)
attrs?: object // (optional) additional attributes for the gradient
}
There are two types of gradients, linear and radial.
The following example shows both of them in action.
Note how the last element uses the additional gradient attributes (attrs
), which allows the
direction of the gradient to be specified.
JointJS source code: gradients.js