filter

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с ⁨января 2020⁩ года.

Атрибут filter задаёт эффекты фильтрации, определённые элементом <filter>, которые должны применяться к элементу.

Примечание: Как атрибут представления, filter также имеет соответствующее свойство CSS: filter. Если заданы оба значения, приоритет имеет свойство CSS.

Технически filter можно применять к любому элементу, но он действует только на элементы-контейнеры, не содержащие элемент <defs>, на все графические элементы и на элемент <use>.

Пример

<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>

Примечания по использованию

Значение	`none` \| `<filter-value-list>`
Значение по умолчанию	`none`
Анимируемый	Да

Описание значений см. в описании свойства CSS filter.

Спецификации

Спецификация
Модуль эффектов фильтрации, уровень 1> # FilterProperty>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`filter`	≤53	79	35	≤40	≤10.1	≤53	35	≤41	≤10.3	≤6.0	≤53	≤10.3

См. также

<filter>
свойство CSS filter

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filter