masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

HTML SVG

HTML5 menyokong SVG sebaris.

Apakah itu SVG?

  • SVG merujuk kepada Grafik Vektor Boleh Skala (Grafik Vektor Boleh Skala)

  • SVG digunakan untuk mentakrifkan berdasarkan grafik Vektor

  • SVG menggunakan format XML untuk mentakrifkan grafik

  • Imej SVG tidak akan kehilangan kualiti grafiknya apabila dibesarkan atau diubah saiznya

    • SVG ialah piawaian World Wide Web Consortium

Kelebihan SVG
Berbanding dengan format imej lain (seperti JPEG dan GIF), kelebihan menggunakan SVG ialah:

    Imej SVG boleh dibuat dan diubah suai dengan editor teks

    • Imej SVG boleh dicari, diindeks, skrip atau dimampatkan

    • SVG boleh berskala

    • Imej SVG boleh dicetak dengan kualiti tinggi pada sebarang resolusi

    • SVG boleh dibesarkan tanpa kehilangan kualiti imej

Pelayar sokongan

8.jpg


Internet Inline SVG disokong dalam Explorer 9+, Firefox, Opera , Chrome dan Safari.

Benamkan SVG terus ke halaman HTML

Dalam HTML5, anda boleh membenamkan elemen SVG terus ke dalam halaman HTML: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <polygon points="100,10 40,180 190,60 10,60 160,180"
             style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>

Keputusan menjalankan program:

6.jpg

Untuk belajar lebih lanjut tentang tutorial SVG, sila lawati Tutorial SVG.

Perbezaan antara SVG dan Kanvas

SVG ialah bahasa yang menggunakan XML untuk menerangkan grafik 2D.

Kanvas menggunakan JavaScript untuk melukis grafik 2D.

SVG adalah berdasarkan XML, yang bermaksud setiap elemen dalam SVG DOM tersedia. Anda boleh melampirkan pengendali acara JavaScript pada elemen.

Dalam SVG, setiap bentuk yang dilukis dianggap sebagai objek. Jika sifat objek SVG berubah, penyemak imbas boleh menghasilkan semula grafik secara automatik.

Kanvas dipaparkan piksel demi piksel. Dalam kanvas, sebaik sahaja grafik dilukis, ia tidak lagi mendapat perhatian pelayar. Jika kedudukannya berubah, keseluruhan pemandangan perlu dilukis semula, termasuk sebarang objek yang mungkin telah diliputi oleh grafik.

Perbandingan Kanvas dan SVG

Jadual berikut menyenaraikan beberapa perbezaan antara kanvas dan SVG .

      Canvas     SVG

依赖分辨率

不依赖分辨率

不支持事件处理器

支持事件处理器

弱的文本渲染能力

最适合带有大型渲染区域的应用程序（比如谷歌地图）

Keupayaan untuk menyimpan imej yang dihasilkan dalam format .png atau .jpg

能够以 .png 或 .jpg 格式保存结果图像

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

最适合图像密集型的游戏，

其中的许多对象会被频繁

重绘


不适合游戏应用

< p> Kerumitan yang tinggi akan memperlahankan pemaparan (sebarang aplikasi yang menggunakan DOM secara berlebihan tidak pantas)

Sesuai untuk permainan intensif grafik,

di mana banyak objek akan <🎜>

disemak dengan kerap <🎜>

<🎜 > <🎜>

Tidak sesuai untuk aplikasi permainan<🎜>

<🎜><🎜><🎜>
Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492486 permainan