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.
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.
Categories | None |
---|---|
Permitted content | Any number of the following elements, in any order: Descriptive elements Filter primitive elements <animate> , <set>
|
x
y
width
height
filterRes
Deprecated
filterUnits
primitiveUnits
xlink:href
This element implements the SVGFilterElement
interface.
<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>
Specification |
---|
Filter Effects Module Level 1 # FilterElement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
filter |
1 | 12 | 4 | 10 | 9 | 3 | Yes | 18 | 4 | 10.1 | 3 | 1.0 |
filterRes |
No | No | No | No | No | No | No | No | No | No | No | No |
filterUnits |
No | No | No | No | No | No | No | No | No | No | No | No |
height |
No | No | No | No | No | No | No | No | No | No | No | No |
primitiveUnits |
No | No | No | No | No | No | No | No | No | No | No | No |
width |
No | No | No | No | No | No | No | No | No | No | No | No |
x |
No | No | No | No | No | No | No | No | No | No | No | No |
xlink_href |
No | No | No | No | No | No | No | No | No | No | No | No |
y |
No | No | No | No | No | No | No | No | No | No | No | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter