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

* Sebelum kemunculan HTML5, terdapat kandungan 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:

SVG melukis segi empat tepat



< ;!--
Jika anda menggunakan teg svg dalam halaman HTML
* Takrifkan elemen
* Sama dengan peranan elemen > * Saiz lalai 300px * 150px
* Tetapkan lebar dan tinggi - atribut dan gaya
* Semua grafik yang dilukis menggunakan svg mesti ditakrifkan dalam
* Grafik yang dilukis menggunakan svg adalah berkaitan dengan HTML halaman
-->






< /html>
* Elemen bulatan







* Elemen Ellipse






* Elemen garis







< ;/ body>
* Elemen polyline



< !--
Elemen - Polyline
* titik - Tetapkan titik permulaan, bucu dan titik akhir
* Gunakan "," untuk memisahkan x dan y
* Gunakan antara berbilang titik Ruang dipisahkan
Ciri-ciri polyline
* Kawasan dalam polyline (titik permulaan ke titik akhir) disediakan dalam warna hitam secara lalai
-->



* Poligon elemen





;<🎜 * Elemen kesan khas
* Kecerunan - elemen kecerunan ditakrifkan dalam elemen * Kecerunan linear -
* Elemen ini ialah elemen permulaan














< /svg>

* Kecerunan Sektor (Ray)-

* Penapis-Gaussian Blur
* Penapis menggunakan elemen
* Elemen-Gaussian Blur dalam
="SourceGraphic"
* stdDeviation - Tetapkan tahap kabur

Salin kodKod tersebut adalah seperti berikut:

< svg width="500px" height="500px">
Berubah demi kehidupan, buat demi perubahan.