Export (0) Print
Expand All

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.1Internet Explorer 10

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

The SVGFilterElement object has these methods.

MethodDescription
setFilterRes

Sets the X and Y values of the filterRes attribute.

 

Properties

The SVGFilterElement object has these properties.

PropertyDescription

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

The filter property is generally used to apply a previously define filter to an applicable element.

filterResX

Corresponds to the X component of the attribute filterRes on the given filter element.

filterResY

Corresponds to the Y component of the attribute filterRes on the given filter element.

filterUnits

Defines the coordinate system for the filter attributes.

height

Gets or sets the height of an element.

primitiveUnits

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

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.



 
<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> 

 

 

Show:
© 2014 Microsoft