# Draw SVG (SVG rajzolása) widget: beállítások és saját SVG

> Animált SVG-ikon, amelynek a körvonala mintha magától rajzolódna ki: beállítások, saját SVG feltöltése és hibaelhárítás.

A **Draw SVG** widget egy SVG-ikont animál úgy, hogy a körvonala mintha magától rajzolódna ki az oldalon, a sima megjelenés vagy áttűnés helyett. Használhatod a bővítmény beépített ikonjait, vagy feltöltheted a saját SVG-fájlodat.

A widget a Pro bővítmény része.

## Bekapcsolás

1. Nyisd meg: **The Plus Addons → Widgets**.
2. Keress rá a **Draw SVG** névre (a **Creative** kategóriában találod).
3. Kapcsold be a kapcsolóját.

Az Elementor szerkesztőjében a panelen az **SVG rajzolása** néven találod.

![A Draw SVG widget tartalom beállításai](./kepek/kepek-media-rajzolt-svg-tartalom.webp)

*A Draw SVG widget tartalom beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=68&action=elementor)

A képen a **Tartalom** szakasz látszik az alapértelmezett, előre elkészített ikonnal.

## Tartalom fül

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **SVG-opció kiválasztása** | **Előre elkészített SVG-ikon**: a bővítmény ikonkönyvtárából választasz; **Egyéni feltöltés**: a saját SVG-fájlodat használod | **Előre elkészített SVG-ikon** |
| **SVG-ikon kiválasztása** | melyik beépített ikon rajzolódjon ki; csak az előre elkészített ikonoknál látszik | az első ikon |
| **SVG kiválasztása** | a saját SVG-fájl feltöltése; csak az **Egyéni feltöltés** esetén látszik | nincs |
| **Igazítás** | az ikon vízszintes igazítása | középre |
| **Rajzolás rámutatáskor** | az ikon csak akkor rajzolódik ki, ha rámutatsz, nem betöltéskor vagy görgetéskor | kikapcsolva |
| **Rajzolás ismétlése** | a rajzolási animáció folyamatosan ismétlődik, nem csak egyszer fut le | kikapcsolva |
| **GSAP-interakció összekapcsolása** | az elemet egy másik, az oldalon lévő GSAP-interakcióhoz köti | kikapcsolva |

## Stílus fül

![A Draw SVG stílus beállításai](./kepek/kepek-media-rajzolt-svg-stilus.webp)

*A Draw SVG stílus beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=68&action=elementor)

A képen az **SVG-stílus** szakasz látszik az alapértékekkel.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Stíluskép kiválasztása** | a rajzolás animációs stílusa | **Késleltetett** |
| **Időtartam** | a rajzolás hossza | 90 |
| **SVG-szélesség** | az ikon szélessége, képernyőméretenként állítható | nincs megadva |
| **SVG maximális szélessége** | az ikon legnagyobb szélessége pixelben | 150 |
| **SVG minimális szélessége** | az ikon legkisebb szélessége; kapcsolóval kapcsolható | kikapcsolva |
| **Keret/vonal színe** | a kirajzolt vonal színe | lila |
| **Kitöltési szín** | az ikon kitöltése a rajzolás után; kapcsolóval kapcsolható | kikapcsolva |

## Saját SVG használata

A saját SVG-fájl feltöltésére szolgáló mező csak akkor jelenik meg, ha átváltod a beállítást az alapértelmezett ikonkönyvtárról.

1. Húzd a **Draw SVG** widgetet az oldalra.
2. A **Tartalom** fülön állítsd át az **SVG-opció kiválasztása** mezőt **Egyéni feltöltés** értékre.
3. Megjelenik az **SVG kiválasztása** médiamező: ide töltsd fel vagy itt válaszd ki a saját SVG-fájlodat.
4. Állítsd be az **Igazítás** mezőt, és ha szeretnéd, a **Rajzolás rámutatáskor** vagy a **Rajzolás ismétlése** kapcsolót. Alapból az animáció egyszer fut le betöltéskor.
5. Tedd közzé az oldalt, és nézd meg a nyilvános oldalon.

![Az Egyéni feltöltés beállítás](./kepek/kepek-media-rajzolt-svg-egyedi.webp)

*Az Egyéni feltöltés beállítás* (https://minta-bolt.hu/wp-admin/post.php?post=68&action=elementor)

A képen az **SVG kiválasztása** médiamező látszik az **Egyéni feltöltés** beállításnál.

A kész ikon a nyilvános oldalon:

![A Draw SVG widget a nyilvános oldalon](./kepek/kepek-media-rajzolt-svg.webp)

*A Draw SVG widget a nyilvános oldalon* (https://minta-bolt.hu/km-rajzolt-svg/)

### Korlátok

- A rajzolás hatása csak vonalas (körvonalas) SVG-nél látszik jól. A tömör, kitöltött alakzatú SVG nem fog „kirajzolódni”.

## Hibaelhárítás

### Az ikon megjelenik, de nem animálódik

- Ellenőrizd, hogy a widget be van kapcsolva a **The Plus Addons → Widgets** oldalon.
- Nézd meg, hogy az oldal gyorsítótára (például az Elementor elemgyorsítótára) nem egy régebbi, animáció nélküli változatot szolgál-e ki.

### A feltöltött SVG egyáltalán nem animálódik

- Ellenőrizd, hogy a WordPress engedélyezi-e az SVG-feltöltést. Egyes oldalakon alapból tiltott, amíg nincs aktív SVG-támogatást adó bővítmény vagy szűrő.
- Ellenőrizd, hogy az **SVG-opció kiválasztása** valóban **Egyéni feltöltés** értékre van állítva, nem az ikonkönyvtárra.