filter element | SVGFilterElement object

Defines an SVG filter. The filter element has a required id attribute which identifies a filter when it is applied to a graphic. The <filter> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as a filter.

Scalable Vector Graphics: Filter Effects, Section 15.25.1

Syntax


<filter id="MyFilter" filterUnits="userSpaceOnUse"
 x="0" y="0" width="200" height="120">

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGFilterElement

Members

The SVGFilterElement object has these types of members:

Methods
Properties

Methods

The SVGFilterElement object has these methods.

Method	Description
setFilterRes	Sets the X and Y values of the filterRes attribute.

Properties

The SVGFilterElement object has these properties.

Property	Access type	Description
className		Gets the names of the classes that are assigned to this object.
externalResourcesRequired		Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
filter	Read/write	The filter property is generally used to apply a previously define filter to an applicable element.
filterResX	Read-only	Corresponds to the X component of the attribute filterRes on the given filter element.
filterResY	Read-only	Corresponds to the Y component of the attribute filterRes on the given filter element.
filterUnits	Read-only	Defines the coordinate system for the filter attributes.
height		Gets or sets the height of an element.
primitiveUnits	Read-only	Specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion. The filter primitives identify a subregion which restricts calculation and rendering of the given filter primitive. The default filter primitive subregion is equal to the filter region.
style		Gets a style object.
width		Defines the width of an element.
x		Gets or sets the x-coordinate value.
xmllang		Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
xmlspace		Gets or sets a value that indicates whether white space is preserved in character data.
y		Gets or sets the y-coordinate value.

Standards information

Scalable Vector Graphics: Filter Effects, Section 15.25.1

Remarks

A filter element is never rendered directly. It is only referenced using the a filter property on the element to which the filter is applied. Note that the display property does not apply to the filter element and elements are not directly rendered even if the display property is set to a value other than "none". Conversely, filter elements are available for referencing even when thedisplay property on the filterelement or any of its ancestors is set to "none".

Examples

Here's a filter element that defines a Gaussian blur.

HTML



 
<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
   
<defs>
   <filter id="Gaussian_Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
   </filter>
</defs>
 
<ellipse cx="200" cy="150" rx="70" ry="40"
         style="fill:#ff0000;stroke:#000000;
         stroke-width:2;filter:url(#Gaussian_Blur)"/>
 
</svg>