Spec-Zone.ru › SVG

<feComposite>

Базовый уровень Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с ⁨октября 2018 г.⁩.

  • Подробнее
  • Полная таблица совместимости
  • Отправить отзыв

Примитив фильтра <feComposite> SVG попиксельно комбинирует два входных изображения в пространстве изображения, используя одну из операций композитинга Портера — Даффа: over, in, atop, out, xor, lighter или arithmetic.

Как и другие примитивы фильтров, по умолчанию он обрабатывает компоненты цвета в цветовом пространстве linearRGB цветовом пространстве. Можно использовать color-interpolation-filters, чтобы вместо этого использовать sRGB.

В таблице ниже показана каждая из этих операций: изображение логотипа MDN скомпоновано с красным кругом:

Операция Описание

over over operator

 Исходная графика, заданная атрибутом in (логотип MDN), размещается поверх целевой графики, заданной атрибутом in2 (круга).

Это операция по умолчанию, которая используется, если операция не указана или указана неподдерживаемая операция.

in in operator

 Часть исходной графики, заданной атрибутом in, которая перекрывает целевую графику, заданную атрибутом in2, заменяет целевую графику.

out out operator

 Отображаются части исходной графики, заданной атрибутом in, находящиеся за пределами целевой графики, заданной атрибутом in2.

atop atop operator

 Части исходной графики, заданной атрибутом in и перекрывающие целевую графику, заданную атрибутом in2, заменяют целевую графику. Части целевой графики, не перекрывающиеся с исходной графикой, остаются без изменений.

xor xor operator

 Объединяются неперекрывающиеся области исходной графики, заданной атрибутом in, и целевой графики, заданной атрибутом in2.

lighter lighter operator

Отображается сумма исходной графики, заданной атрибутом in, и целевой графики, заданной атрибутом in2.

arithmetic arithmetic operator

Операция arithmetic полезна для комбинирования результатов фильтров <feDiffuseLighting> и <feSpecularLighting> с данными текстуры. Если выбрана операция arithmetic, значение каждого пикселя результата вычисляется по следующей формуле: 

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

где:

  • i1 и i2 обозначают значения соответствующих каналов пикселя входного изображения, которые соответствуют соответственно in и in2
  • k1, k2, k3 и k4 обозначают значения одноимённых атрибутов.

Контекст использования

Категории Элемент-примитив фильтра
Допустимое содержимое Любое количество следующих элементов в любом порядке:
<animate>, <discard>, <set>

Атрибуты

  • in: первый вход для данного примитива фильтра.
  • in2: второй вход для данного примитива фильтра (работает так же, как атрибут in).
  • operator: over | in | out | atop | xor | lighter | arithmetic
  • k1, k2, k3, k4: значения, используемые для вычисления пикселя результата в примитивах фильтра arithmetic operator.

Интерфейс DOM

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

Пример

В этом примере определены фильтры для каждой из поддерживаемых операций (over, atop, lighter и т. д.), которые композитно объединяют входной SourceGraphic с изображением логотипа MDN. Каждый фильтр применяется к элементу круга, который затем используется как SourceGraphic.

Примечание: BackgroundImage нельзя использовать в качестве источника композитинга в современных браузерах, поэтому мы не можем определить фильтр, который выполняет композитинг с пикселями, находящимися под фильтром, в качестве одного из источников. Приведённый здесь подход — это обходное решение, поскольку нельзя использовать BackgroundImage.

SVG

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageOver">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="over" />
    </filter>
    <filter id="imageIn">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="in" />
    </filter>
    <filter id="imageOut">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="out" />
    </filter>
    <filter id="imageAtop">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="atop" />
    </filter>
    <filter id="imageXor">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="xor" />
    </filter>
    <filter id="imageArithmetic">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite
        in2="SourceGraphic"
        operator="arithmetic"
        k1="0.1"
        k2="0.2"
        k3="0.3"
        k4="0.4" />
    </filter>
    <filter id="imageLighter">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="lighter" />
    </filter>
  </defs>
  <g transform="translate(0,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageOver)" />
    <text x="80" y="-5">over</text>
  </g>
  <g transform="translate(200,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageIn)" />
    <text x="80" y="-5">in</text>
  </g>
  <g transform="translate(400,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageOut)" />
    <text x="80" y="-5">out</text>
  </g>
  <g transform="translate(600,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageAtop)" />
    <text x="80" y="-5">atop</text>
  </g>
  <g transform="translate(0,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageXor)" />
    <text x="80" y="-5">xor</text>
  </g>
  <g transform="translate(200,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageArithmetic)" />
    <text x="70" y="-5">arithmetic</text>
  </g>
  <g transform="translate(400,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageLighter)" />
    <text x="80" y="-5">lighter</text>
  </g>
</svg>

Результат

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

Спецификация
Filter Effects Module Level 1>
# feCompositeElement>

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

Компьютеры Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome для Android Firefox для Android Opera для Android Safari для iOS Samsung Internet WebView для Android WebView для iOS
feComposite 5 ≤18 3 ≤12.1 6 18 4 ≤12.1 6 1.5 4.4 6
in 5
≤18До Edge 79 поддерживались BackgroundImage и BackgroundAlpha.
 3 15 6 18 4 14 6 1.5 4.4 6
in2 5
≤18До Edge 79 поддерживались BackgroundImage и BackgroundAlpha.
 3 15 6 18 4 14 6 1.5 4.4 6
k1 5 79 3 15 6 18 4 14 6 1.5 4.4 6
k2 5 79 3 15 6 18 4 14 6 1.5 4.4 6
k3 5 79 3 15 6 18 4 14 6 1.5 4.4 6
k4 5 79 3 15 6 18 4 14 6 1.5 4.4 6
operator 5 ≤18 3 15 6 18 4 14 6 1.5 4.4 6

См. также

  • Атрибуты примитивов фильтров SVG
  • <filter>
  • <animate>
  • <set>
  • <feBlend>
  • <feColorMatrix>
  • <feComponentTransfer>
  • <feConvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feFlood>
  • <feGaussianBlur>
  • <feImage>
  • <feMerge>
  • <feMorphology>
  • <feOffset>
  • <feSpecularLighting>
  • <feTile>
  • <feTurbulence>
  • Учебник SVG: эффекты фильтров

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API