SVG'yi CSS ile canlandırmak, ortalama bir ön uç kişi için daha rahat olsa da, SVG'nin doğrudan SVG sözdiziminin içine yerleştirilmiş başka bir animasyon yöntemi vardır. Bu videoda kısaca ele aldığımız şey tam olarak budur, ancak eksiksiz bir referans kılavuzu istiyorsanız, kesinlikle burada, CSS Hileleri ile ilgili Sara Soueidan'ın SVG Animasyonları Kılavuzu'na (SMIL) göz atın.
SMIL, Senkronize Multimedya Entegrasyon Dili anlamına gelir. Anladığım kadarıyla, bu, SVG'nin içine yerleştirilmiş olan kendi başına bir "şey" dir. Ancak SVG'nin kendi SMIL benzeri eklentileri vardır. Bazen teknik olarak hatalı olduğuma emin olsam da hepsini SMIL olarak adlandıracağım.
Çok basit animasyonlar için, bunu SMIL veya CSS'de yapmanın pek bir önemi yok, aynı şeyi hemen hemen aynı zorluk seviyesinde yapacaktır. CSS'de bazı şeyler daha da kolay olabilir. Ama işte SMIL'in gidilecek yol olduğu bazı şeyler:
- CSS'nin dokunamayacağı bir şeyi canlandırmanız gerekir. Bir çokgen veya yolun şekli gibi.
- Animasyonu etkilemek için a
clickveya benzeri birmouseoverşey gibi olayları kullanmak istiyorsunuz . - Şu anda başka bir x piksel bulunduğunuz yerden canlandırma gibi ek animasyonlar yapmak istiyorsunuz.
- Diğer animasyonlarla doğrudan ilişkili animasyonlara sahip olmak istiyorsunuz, örneğin bu animasyon bittiğinde bu sonraki animasyonu başlatır (süreleri manuel olarak değiştirmeden).
- Eminim daha fazlası vardır.
Sözdizimi ilk başta korkutucu geliyor, ama söz veriyorum gerçekten oldukça kolay. İşte temel bir örnek:
CodePen'de Chris Coyier'den (@chriscoyier) Pen jAipI'ye bakın.
"Şekil değiştirme" özelliği SMIL ile gerçekten süper benzersizdir, bu yüzden işte videoda yaptığımız tuhaf olandan daha iyi bir örnek:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Kalem Şekli Dönüşüm Düğmesine bakın.
Bu demoda, olaylar SMIL yerine JavaScript tarafından işleniyor. Bunu da yapabileceğini bilmek güzel. SMIL olay tetikleyicileri harikadır, ancak tıklanması gereken şey DOM'daki herhangi bir yer yerine o SVG'de olmalıdır.