## Using Filters and Gradients in elements and links

This is a short introduction to using filters and gradients to style your JointJS shapes 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

The way you can define filters is described in the Special Attributes section of the API reference. Filters can be applied on any SVG graphics and container element (ellipse, circle, path, text, g, ...) using the `filter` attribute. If you set this attribute to a string, the behaviour will be left unchanged. For example, by setting the `filter` attribute to this string: `"url(#myfilter)"`, the browser will try to find an element with ID `"myfilter"`, which can be the SVG `<filter>` element and apply that filter on the graphics element. However, if you set the `filter` attribute to a JavaScript object, JointJS will treat such an object as a JointJS-specific filter definition. This filter definition has the following form:

    {
        name: <name of the filter>,
        args: <filter arguments>
    }

where `name` is the name of the filter, `args` is an object containing filter parameters (dependent on the filter used). The full list of built-in filters and their parameters can be found in the API reference. The following demo shows all the filters in action. As you can see in the demo, you can define filters for links as well.

### Gradients

Gradients are again described in the Special Attributes section of the API reference. Gradients can be applied either on the `fill` or the `stroke` attribute of graphics elements. Again, if these attributes are set as strings, the behaviour will be left unchanged and JointJS just sets those strings as values for the respective attributes. Therefore, if you set e.g. `fill` to "#ff0000", the fill color of the selected graphics element will be red. However, if you set the `fill` attribute to a JavaScript object, JointJS will assume that it is a color gradient that you want to set. JointJS uses the following special definition for gradients:

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

The following demo shows both linear and radial gradients in action. Note the last element and the use of the additional gradient attributes (`attrs`) which allows you to define the direction of the gradient.