# SVG-szűrőeffektusok, SVG-képmaszk és SVG torzítás

> Képek átalakítása SVG-vel: szűrők, maszkok, torzítás, és a Forrás szakasz, amellyel a hatás más elemekre is rákerül.

Ez a három widget egy képet alakít át SVG-vel. Mindhárom a közös SVG-alapokra épül: a **Viewbox** és a **Stílus** (**Igazítás**: **Bal**, **Középre**, **Jobb**) szakaszuk ugyanaz, lásd [SVG alapok](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/animaciok-es-effektek-svg-alapok/).

## SVG-szűrőeffektusok

A widget a kép képpontjait valós időben alakítja át SVG-szűrők segítségével. A **Típus** listából választasz szűrőt, a **Kép** mezőben adod meg az átalakítandó képet.

![Az SVG-szűrőeffektusok widget Kéttónusú szűrővel](./kepek/animaciok-es-effektek-svg-szuro.webp)

*Az SVG-szűrőeffektusok widget Kéttónusú szűrővel* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A képen a **Kéttónusú** típus látszik két kitöltőszínnel. A **Beállítások** alatti mezők a kiválasztott típustól függnek.

| Típus | Mit csinál | Beállításai |
| --- | --- | --- |
| **Kéttónusú** | A képet két színre redukálja. | **Kitöltőszín 1**, **Kitöltőszín 2** |
| **Törött** | „Törési” hatást ad a képnek. | **Törés mérete** |
| **Kacskaringós** | Hullámzó, fodrozódó átalakítás. | **Kacskaringós alapfrekvencia**, **Kacskaringós numOctaves**, **Típus** (**FractalNoise** vagy **Turbulence**), **Kacskaringó mérete**, **Kacskaringó kezdőértéke** |
| **Vázlatkeret** | Vázlatot készít a képből, kerettel körülvéve. | **Vázlat körvonala**, **Vázlat X**, **Vázlat Y**, **Vázlat mérete**, **Keret színe** |
| **Glitch** | A képpontokat RGB-összetevőikre bontja, enyhe animációval. | **Képpont mérete**, **Képhiba mérete** |
| **Röntgensugarak** | A kép úgy néz ki, mintha röntgenfelvétel lenne. | nincs |
| **Morfológia** | A kép vonalait vastagítja vagy vékonyítja. | **Dilatálás vagy erózió**, **Morfológiai sugár** |
| **Poszterizálás** | Egyszerűsíti az árnyalatok folyamatát, stilizált hatást ad. | **Piros**, **Zöld**, **Kék**, **Színek eltávolítása** |
| **RGB-eltolás** | A színcsatornákat eltolja egymáshoz képest. | nincs |
| **Pixelesítés** | Pixelessé teszi a képet. | nincs |

A **Nincs** típus a képet változatlanul hagyja.

## SVG-képmaszk

A widget SVG-vel maszkot tesz a képre: a kép egy részét elrejti, és csak a maszk alakjának megfelelő részt mutatja. Használhatod arra is, hogy az alap enyhén átlátszódjon, PNG nélkül.

![Az SVG-képmaszk widget Gyűrű típusú maszkkal](./kepek/animaciok-es-effektek-svg-maszk.webp)

*Az SVG-képmaszk widget Gyűrű típusú maszkkal* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A **Képmaszk** szakaszban a **Kép** mezőben adod meg a maszkolandó képet, a **Maszk** alatti **Típus** listából az alakzatot. A képen a **Gyűrű** típus látszik a hozzá tartozó **A belső kör sugara** beállítással.

| Maszktípus | Beállítása |
| --- | --- |
| **Kép** | Egy másik képpel maszkolsz: ez a legérdekesebb típusok egyike. A maszkoló képet a **Kép** mezőben adod meg. |
| **Gyűrű** | **A belső kör sugara** |
| **Háromszög**, **Kör**, **Hatszög**, **ötszög**, **Rombusz**, **Csillag**, **Szív** | nincs külön beállítás |
| **Egyéni útvonal** | **Egyéni útvonal (számok)**: az alakzat útvonal-adata, lásd [SVG alapok](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/animaciok-es-effektek-svg-alapok/) |

