Filters and gradients in elements and links

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:

There are two ways to set the filter attribute:

    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:

There are two ways to set these two attributes:

    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