Элемент 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 для операции « поверх » для фона с красным кругом.
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 — значения для этого канала и пикселя из входной графики.
Композитный оператор отображает изображение в соответствии с арифметическими значениями.
Пример 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 > |