JavaScript adalah cara terakhir yang akan kita bahas dalam menghidupkan SVG. Kami melihat CSS, yang sangat bagus dan selesa, tetapi ia tidak dapat melakukan sebilangan besar sifat SVG yang mungkin anda mahukan. Kemudian kami melihat SMIL, yang merupakan sintaks deklaratif tepat dalam kod SVG itu sendiri, yang lebih kuat kerana dapat menghidupkan lebih banyak perkara termasuk bentuk elemen itu sendiri.
JavaScript dapat melakukan apa sahaja yang boleh dilakukan dan boleh dilakukan dengan baik. Ini hanya memerlukan kos sama ada menulis kod yang sangat rumit sendiri, atau overhead perpustakaan untuk membantu anda. Tetapi setelah anda mula beroperasi, sintaksnya dapat menjadi sangat menarik dan mesra dengan animasi dan persembahannya sebenarnya boleh menjadi yang terbaik.
Kelebihan lain untuk menggunakan JavaScript untuk animasi SVG adalah sokongan. Terdapat banyak kebiasaan yang perlu diberi perhatian semasa menghidupkan SVG. Beberapa penyemak imbas tidak menyokong transformasi pada elemen. Beberapa penyemak imbas melakukan perkara yang pelik dengan zoom halaman. Ada yang tidak konsisten dengan asal transformasi. Perpustakaan JavaScript sering membantu mengatasi masalah ini.
Semasa kita membincangkan animasi secara khusus, banyak perpustakaan SVG JavaScript adalah mengenai bekerja dengan SVG pada umumnya. Mereka boleh membuatnya dan memanipulasinya, mengakses sifat dari elemen, mengubahnya, dan lain-lain. Agak suka menambahkan API yang lebih mantap ke SVG.
Snag.svg - "jQuery untuk SVG"
Contoh asas menggunakan Snap.svg:
Lihat Pen BhHix oleh Chris Coyier (@chriscoyier) di CodePen.
Perkara lain yang kami lakukan dalam video ini dengan Snap.svg adalah menukar Pen animasi CSS ini menjadi Snap.svg, mengajar kami bahawa kami dapat menggunakan Snap.svg untuk bekerja dengan SVG sebaris yang sudah ada di halaman. Adobe telah mengumpulkan beberapa contoh sendiri.
Raphael - perpustakaan lama dari pencipta yang sama dengan Snap.svg
SVG.js - "Perpustakaan ringan untuk memanipulasi dan menghidupkan SVG." Inilah demo jam yang kami lihat, menunjukkan bagaimana animasi ini berfungsi dengan cepat memanipulasi DOM.
D3.js - “D3.js adalah perpustakaan JavaScript untuk memanipulasi dokumen berdasarkan data. D3 membantu anda menghidupkan data menggunakan HTML, SVG dan CSS. " Berikut adalah tutorial untuk mula membuat SVG dengannya dan yang lain memperkenalkan animasi dengannya.
GreenSock - "Animasi kelas profesional berprestasi tinggi untuk web moden." GreenSock adalah mengenai animasi di web secara umum, tetapi menyokong SVG. Inilah Pen di mana anda dapat melihat cara kerjanya.
Velocity.js - "Animasi JavaScript yang dipercepat." Juga perpustakaan mengenai animasi di web pada umumnya, yang berlaku untuk menyokong SVG. Julian Shapiro membuatnya dan telah menulis tentang mengapa animasi JavaScript sebenarnya boleh menjadi gaya animasi yang paling berprestasi serta cara kerja Velocity.js. Berikut adalah demo yang sangat mudah yang menghidupkan beberapa sifat khusus SVG.
Anda juga bebas menggunakannya sendiri dengan animasi JavaScript tanpa bantuan kerangka kerja. Ingat sebaris SVG ada di DOM, jadi semua barang API DOM biasa tersedia untuk anda. Agak seperti anda bagaimana sebenarnya tidak memerlukan jQuery untuk bekerjasama dengan DOM, ia hanya menjadikannya lebih mudah. Inilah contoh yang melakukan perkara dengan cara mereka sendiri yang cukup menarik.