filter

  • Revision slug: SVG/Attribute/filter
  • Revision title: filter
  • Revision id: 233996
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 134 words added

Revision Content

« SVG Attribute reference home

The filter attribute defines the filter effects define by the {{ SVGElement("filter") }} element that shall be applied to its element.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("filter","CSS filter") }} for further information.

Usage context

Categories Presentation attribute
Value <funciri> | none | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
<funciri>
A reference to a {{ SVGElement("filter") }} element which defines the filter effects that shall be applied to its element.
none
Do not apply any filter effects to its element.

Elements

The following elements can use the filter attribute

  • Graphics elements »
  • {{ SVGElement("a") }}
  • {{ SVGElement("defs") }}
  • {{ SVGElement("glyph") }}
  • {{ SVGElement("g") }}
  • {{ SVGElement("marker") }}
  • {{ SVGElement("missing-glyph") }}
  • {{ SVGElement("pattern") }}
  • {{ SVGElement("svg") }}
  • {{ SVGElement("switch") }}
  • {{ SVGElement("symbol") }}

See also

  • {{ cssxref("filter","CSS filter") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>filter</code> attribute defines the filter effects define by the {{ SVGElement("filter") }} element that shall be applied to its element.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("filter","CSS filter") }} for further information.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI">&lt;funciri&gt;</a> | <strong>none</strong> | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterProperty" title="http://www.w3.org/TR/SVG11/filters.html#FilterProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI">&lt;funciri&gt;</a></dt>
</dl>
<dl> <dd>A reference to a {{ SVGElement("filter") }} element which defines the filter effects that shall be applied to its element.</dd>
</dl>
<dl> <dt>none</dt>
</dl>
<dl> <dd>Do not apply any filter effects to its element.</dd>
</dl>
<h2>Elements</h2>
<p>The following elements can use the <code>filter</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Graphics_elements" title="en/SVG/Element#Graphics_elements">Graphics elements</a> »</li> <li>{{ SVGElement("a") }}</li> <li>{{ SVGElement("defs") }}</li> <li>{{ SVGElement("glyph") }}</li> <li>{{ SVGElement("g") }}</li> <li>{{ SVGElement("marker") }}</li> <li>{{ SVGElement("missing-glyph") }}</li> <li>{{ SVGElement("pattern") }}</li> <li>{{ SVGElement("svg") }}</li> <li>{{ SVGElement("switch") }}</li> <li>{{ SVGElement("symbol") }}</li>
</ul>
<h2>See also</h2>
<ul> <li>{{ cssxref("filter","CSS filter") }}</li>
</ul>
Revert to this revision