Элемент SVG <feComposite>

SVG расшифровывается как Масштабируемая векторная графика. Его можно использовать для создания графики и анимации, как в холсте HTML. SVG разрабатывается Консорциумом World Wide Web (W3C) с 1999 года.

Элемент фильтра SVG <feComposite> выполняет математическую комбинацию двух входных данных попиксельно в пространстве изображения и входных данных на основе прозрачных областей, таких как фон изображения, с помощью одной из операций: над, внутри, поверх, вне, xor, легче, или арифметика.

Синтаксис:

<filter>
    <feImage xlink:href="" />
    <feComposite in="" in2="" operator=""/>    
</filter>

Значения атрибутов:

• in, in2: указывает вход для заданных примитивов фильтра.
• оператор : этот атрибут указывает 2 значения для контекста, в котором он будет использоваться, т. е. он может либо определять операцию композитинга, либо операцию морфинга, которая будет выполняться для 2 заданных входных данных.
• k1, k2, k3, k4 : указывает значения, которые будут использоваться для арифметической операции примитива фильтра <feComposite>.

Операции с элементом SVG <feComposite>:

<feComposite operator=”over” in=”A” in2=”B”/>: это операция по умолчанию, которая будет использоваться, когда над изображением не будут выполняться никакие операции или операции, которые не поддерживаются, и изображение будет предоставляться в исходном размере и положении. Этот оператор рассматривает два изображения как слои, перекрывающиеся друг с другом, например, верхний слой, который будет виден через части нижнего слоя. Здесь атрибут « in2 » используется для окружности.

Пример 1: В этом примере мы используем логотип GFG для операции « поверх » для фона с красным кругом.

Выход:

<feComposite operator="in" in="A" in2="B"/>: этот оператор можно использовать для отображения части исходной графики (объявленной в атрибуте in ), которая перекрывается с целевой графикой (объявленной в in2) . атрибут) , отбрасывая целевую графику. Здесь in = «A» используется для логотипа с прозрачным фоном, а in2 = «B» используется для круга.

Пример 2: В этом примере мы берем логотип GFG в качестве фона круга и используем операцию «внутри», которая скрывает внешний слой круга.

Выход:

<feComposite operator="out" in="A" in2="B"/>: этот оператор отображает часть исходной графики, объявленной в атрибуте in, которая находится за пределами целевой графики (объявленной в атрибуте in2 ). . Здесь in = «A» используется для логотипа с прозрачным фоном, а in2 = «B» используется для круга.

Пример 3: В этом примере мы берем логотип, делаем фон круга и используем операцию «out», чтобы скрыть внутренний слой круга.

Выход:

<feComposite operator="xor" in="A" in2="B"/>: этот составной оператор отображает изображение, которое часто используется для создания составного изображения из двух изображений, установленных на текстурированном. Первое изображение используется как источник, а второе — как место назначения. В результате получается изображение, содержащее части двух исходных изображений. Здесь in = «A» используется для логотипа с прозрачным фоном, а in2 = «B» используется для круга.

Пример 4: В этом примере мы берем логотип и делаем фон круга и используем операцию «исключающее ИЛИ», которая устанавливает внешний слой цвета круга во внутреннем боковом слое круга логотипа gfg.

Выход:

<feComposite in=”A” in2=”B” operator=”arithmetic”…/>: выходные данные фильтров <feDiffuseLighting> и <feSpecularLighting>, имеющие текстурные данные, могут быть объединены с опцией help arithmetic, где результат для каждый канал каждого пикселя рассчитывается следующим образом:

k1 * A * B + k2 * A + k3 * B + k4

куда,

A и B — значения для этого канала и пикселя из входной графики.