<feBlend>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

Атрибуты

DOM Interface

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

Пример

SVG

html
<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
Filter Effects Module Level 1
# feBlendElement

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

BCD tables only load in the browser

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