Satır içi SVG kullandığınızda, tüm bu SVG kodu doğrudan HTML'de ve dolayısıyla DOM'da bulunur. Sen sadece sizin olur bir gibi onları stil ekleyebilirsiniz ,
veya başka herhangi bir HTML öğesi. CSS şekillendirme, animasyon ve geçiş olasılığını getirir.
Basit bir örnek:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Satır içi SVG olarak Pen CodePen Logosuna bakın.
A, bu eğitimde biraz daha karmaşık bir tasarımın nasıl üstesinden gelineceğini yazdı. İşte o demo.
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen Wufoo SVG Reklamına bakın.
Bu ekran yayınında, neredeyse sıfırdan başlayarak Wufoo için başka bir animasyonlu SVG reklamı hazırlıyoruz. Tasarımın içinde hareket etmek ve sorunsuz ve sonsuz bir şekilde tekrarlamak için canlandırdığımız bazı bulutlar var.
İlk başta, satır içi SVG kullandık ve onu aynı HTML belgesine eklenmiş CSS ile canlandırdık. Ancak daha sonra, nasıl çalıştığını göstermek için bu CSS'yi SVG'nin içine taşıdık ve bu tamamen geçerli. Bunu yapmak isteyebilmenizin nedeni, SVG'yi background-image.
Demo:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen kKdDj'ye bakın.
Bu animasyon için tarayıcı desteği değişiklik gösterecektir. Bu yazı yazıldığı sırada yalnızca Chrome'da çalışıyordu.
Dosyalar
- 22-reklam-1.svg