<feBlend>

SVG фильтр примитивна  <feBlend> объединяет два объекта, управляемых определенным режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоев. Режим определяется атрибутом  mode.

Используемый контекст

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

Атрибуты

Глобальные атрибуты

Специальные атрибуты

DOM Interface

Этот элемент реализует интерфейс SVGFEBlendElement.

Пример

SVG

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
          flood-color="green" flood-opacity="1"/>
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
    </filter>
  </defs>

  <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png"
      x="10%" y="10%" width="80%" height="80%"
      style="filter:url(#spotlight);"/>
</svg>

Результат

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

Specification Status Comment
Filter Effects Module Level 1
Определение '<feBlend>' в этой спецификации.
Рабочий черновик Аутсорсинг режимов наложения наCompositing and Blending Level 1
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<feBlend>' в этой спецификации.
Рекомендация Первое определение

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
feBlendChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка ДаOpera Полная поддержка 9Safari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да
inChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка ДаOpera Полная поддержка 9Safari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да
in2Chrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка ДаOpera Полная поддержка 9Safari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да
modeChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка ДаOpera Полная поддержка 9Safari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна

Смотрите также