Când utilizați SVG inline, tot acel cod SVG este corect în HTML și, prin urmare, în DOM. Le poți stiliza exact așa cum ai face ,
, sau orice alt element HTML. Stilul CSS aduce posibilitatea de animații și tranziții.
Un exemplu simplu:
Consultați sigla Pen CodePen ca Inline SVG de Chris Coyier (@chriscoyier) pe CodePen.
A a scris cum să abordați un design puțin mai complex în acest tutorial. Iată acea demonstrație.
Vedeți anunțul Pen Wufoo SVG de Chris Coyier (@chriscoyier) pe CodePen.
În acest ecran, realizăm o altă reclamă animată SVG pentru Wufoo, începând aproape de la zero. Designul are niște nori pe care îi animăm să trecem și să-i repetăm lin și fără sfârșit.
La început, am folosit SVG inline și l-am animat cu CSS atașat doar la același document HTML. Dar apoi, doar pentru a arăta cum funcționează, am mutat acel CSS în SVG în sine, ceea ce este complet valid. Motivul pentru care ați putea dori să faceți acest lucru este că atunci animația poate rula chiar și atunci când utilizați SVG ca background-image.
Demo:
Vedeți Pen kKdDj de Chris Coyier (@chriscoyier) pe CodePen.
Suportul browserului pentru acea animație va varia. La momentul scrierii acestui articol, funcționa numai în Chrome.
Dosare
- 22-ad-1.svg