Lietojot iekļauto SVG, viss SVG kods ir tieši HTML un līdz ar to DOM. Jūs varat veidot tos tāpat kā jūs ,
vai jebkuru citu HTML elementu. CSS stils dod iespēju animācijām un pārejām.
Vienkāršs piemērs:
Skatiet Pen CodePen logotipu kā Inline SVG, Chris Coyier (@chriscoyier) vietnē CodePen.
Šajā apmācībā A rakstīja, kā rīkoties nedaudz sarežģītāka dizaina dēļ. Lūk, šī demonstrācija.
Skatiet Krisa Koijera (@chriscoyier) Pen Wufoo SVG reklāmu vietnē CodePen.
Šajā ekrāna pārraidē mēs izveidojam vēl vienu animētu SVG reklāmu Wufoo, sākot gandrīz no nulles. Dizainā ir daži mākoņi, kurus mēs animējam, lai pārvietotos un atkārtotu vienmērīgi un bezgalīgi.
Sākumā mēs izmantojām iekšējo SVG un animējām to ar CSS, kas tikko pievienots tam pašam HTML dokumentam. Bet tad, lai parādītu, kā tas darbojas, mēs pārvietojām CSS uz pašu SVG, kas ir pilnīgi derīgs. Iemesls, kāpēc jūs to vēlaties darīt, ir tāpēc, ka animācija var darboties pat tad, ja izmantojat SVG kā background-image.
Demonstrācija:
Skatiet Chris Coyier (@chriscoyier) Pen kKdDj vietnē CodePen.
Pārlūkprogrammas atbalsts šai animācijai būs atšķirīgs. Šīs rakstīšanas laikā tas darbojās tikai pārlūkā Chrome.
Faili
- 22-ad-1.svg