## 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

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:

- 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 `<filter>` element - and apply that filter 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 filter definition with the following format:

    {
        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

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:

- 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 `<pattern>` 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.

JointJS source code: gradients.js