filter

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

The filter attribute specifies the filter effects defined by the <filter> element that shall be applied to its element.

Note: As a presentation attribute, filter can be used as a CSS property. See css filter for further information.

As a presentation attribute, it can be applied to any element but it only has effect on container elements without the <defs> element, all graphics elements and the <use> element.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />
  </filter>

  <rect x="10" y="10" width="80" height="80" filter="url(#blur)" />
</svg>

Usage notes

Value none | <filter-function-list>
Default value none
Animatable Yes

For a description of the values see the css filter property.

Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of 'filter' in that specification.
Working Draft Extended the values by several special filter functions.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'filter' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
filterChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

See also