## SVG torzítás

Az SVG torzítás az SVG-szűrő eltolástérképével torzítja a képet. A hatás erősségét a **Mélységi tényező** adja meg.

Az **Eseményindító** határozza meg, mikor jelenjen meg a hatás:

| Eseményindító | Mit csinál |
| --- | --- |
| **Statikus** | Átmenet nélkül alkalmazza a torzítást. |
| **Animáció** | Ismétlődően létrehozza a hatást. |
| **Rámutatás** | A hatás akkor jön létre, amikor a kurzor az elem fölé ér. |
| **Görgetés** | Az animáció akkor indul, amikor az elem a görgetéssel látható lesz. |

![Az SVG torzítás widget Rámutatás eseményindítóval](./kepek/animaciok-es-effektek-svg-torzitas.webp)

*Az SVG torzítás widget Rámutatás eseményindítóval* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A képen az **Animáció** szakasz látszik. Az eseményindítótól függően ezek a mezők jelennek meg:

| Beállítás | Mit csinál | Mikor látszik |
| --- | --- | --- |
| **Animációs vezérlők** | **Lejátszás** és **Szüneteltetés** gombok | **Animáció** |
| **Link célja** | **Nincs**, **Kezdőlap URL** vagy **Egyéni URL**: hova vigyen a kattintás | **Rámutatás** |
| **Sebesség**, **Késleltetés** | Az animáció sebessége és késleltetése | minden animált típusnál |
| **Easing**, **Egyenlet** | A gyorsulás típusa (**Alapértelmezett**, **Nincs**, **Be**, **Ki**, **InOut**) és görbéje (Lineáris, Power1 … Power4, SlowMo, Vissza, Elastic, Pattogás, Circ, Expo, Szinusz) | minden animált típusnál |
| **Alapkép** | Az eredeti kép | mindig |
| **Eltolástérkép képe** és **Eltolástérkép** | A torzítást meghatározó eltolástérkép | mindig |
| **Mélységi tényező**, **Méretezés (%)** | A torzítás erőssége és mérete | mindig |
| **Mélységfaktor: végérték**, **Méretezés: végérték (%)** | Az animáció végén elért érték | **Rámutatás**, **Görgetés** |
| **Véletlenszerű animáció** | Véletlenszerű animáció | **Animáció** |
| **Képarány**, **Aránymód** | A képarány, és hogy a kép **Vágás** vagy **Megtartás** szerint illeszkedjen | mindig |

## A Forrás szakasz: a hatás más elemekre

Az SVG-szűrőeffektusok, az SVG-képmaszk és az SVG torzítás **Forrás** szakaszában a **Kimenet** kapcsolóval bekapcsolhatod az osztálykimenet funkciót. Ekkor a widget nem jelenik meg önállóan (a szakasz szövege szerint a szűrőeffektusokat csak más oldalelemekre való alkalmazáshoz használd), hanem egy CSS-osztályt kínál, amelyet bármelyik másik elemre ráírhatsz, és az elem megkapja a hatást.

![A Forrás szakasz az SVG-szűrőeffektusok widgetben](./kepek/animaciok-es-effektek-svg-szuro-forras.webp)

*A Forrás szakasz az SVG-szűrőeffektusok widgetben* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A hatás ráírása a célelemre:

1. Kapcsold be a **Kimenet** kapcsolót az SVG-widget **Forrás** szakaszában.
2. Másold ki a widget által megadott osztálynevet.
3. Jelöld ki a célelemet, és a **Haladó** fülön írd be az osztálynevet a **CSS-osztályok** mezőbe.

Tudnivalók:

- A forrás csak **Statikus** eseményindítóval használható, animációval, rámutatással vagy görgetéssel nem.
- A legjobb eredményt ezekkel az Elementor-alapwidgetekkel adja: **Kép**, **Címsor**, **Ikon**, **Gomb**.
- A böngészők támogatása: Firefoxban teljes, Chrome-ban, Safariban és Edge-ben részleges.