Keď použijete vložený SVG, všetok ten SVG kód je priamo v HTML, a teda v DOM. Môžete ich upravovať rovnako, ako by ste chceli ,
alebo akýkoľvek iný prvok HTML. Styling CSS prináša možnosť animácií a prechodov.
Jednoduchý príklad:
Logo Pen CodePen nájdete ako Inline SVG od Chrisa Coyiera (@chriscoyier) na serveri CodePen.
Ako v tomto tutoriále písať, ako riešiť trochu zložitejší dizajn. Toto je ukážka.
Prezrite si reklamu Pen Wufoo SVG od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
V tomto obrazovom vysielaní vytvárame ďalšiu animovanú reklamu SVG pre Wufoo, ktorá začína takmer od nuly. Dizajn má v sebe nejaké mraky, ktoré animujeme, aby sme sa pohybovali, a plynulo a nekonečne to opakujeme.
Najskôr sme použili vložený SVG a animovali sme ho pomocou CSS, ktoré sú práve pripojené k rovnakému dokumentu HTML. Ale potom, aby sme predviedli, ako to funguje, sme presunuli tento CSS do samotného SVG, ktorý je úplne platný. Možno to budete chcieť urobiť preto, lebo potom sa animácia môže spustiť, aj keď použijete SVG ako background-image.
Ukážka:
Prezrite si pero kKdDj od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
Podpora prehliadača pre túto animáciu sa bude líšiť. V čase písania tohto článku to fungovalo iba v prehliadači Chrome.
Súbory
- 22-reklama-1.svg