HTML SVG-html tutorial-php.cn

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Output:

HTML SVG

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>

Salin selepas log masuk

Output:

HTML SVG

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>

Salin selepas log masuk

Output:

HTML SVG

Contoh #4 – Melukis garis lurus dengan SVG dalam HTML5

Kita boleh menggunakan tag untuk melukis garis lurus dalam SVG HTML5; warna, ketebalan garisan dan kedudukan boleh ditentukan.

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>

Salin selepas log masuk

Output:

HTML SVG

Contoh #5 – Melukis gerhana melalui SVG dalam HTML5

Kita boleh menggunakan teg untuk melukis gerhana dalam HTML5 SVG; warna dan kedudukannya boleh ditakrifkan bersama die dengan jejarinya.

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>

Salin selepas log masuk

Output:

HTML SVG

Contoh #6 – Membuat poligon dengan SVG dalam HTML5

Teg boleh digunakan dalam SVG untuk membuat poligon. Dalam teg, kami dikehendaki menyebut kedudukan setiap titik. Warna pengisian, ketebalan garis besar, dsb., boleh ditakrifkan dalam kod juga.

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>

Salin selepas log masuk

Output:

HTML SVG

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>

Salin selepas log masuk

Output:

HTML SVG

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 tag dalam SVG yang boleh digunakan. Teks boleh ditetapkan pada mana-mana kedudukan dalam SVG, dan anda boleh menyesuaikan warna serta butiran lain juga.

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>

Salin selepas log masuk

Output:

HTML SVG

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>

Salin selepas log masuk

Output:

HTML SVG

Contoh #10 – Menggunakan Gradien Linear dalam SVG

Anda boleh menggunakan Gradien linear dan jejari dalam Kanvas HTML banyak baris SVG. Kecerunan perlu bersarang dalam tag. Teg ini kemudiannya ditandakan dalam teg SVG untuk menandakan penggunaannya. Mari kita lihat contoh yang menggunakan Gradien dalam gerhana.

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>

Salin selepas log masuk

Output:

HTML SVG

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7478

Tutorial CakePHP

1377

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles