# SVG-alakváltás widget

> Animáció SVG-útvonallal megadott alakzatok között: indítás, viewbox, időzítés és az egyes útvonalak beállításai.

Az **SVG-alakváltás** widget animált átmenetet készít különböző alakzatok között. Az alakzatokat SVG-útvonallal (path) adod meg.

## Vezérlők

A **Vezérlők** szakasz azt dönti el, mi indítsa az animációt.

![A Vezérlők szakasz](./kepek/animaciok-es-effektek-svg-alakvaltas.webp)

*A Vezérlők szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Eseményindító** | **Animáció**: végtelen ciklus az alakzatok között. **Rámutatás**: akkor indul, amikor az egérkurzor (mobilon az ujj) az elemhez ér. **Görgetés**: akkor indul, amikor a görgetéssel az elem területére érsz. | Animáció |
| **Animációs vezérlők** | **Lejátszás** és **Szüneteltetés** gombok. Szünet módban az alakzatok alakíthatók, lejátszás módban az animáció kezelhető a jelenetek között. A szerkesztőben szünet módban könnyebb módosítani az alakzatok paramétereit; a blokkra kattintva váltasz az alakzatok között. | |
| **Yoyo** | Bekapcsolva az animáció a végén visszafelé is lefut. | Nem |
| **Ismétlés** | Az ismétlések száma. A **-1** végtelen, a **0** nem ismétlődik. | -1 |

## SVG és Viewbox

![Az SVG és Viewbox szakasz](./kepek/animaciok-es-effektek-svg-alakvaltas-viewbox.webp)

*Az SVG és Viewbox szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Mintázat képe** | Bekapcsolva képet használhatsz az alakzat kitöltéseként (mintázatként). | Nem |
| **SVG ViewBox: Szélesség**, **Magasság** | Az SVG rajzterület mérete. | 600 × 600 |
| **Tartalom szélessége**, **Tartalom magassága** | Az SVG-tartalom mérete (eszközönként külön is megadható). | |

## Animációk

Az alakzatok közti átmenetek közös beállításai. Ezek egyetlen útvonalnál (path) külön is felülírhatók.

![Az Animációk szakasz](./kepek/animaciok-es-effektek-svg-alakvaltas-animaciok.webp)

*Az Animációk szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Átmenet sebessége** | Az alakzatok közti átmenet sebessége másodpercben. | 0,7 |
| **Lépés időtartama** | Ennyi másodperc telik el a következő átmenet előtt. | 1 |
| **Easing** | A gyorsulás típusa: **Nincs**, **Be**, **Ki** vagy **InOut**. | InOut |
| **Egyenlet** | A gyorsulási görbe: Lineáris, Power1, Power2, Power3, Power4, SlowMo, Vissza, Elastic, Pattogás, Circ, Expo, Szinusz. | Power3 |

## path: az alakzatok

A **path** szakasz listája az alakzatokat tartalmazza (alapból négy van: `path_1` … `path_4`). Új alakzatot az **Elem hozzáadása** gombbal veszel fel, a másolás ikon másolatot készít, az **X** törli.

![A path szakasz](./kepek/animaciok-es-effektek-svg-alakvaltas-path.webp)

*A path szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

Egy útvonal beállításai:

- **Számok**: a koordináták sorozata (az útvonal adata, felépítéséről és beszerzéséről az [SVG alapok](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/animaciok-es-effektek-svg-alapok/) fejezetben olvashatsz);
- **Transzformáció**: a forgatás;
- **Pozíció**: az X és Y pozíció;
- **Stílus**: kitöltő kép, kitöltési szín, körvonal színe, vonalvastagság;
- **Animáció**: sebesség, lépés időtartama, easing típusa és sebességfüggvénye.

## Stílus

A **Stílus** szakasz az **Igazítás** beállítással a widget helyét állítja: **Bal**, **Középre** vagy **Jobb**.