Элемент SVG <feComposite>

Опубликовано: 4 Января, 2023

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 для операции « поверх » для фона с красным кругом.

HTML




<!DOCTYPE html>
  
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:400px; display:inline;">
        <defs>
            <filter id="image">
                <feImage xlink:href=
                        x="10px" y="10px"
                    width="160px" />
                <feComposite in2="SourceGraphic" 
                             operator="over" />
            </filter>
        </defs>
        <g transform="translate(0,25)">
            <circle cx="90px" 
                    cy="80px" 
                    r="70px" 
                    fill="#c00" 
                    style="filter:url(#image)" />
            <text x="80" y="-5">over</text>
        </g>
    </svg>
</body>
</html>

Выход:

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

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

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:400px; display:inline;">
        <defs>
            <filter id="imagein">
                <feImage xlink:href=
                         x="10px" y="10px"
                    width="160px" />
                <feComposite in2="SourceGraphic" operator="in" />
            </filter>
        </defs>
        <g transform="translate(0,25)">
            <circle cx="90px" 
                    cy="80px"
                    r="70px" 
                    fill="#c00"
                    style="filter:url(#imagein)" />
            <text x="80" y="-5">in</text>
        </g>
    </svg>
</body>
</html>

Выход:

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

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

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:400px; display: inline;">
        <defs>
            <filter id="image">
                <feImage xlink:href=
                         x="10px" y="10px"
                    width="160px" />
                <feComposite in2="SourceGraphic" operator="out" />
            </filter>
        </defs>
        <g transform="translate(0,25)">
            <circle cx="90px" 
                    cy="80px"
                    r="70px" 
                    fill="#c00" 
                    style="filter:url(#image)" />
            <text x="80" y="-5">Out</text>
        </g>
    </svg>
</body>
</html>

Выход:

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

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

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:450px;">
  
        <defs>
            <filter id="imageXor">
                <feImage xlink:href=
                         x="10px" y="10px" width="160px" />
                <feComposite in2="SourceGraphic" operator="xor" />
            </filter>
        </defs>
        <g transform="translate(0,240)">
            <circle cx="90px" 
                    cy="80px" 
                    r="70px"
                    fill="#c00" 
                    style="filter:url(#imageXor)" />
            <text x="80" y="-5">xor</text>
       </g>
    </svg>
</body>
</html>

Выход:

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

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

куда,

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

  • k1, k2, k3 и k4 обозначают значение атрибута с таким же именем.

    Композитный оператор отображает изображение в соответствии с арифметическими значениями.

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

    HTML




    <!DOCTYPE html>
    <html>
      
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>SVG <feComposite > Element</h3>
        <svg style="width:800px; height:400px; display: inline;">
            <defs>
                <filter id="imageArithmetic">
                    <feImage xlink:href=
                             x="10px" y="10px" width="160px" />
                    <feComposite in2="SourceGraphic"
                                 operator="arithmetic"
                                 k1="0.1" k2="0.2" k3="0.3" k4="0.4" />
                </filter>
            </defs>
            <g transform="translate(0,25)">
      
                <circle cx="90px" 
                        cy="80px" 
                        r="70px" 
                        fill="#c00" 
                        style="filter:url(#imageArithmetic)" />
                <text x="80" y="-5">Arithmetic</text>
            </g>
        </svg>
    </body>
    </html>

    Выход:

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

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

    HTML




    <!DOCTYPE html>
    <html>
      
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>SVG <feComposite > Element</h3>
        <svg style="width:800px; height:400px; display:inline;">
            <defs>
                <filter id="image">
                    <feImage xlink:href=
                             x="10px" y="10px" width="160px" />
                    <feComposite in2="SourceGraphic" operator="atop" />
                </filter>
            </defs>
            <g transform="translate(0,25)">
                <circle cx="90px" 
                        cy="80px" 
                        r="70px" 
                        fill="#c00" 
                        style="filter:url(#image)" />
                <text x="80" y="-5">atop</text>
            </g>
        </svg>
    </body>
    </html>