<filter>

Defines filter effects which can be applied to graphical elements.

• DOM object: SVGFilterElement
• SVG2 spec: https://www.w3.org/TR/filter-effects/#FilterElement

These elements are typically placed within a <defs> element, and then referenced by id from a filter attribute.

Inside the <filter> element there may be any number of filter primitive elements, such as <feGaussianBlur>.

Example usage:

<filter id="MyFilter">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>

To reference it with the filter attribute:

<rect filter="url(#MyFilter)" width="300" height="300" />

Attribute	Default	Description
filterUnits	objectBoundingBox	Coordinate system for x, y, width, height.
primitiveUnits	userSpaceOnUse	Coordinate system for child filter primitives.
x	-10%	X position of the filter region.
y	-10%	Y position of the filter region.
width	120%	Width of the filter region.
height	120%	Height of the filter region.
href	(none)	Reference to another <filter> whose attributes and primitive children may be inherited.

Template inheritance

href can reference another <filter> as a template. Unspecified region and units attributes are inherited along the reference chain, with values on the referencing filter taking precedence. Filter primitive children are not merged: Donner uses the first filter in the chain that contains primitive children. A missing target, a target that is not a <filter>, or a circular reference emits a parse warning and stops inheritance at that point; any valid prefix of the chain is still used.