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 blur
  • y - vertical blur [optional, if not defined y is the same as x]
• dropShadow
  • dx - horizontal shift
  • dy - vertical shift
  • blur - blur
  • color - color
  • opacity - opacity
• grayscale
  • 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 adjusted
• invert
  • 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.