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