Тег SVG <feMerge>
Опубликовано: 25 Февраля, 2022
Элемент SVG <feMerge> позволяет применять эффекты фильтра одновременно, а не последовательно. Каноническая реализация <feMerge> заключается в рендеринге всего эффекта в один слой RGBA, а затем рендеринг результирующего слоя на устройстве вывода.
Синтаксис:
<feMerge> ---- </feMerge>
Атрибуты: не содержит никаких атрибутов.
Example 1:
HTML
<!DOCTYPE html> < html > < body > < svg width = "200" height = "200" > < filter id = "feOffset" x = "-40" y = "-20" width = "100" height = "200" > < feOffset in = "SourceGraphic" dx = "60" dy = "60" /> < feGaussianBlur stdDeviation = "5" result = "blur2" /> < feMerge > < feMergeNode in = "offsetBlur" /> < feMergeNode in = "litPaint" /> </ feMerge > </ filter > < rect x = "1" y = "1" width = "198" height = "118" fill = "green" stroke = "blue" /> < circle cx = "100" cy = "60" r = "55" stroke = "black" stroke-width = "3" fill = "white" /> < g fill = "#FFFFFF" stroke = "Green" font-size = "10" font-family = "Verdana" > < text x = "60" y = "62" >GeeksForGeeks</ text > </ svg > </ body > </ html > |
Выход:
Example 2:
HTML
<!DOCTYPE html> < html > < body > < svg width = "200" height = "200" > < filter id = "feOffset" x = "-40" y = "-20" width = "100" height = "200" > < feOffset in = "blur" dx = "4" dy = "4" result = "offsetBlur" /> < feGaussianBlur in = "SourceGraphic" stdDeviation = "5" result = "blur2" /> < feMerge > < feMergeNode in = "offsetBlur" /> < feMergeNode in = "litPaint" /> </ feMerge > </ filter > < rect x = "40" y = "40" width = "100" height = "100" style="stroke: #000000; fill: lightgreen; filter: url(#feOffset);" /> < rect x = "40" y = "40" width = "100" height = "100" style = "stroke: #000000; fill: green;" /> < g fill = "#FFFFFF" stroke = "black" font-size = "10" font-family = "Verdana" > < text x = "50" y = "90" >GeeksForGeeks</ text > </ svg > </ body > </ html > |
Выход: