Filters & Gradients

In this section we will introduce you to filters and gradients to style your JointJS shapes. JointJS uses standard SVG filters and gradients, only instead of writing the SVG markup code, you define your filters and gradients with plain JavaScript objects. JointJS then generates all the necessary SVG elements for you.

Filters

Filters can be applied on shapes' subelements using the filter attribute. There are two ways to set the filter attribute:

• As a string. The value will be interpreted by the browser as usual (filter info). For example, if the filter attribute is set to 'url(#myfilter)', the browser will try to find an element with ID 'myfilter' - which can be an SVG `` element - and apply that filter on the subelement.
• As an object. In this case, JointJS will interpret the attribute as a special presentation attribute and treat the object as a JointJS-specific filter definition with the following format:

{
    name: string, // filter name
    args?: object // (optional) filter arguments (depending on the filter used)
}

The following example shows all built-in filters in action. As you can see, filters can be applied on link subelements as well.

Open Sandbox

Gradients

Gradients are applied within the stroke and fill attributes of shapes' 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:

• As a string. The value will be interpreted by the browser as usual (fill info, stroke info). Aside from straightforward values, such as '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 `` element - and apply that pattern on the subelement.
• As an object. In this case, JointJS will interpret the attribute as a special attribute and treat the object as a JointJS-specific gradient definition with the following format:

{
    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.

Open Sandbox