<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 with JavaScript enabled. Enable JavaScript to view data.

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