paper.defineFilter(filterDefinition)
Define an SVG filter for later reuse within the paper. The method returns the filter id and the filterDefinition
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:
var filterId = paper.defineFilter({
name: 'dropShadow',
args: {
dx: 2,
dy: 2,
blur: 3
}
});
svgNode.setAttribute('filter', 'url(#' + filterId + ');
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.