MagyarmagyarDraw 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
Szekció neve “Bekapcsolás”- Nyisd meg: The Plus Addons → Widgets.
- Keress rá a Draw SVG névre (a Creative kategóriában találod).
- Kapcsold be a kapcsolóját.
Az Elementor szerkesztőjében a panelen az SVG rajzolása néven találod.
A képen a Tartalom szakasz látszik az alapértelmezett, előre elkészített ikonnal.
Tartalom fül
Szekció neve “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
Szekció neve “Stílus fül”
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
Szekció neve “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.
- Húzd a Draw SVG widgetet az oldalra.
- A Tartalom fülön állítsd át az SVG-opció kiválasztása mezőt Egyéni feltöltés értékre.
- Megjelenik az SVG kiválasztása médiamező: ide töltsd fel vagy itt válaszd ki a saját SVG-fájlodat.
- Á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.
- Tedd közzé az oldalt, és nézd meg a nyilvános oldalon.
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:
Korlátok
Szekció neve “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
Szekció neve “Hibaelhárítás”Az ikon megjelenik, de nem animálódik
Szekció neve “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
Szekció neve “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.
Készült: