Spec-Zone.ru › SVG

<filter>

Элемент <filter> SVG определяет пользовательский эффект фильтра, группируя атомарные примитивы фильтра. Он никогда не рендерится сам по себе, но должен использоваться с помощью атрибута filter на элементах SVG или свойства filter CSS для элементов SVG/HTML.

Контекст использования

Категории Нет
Разрешённое содержимое Любое количество следующих элементов в любом порядке:
Описательные элементы
Элементы примитивов фильтра
<animate>, <set>

Атрибуты

  • x
  • y
  • width
  • height
  • filterUnits
  • primitiveUnits
  • 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

См. также

  • <feBlend>
  • <feColorMatrix>
  • <feComponentTransfer>
  • <feComposite>
  • <feConvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feDropShadow>
  • <feFlood>
  • <feGaussianBlur>
  • <feImage>
  • <feMerge>
  • <feMorphology>
  • <feOffset>
  • <feSpecularLighting>
  • <feTile>
  • <feTurbulence>
  • Урок SVG: Эффекты фильтров

© 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API