Menambah Grafik Vektor Berkala (SVG) dalam Pelayar Tidak Disokong
Dalam jawatan terdahulu dalam siri ini, kami telah menyebut sedikit mengenai perangkap SVG dengan pelayar lama dan menggunakan Raphael.js untuk menyampaikan grafik sebagai penyelesaian alternatif. Dalam jawatan ini kita akan melihat perkara ini lebih lanjut.
Ide ini mudah, kami masih menggunakan elemen SVG sebagai cara utama untuk menyampaikan grafik pada halaman web kami, tetapi pada masa yang sama kami juga akan menyediakan fungsi sandaran supaya ia masih boleh diberikan dalam penyemak imbas yang tidak disokong.
Pasti, terdapat banyak laluan yang boleh kita ambil, tetapi kita hanya akan melihat kepada dua penyelesaian yang saya rasa adalah penyelesaian generik yang lebih baik. Jadi, mari kita lihat bagaimana kita boleh melakukannya.
Menggunakan Elemen Objek
Selain memasukkan terus ke dalam dokumen HTML, terdapat beberapa cara untuk membenamkan SVG. Sebagai contoh, jika kita menyimpan grafik dalam .svg fail, kita boleh menggunakannya elemen.
Untuk tujuan demonstrasi, kami telah menambahkan logo Apple dengan SVG ke laman web kami. Walau bagaimanapun, penyemak imbas yang tidak disokong akan kekal kosong. Untuk menyelesaikan masalah ini, kami boleh menyampaikan grafik Bitmap, seperti berikut;
Dengan cara ini, penyemak imbas yang disokong masih akan mengambil .svg, sementara pelayar tidak disokong akan membawa grafik Bitmap. Kami telah menambah “png” tanda di bawah logo Apple untuk mengesan grafik yang sedang disampaikan.
Walau bagaimanapun, seperti yang telah kita sebutkan dalam jawatan yang lain, Grafik bitmap tidak fleksibel dan berskala sebagai SVG. Jadi, mari kita lihat penyelesaian lain.
Menggunakan Modernizr
Kaedah lain yang boleh kita gunakan adalah dengan menggunakan Moden. Bagi anda yang tidak biasa dengan perpustakaan JavaScript ini, jangan risau kami akan mempunyai jawatan khusus untuk menampungnya. Buat masa ini, hanya bersaing dengan kami.
Pertama sekali, mari kita menyediakan beberapa perpustakaan JavaScript yang diperlukan, Modernizr.js dan Raphael.js. Kemudian, kita juga perlu menukar kita .svg fail ke dalam format yang disokong Raphael dengan alat ini, ReadySetRaphael.js, dan simpan output secara berasingan .js fail; mari kita namakannya svg.js.
Termasuk Modernzr.js dalam dokumen HTML, seperti:
Dan untuk dua fail yang lain, raphael.js dan svg.js, kami akan memuatkannya dengan syarat, hanya apabila ia dilihat dalam penyemak imbas yang tidak disokong.
Dengan Modernizr kita dapat mengesan keupayaan penyemak imbas, dalam kes ini kita akan mengesan sama ada penyemak imbas itu mampu memberikan SVG, dan jika tidak kita akan melayani skrip:
jika (! Modernizr.inlinesvg) document.write (''
