Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

The <filter> SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by the filter attribute on SVG elements, or the filter CSS property for SVG/HTML elements.

Usage context

CategoriesNone
Permitted contentAny number of the following elements, in any order:
Descriptive elements
Filter primitive elements
<animate>, <set>

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGFilterElement interface.

Example

SVG

<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
 <filter id="blurMe">
   <feGaussianBlur stdDeviation="5"/>
 </filter>

 <circle cx="60" cy="60" r="50" fill="green" />

 <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

Result

ScreenshotLive sample

Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of '<filter>' in that specification.
Working Draft
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 Full support 1Edge Full support YesFirefox Full support 4IE Full support 10Opera Full support 9Safari Full support 3WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3Samsung Internet Android ?
filterResChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
filterUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
heightChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
primitiveUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
widthChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
Deprecated
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
yChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

See also

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: codingdudecom, Tigt, mdnwebdocs-bot, andrewkshim, fscholz, abbycar, ledakis, Sebastianz, shamakry, iwarui, GKFX, kscarfone, Jeremie, Manuel_Strehl
Обновлялась последний раз: codingdudecom,