<feBlend>

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

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