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.