Analisis mendalam tentang teknik tutorial SVG_html5 dalam HTML5

Latar Belakang SVG

SVG ialah singkatan Grafik Vektor Boleh Skala, yang bermaksud grafik vektor boleh skala. Pada tahun 1998, World Wide Web Consortium telah menubuhkan kumpulan kerja untuk membangunkan teknologi untuk menyatakan grafik vektor melalui XML - SVG! Memandangkan SVG juga merupakan fail XML, SVG juga mewarisi kelebihan keterbukaan, mudah alih dan interaktiviti XML. Pada masa kini, hampir semua pelayar utama menyokong SVG Anda boleh mendapatkan lebih banyak maklumat keserasian dari sini, termasuk:

Gunakan atau elemen untuk memaparkan grafik SVG;
Gunakan transformasi SVG, penapis dan kesan khas lain pada elemen HTML yang menggunakan CSS atau elemen objek luaran; kabur dan manipulasi warna;
Gunakan animasi dengan imej SVG
Gunakan fon dalam format SVG;
* SVG
* Kandungan asas
* SVG bukan kandungan eksklusif HTML5
* HTML5 menyediakan kandungan asli tentang SVG

* SVG, secara ringkasnya, ialah imej vektor
* Sambungan fail SVG ialah ".svg"
* SVG menggunakan sintaks XML
* Konsep
* SVG ialah penerangan menggunakan teknologi XML Bahasa grafik dua dimensi
* Ciri-ciri SVG
* Grafik lukisan SVG boleh dirangkak oleh enjin carian
* SVG boleh dibesarkan tanpa mengurangkan kualiti imej
* Perbezaan antara SVG dan Kanvas
* SVG
* Tidak bergantung pada resolusi
* Menyokong pengikatan acara
* Program dengan kawasan pemaparan yang besar (seperti Peta Baidu)
* Tidak boleh digunakan untuk melaksanakan permainan web
* Kanvas
* Bergantung pada resolusi
* Tidak menyokong pengikatan acara
* Paling sesuai untuk permainan web
* Simpan imej dalam format ".jpg"
* Penggunaan
* Beberapa fail kecil pada halaman web Ikon
* Kesan khas dinamik (kesan animasi) dalam halaman web
* Gunakan SVG dalam HTML5
* Gunakan elemen
* Fungsi - serupa dengan < ;kanvas> elemen
* Saiz lalai ialah 300px*150px
* Gunakan gaya CSS
* Gunakan SVG untuk melukis grafik, anda mesti mentakrifkan elemen





Salin kod


Kodnya adalah seperti berikut: