<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>' в этой спецификации.		 Рекомендация Первое определение

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

BCD tables only load in the browser

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