<filter>
Элемент <filter> SVG определяет пользовательский эффект фильтра, группируя атомарные примитивы фильтра. Он никогда не рендерится сам по себе, но должен использоваться с помощью атрибута filter на элементах SVG или свойства filter CSS для элементов SVG/HTML.
Контекст использования
| Категории | Нет |
|---|---|
| Разрешённое содержимое | Любое количество следующих элементов в любом порядке: Описательные элементы Элементы примитивов фильтра <animate>, <set>
|
Атрибуты
xywidthheightfilterUnitsprimitiveUnits-
xlink:hrefУстаревший
Интерфейс DOM
Этот элемент реализует интерфейс SVGFilterElement.
Пример
SVG
html
<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>
Результат
Спецификации
| Спецификация |
|---|
| Модуль фильтрации эффектов уровня 1 # FilterElement |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
filter |
5 | 12 | 3 | 9 | 6 | 18 | 4 | 10.1 | 6 | 1.0 | 4.4 |
filterUnits |
5 | 79 | 3 | 15 | 6 | 18 | 4 | 14 | 6 | 1.0 | 4.4 |
height |
5 | 79 | 3 | 15 | 6 | 18 | 4 | 14 | 6 | 1.0 | 4.4 |
primitiveUnits |
5 | 79 | 3 | 15 | 6 | 18 | 4 | 14 | 6 | 1.0 | 4.4 |
width |
5 | 79 | 3 | 15 | 6 | 18 | 4 | 14 | 6 | 1.0 | 4.4 |
x |
5 | 79 | 3 | 15 | 6 | 18 | 4 | 14 | 6 | 1.0 | 4.4 |
xlink_href |
5 | 79 | 3 | 15 | 6 | 18 | 4 | 14 | 6 | 1.0 | 4.4 |
y |
5 | 79 | 3 | 15 | 6 | 18 | 4 | 14 | 6 | 1.0 | 4.4 |
См. также
© 2005–2024 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