The filter
attribute becomes a special attribute only in case it's defined as an object, instead of the
usual SVG syntax (e.g. "url(#myfilter)"
). If it's defined as an object, it must have the following form:
{
name: <name of the filter>,
args: <filter arguments>
}
Where name
is the name of the filter. See below for the list of built-in filters. args
is an object containing filter parameters. These parameters are dependent on the filter used and are described in the list below as well. Example usage:
element.attr('rect/filter', { name: 'dropShadow', args: { dx: 2, dy: 2, blur: 3 } });
The following is the list of built-in filters. All these filters are defined in the joint.util.filter
namespace. This namespace can be extended simply by adding a new method to it with one argument, an object with filter parameters, returning a string representing the SVG filter definition.
blur
x
- horizontal blury
- vertical blur [optional, if not defined y
is the same as x
]dropShadow
dx
- horizontal shiftdy
- vertical shiftblur
- blurcolor
- coloropacity
- opacitygrayscale
amount
- the proportion of the conversion. 1
is completely grayscale. 0
leaves the element unchanged.sepia
amount
- the proportion of the conversion. 1
is completely sepia. 0
leaves the element unchanged.saturate
amount
- the proportion of the conversion. 0
is completely un-saturated. 1
leaves the element unchanged.hueRotate
angle
- the number of degrees around the color circle the input samples will be adjustedinvert
amount
- the proportion of the conversion. 1
is completely inverted. 0
leaves the element unchanged.brightness
amount
- the proportion of the conversion. 0
makes the element completely black. 1
leaves the element unchanged.contrast
amount
- the proportion of the conversion. 0
makes the element completely black. 1
leaves the element unchanged.