# SVG-animátor widget

> SVG-ikonok és illusztrációk körvonal-animációja kód nélkül: ikon kiválasztása, kitöltési mód, késleltetett betöltés, stílus, hibaelhárítás.

Az **SVG-animátor** widget SVG-ikonokat és illusztrációkat kelt életre: az útvonalakat mintha kézzel rajzolnák, úgy jelennek meg. Logóhoz, ikonokhoz, díszítő rajzokhoz jó, kódolás nélkül. Az SVG vektoros, ezért bármekkora méretben éles marad, és gyorsan betöltődik.

Ha a widget nem látszik a szerkesztőben, kapcsold be a bővítmény **Widgetek** beállításainál.

## Mire jó?

- Animált logó az oldal betöltésekor.
- Ikonok, amelyek görgetésre vagy rámutatásra rajzolódnak ki.
- Díszítő vonalrajzok nyitóképeken.
- Apró, a márkát jellemző mikroanimációk.

Tipp: kombinálhatod az Elementor beépített belépő animációival vagy mozgáshatásaival is.

## Első lépések

1. Nyisd meg az oldalt az Elementorral.
2. A widgetlistában keresd meg az **SVG-animátor** widgetet, és húzd az oldalra.
3. Az **Általános** szakaszban válaszd ki az SVG-ikont: töltsd fel a saját fájlodat, vagy válassz az ikonkönyvtárak közül.

![Az Általános szakasz](./kepek/tartalom-svg-animator-altalanos.webp)

*Az Általános szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

A legjobb eredményhez olyan ikont válassz, amely **körvonalas** (vonalas) útvonalakból áll, nem kitöltött alakzatokból. Tiszta, egyszerű körvonalú ikon animálódik a legjobban. A legtöbb ikonkönyvtárban találsz ilyet.

## Kitöltési beállítások

A **Kitöltési mód** határozza meg, mikor jelenjen meg az ikon kitöltése a körvonal mellett:

| Érték | Hatás |
|---|---|
| **Nincs kitöltés** | Csak a körvonal látszik. |
| **Körvonal előtt** | A kitöltés előbb jelenik meg, mint a körvonal. |
| **Körvonal után** | A kitöltés a körvonal megrajzolása után jelenik meg. |
| **Mindig látható** | A kitöltés végig látszik. |

![A Kitöltési beállítások szakasz](./kepek/tartalom-svg-animator-kitoltes.webp)

*A Kitöltési beállítások szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

## Animációs beállítások

![Az Animációs beállítások szakasz](./kepek/tartalom-svg-animator-animacio.webp)

*Az Animációs beállítások szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

- **Késleltetett betöltés**: az animáció csak akkor indul, amikor az SVG a nézetablakba kerül. A jobb teljesítményért érdemes bekapcsolni.
- **Haladó animáció**: bekapcsolva további animációs beállítások jelennek meg, például az indítás és az ismétlés módja.

Néhány ötlet:

- Betöltésre induló logó: kapcsold be a **Haladó animációt**, és állítsd az indítást betöltésre.
- Rámutatásra rajzolódó ikon gombban vagy funkciódobozban: haladó animációval állítsd az indítást rámutatásra.
- Görgetésre megjelenő ábra: kapcsold be a **Késleltetett betöltést** és a görgetéses indítást.

## Stílus

A **Stílus** fül **Stílusok** szakaszában a megjelenést állíthatod:

![A Stílus fül](./kepek/tartalom-svg-animator-stilus.webp)

*A Stílus fül* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

- **Méret**: az SVG szélessége, reszponzív is lehet.
- **Igazítás**: balra, középre vagy jobbra, eszközönként.
- **Körvonal vastagsága**: az útvonal vastagsága. Finom ikonoknál 1 vagy 2 px, vastagabbaknál 3 vagy 4 px jó.
- **Körvonal színe**: az útvonal színe. Válassz a háttéren jól látható, a márkához illő színt.

## Hibaelhárítás

**Az SVG nem látszik, vagy nem animálódik.**

- Ellenőrizd, hogy az SVG körvonalas útvonalakból áll, nem csak kitöltésekből.
- Nézd meg, hogy a fájl feltöltődött, és az **Általános** szakaszban ki van választva.
- Késleltetett betöltésnél görgess oda, ahol az SVG látszik, mert amíg nincs a nézetablakban, nem indul el.
- Ha a **Haladó animáció** ki van kapcsolva, egyes indítási és ismétlési lehetőségek rejtve maradnak.

**A kitöltési mód nem úgy működik, ahogy várod.**

- Ha **Nincs kitöltés** van kiválasztva, az ikon kitöltetlen marad. Válts **Körvonal után** vagy **Mindig látható** értékre.
- Ha az SVG-ben nincs kitölthető útvonal, a beállításnak nincs látható hatása.

**A körvonal túl vékony vagy túl vastag.**

- A **Stílus** fülön állítsd a **Körvonal vastagságát**, és válassz a háttértől jól elütő **Körvonal színt**.
- Ha az SVG-fájl saját, beégetett körvonal-beállításokat tartalmaz, azok felülírhatják a widget beállításait. Szerkeszd az SVG-t egy vektorgrafikus programban (például Illustratorban), és töröld ezeket a beállításokat.