Rumah > Artikel > hujung hadapan web > HTML SVG
HTML SVG
- 王林asal
- 2024-09-04 16:40:001105semak imbas
Menggunakan imej dalam HTML adalah hebat untuk tapak web yang kaya dengan multimedia. Apa yang anda perlu lakukan ialah menambah tag pada kod HTML, dan viola, penyemak imbas anda akan memaparkan dan juga menambah pautan ke imej pilihan anda. Ia menjadi sedikit merisaukan apabila anda mengetahui bahawa imej atau rajah akan dizum masuk kerana JPG atau PNG tidak akan menunjukkan sebarang butiran lanjut setelah ia dizum melepasi peleraiannya. SVG adalah penyelesaian kepada masalah ini. SVG bermaksud Grafik Vektor Boleh Skala. Seperti namanya, ini boleh dizum masuk seberapa banyak yang diperlukan, dan butirannya tidak pernah hilang. SVG tidak eksklusif untuk teknologi web, tetapi menggunakannya dalam HTML adalah sangat kemas. SVG berguna untuk gambar rajah, vektor, carta dan graf dalam penyemak imbas.
Sintaks Membenamkan SVG dalam HTML:
Sama seperti menggunakan kanvas dalam HTML5, terdapat teg mudah yang boleh anda gunakan untuk membenamkan SVG dalam halaman HTML5.
Sintaks:
<svg width="width here" height="height here "> …. …. …. …. </svg>
Contoh SVG dalam HTML
Diberikan di bawah adalah beberapa contoh vektor yang boleh dibuat dan dibenamkan dalam HTML5:
Contoh #1 – Melukis segi empat tepat melalui SVG dalam HTML
Kod:
<!DOCTYPE html> <html> <body> <svg width="500" height="600"> <rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"/> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Contoh #2 – Melukis segi empat sama dengan bucu bulat dalam SVG
Untuk segi empat sama dengan bucu bulat, kita perlu menentukan jejari bucu dengan menggunakan rx, ry selain daripada saiz dan dimensi segi empat sama.
Kod:
<!DOCTYPE html> <html> <body> <svg width="500" height="500"> <rect x="100" y="100" rx="30" ry="30" width="300" height="300" style= "fill:green stroke:blue; stroke-width:5 ; opacity:0.5" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Contoh #3 – Melukis bulatan dalam SVG dengan garis besar dan pemfailan warna di dalamnya
Kod:
<!DOCTYPE html> <html> <body> <svg width= "400" height= "400"> <circle cx= "100" cy= "100" r="90" stroke= "red" stroke-width="1" fill="grey" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Contoh #4 – Melukis garis lurus dengan SVG dalam HTML5
Kita boleh menggunakan
Kod:
<html> <body> <svg width= "400" height= "400"> <line x1 = "5" y1 = "5" x2 = "300" y2 = "300" style = "stroke:yellow; stroke-width:3"/> </svg> </body> </html>
Output:
Contoh #5 – Melukis gerhana melalui SVG dalam HTML5
Kita boleh menggunakan
Kod:
<!DOCTYPE html> <html> <body> <svg height="300" width="300"> <ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3" /> Sorry but this browser does not support inline SVG.</svg> </body> </html>
Output:
Contoh #6 – Membuat poligon dengan SVG dalam HTML5
Teg
Kod:
<!DOCTYPE html> <html> <body> <svg height="300" width="600" > <polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Contoh #7 – Membuat polyline dengan SVG dalam HTML5
Polyline digunakan untuk melukis bentuk yang hanya akan terdiri daripada garis lurus. Perlu diingat bahawa talian ini mesti disambungkan juga. Berikut ialah contoh pelaksanaan polyline dalam HTML5.
Kod:
<!DOCTYPE html> <html> <body> <svg height="300" width="600"> <polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Contoh #8 – Melukis Teks dengan SVG dalam HTML5
Teks itu mungkin diperlukan untuk mana-mana SVG dalam banyak situasi, seperti melabelkan carta, dll. Nasib baik, terdapat
Kod:
<!DOCTYPE html> <html> <body> <svg height="300" width="500"> <text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Contoh #9 – Melukis Bintang dengan SVG dalam HTML5
Sekarang kita selesai dengan asas-asasnya, mari buat bintang yang akan dibuat dengan bantuan SVG.
Kod:
<!DOCTYPE html> <html> <body> <svg width="400" height="400"> <polygon points="110,10 50,198 200,78 30,78 170,198" style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Contoh #10 – Menggunakan Gradien Linear dalam SVG
Anda boleh menggunakan Gradien linear dan jejari dalam Kanvas HTML banyak baris SVG. Kecerunan perlu bersarang dalam
Kod:
<!DOCTYPE html> <html> <body> <svg height="300" width="400"> <defs> <linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%"> <stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Kesimpulan
Dalam kes tapak di mana rajah dan carta akan digunakan, SVG ialah penyelamat. Kebanyakan penyemak imbas web moden menyokong SVG, juga dan selain daripada berskala. Satu lagi faedah menggunakan SVG ialah saiz failnya. Kerana ia hanyalah sedikit kod, SVG boleh mempunyai jejak yang sangat kecil dalam memori dan lebar jalur yang digunakan berbanding dengan Imej tradisional.
Atas ialah kandungan terperinci HTML SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!