SVG Sebaris HTML5
Apakah itu SVG?
SVG bermaksud Grafik Vektor Boleh Skala
SVG digunakan untuk mentakrifkan grafik berasaskan vektor untuk web
SVG menggunakan grafik definisi Format XML
Imej SVG tidak akan kehilangan kualiti grafiknya apabila dibesarkan atau diubah saiznya
SVG ialah piawaian World Wide Web Consortium
Dengan SVG, kami boleh mencapai Banyak operasi lukisan adalah sama seperti jenis API Kanvas, tetapi apabila melukis teks pada elemen Kanvas, aksara akan ditetapkan padanya dalam piksel. Teks menjadi sebahagian daripada imej dan kandungan teks tidak boleh diubah melainkan kawasan lukisan Kanvas dilukis semula. Oleh sebab itu, teks pada Kanvas tidak boleh diambil oleh enjin carian, tetapi teks pada SVG boleh dicari. Contohnya, Google mengindeks teks daripada kandungan SVG di web.
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
Tambah SVG pada halaman
Mod sebaris: Digunakan seperti elemen lain dalam HTML, berdasarkan aplikasi interaktif HTML, JavaScript dan SVG boleh ditulis.
<body> <svg width="200" height="200"> </svg> </body>
Kaedah keluar: Import fail SVG luaran dalam HTML melalui elemen <img>
<img src="example.svg" />
Bentuk ringkas
SVG mengandungi elemen bentuk asas , seperti segi empat tepat, bulatan dan elips. Saiz dan kedudukan unsur bentuk ditakrifkan sebagai sifat. Sifat segi empat tepat ialah lebar dan tinggi. Bulatan mempunyai atribut r yang mewakili jejari. Mereka semua menggunakan sintaks CSS untuk menyatakan jarak, jadi unit termasuk px, titik, em, dsb.
Segi empat tepat: x="50" y="20" bermaksud titik permulaan segi empat tepat ialah (50,20)
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> </svg> </body>
Objek suis lukisan SVG dilakukan mengikut susunan ia muncul dalam dokumen objek. Jika kita melukis bulatan selepas melukis segi empat tepat, bulatan akan muncul di atas segi empat tepat.
Tambahkan kalangan:
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"> </rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </svg> </body>
Ubah elemen SVG
Dalam SVG, berbilang elemen boleh digabungkan untuk membentuk satu kumpulan dan menjadi satu keseluruhan. Elemen
<g> mewakili "kumpulan" dan boleh digunakan untuk menggabungkan berbilang elemen berkaitan. Ahli kumpulan boleh dirujuk dengan ID. Di samping itu, kumpulan itu juga boleh diubah secara keseluruhan. Jika anda menambah atribut transformasi pada kumpulan, semua kandungan dalam kumpulan akan diubah. Sifat ubah termasuk putaran, ubah bentuk, penskalaan dan serong.
<svg width="200" height="200"> <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </svg>
Gunakan semula kandungan
Elemen <defs> dalam SVG digunakan untuk menentukan kandungan yang dikhaskan untuk kegunaan masa hadapan. Anda boleh menggunakan elemen <gunakan> untuk memautkan kandungan yang ditakrifkan oleh <defs> Dengan dua elemen ini, anda boleh menggunakan semula kandungan yang sama beberapa kali dan menghapuskan lebihan.
<svg width="200" height="200"> <defs> <g id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </defs> <use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.4)"></use> <use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.75)"></use> <use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"></use> </svg>
Corak dan kecerunan
<svg> <defs> <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" /> </pattern> <%--渐变--%> <linearGradient id="RedBlackGradient"> <stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> </defs> <rect x="0" y="20" width="100" height="80" stroke="red" fill="url(#RedBlackGradient)" /> <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#GravelPattern)" /> </svg>
Laluan
<path> tentukan laluan.
<teg laluan>
<teg laluan digunakan untuk menentukan laluan.
Arahan berikut boleh digunakan untuk data laluan:
M = moveto
L = lineto
H = horizontal lineto
V = garis menegak
C = lengkung
S = lengkung licin
Q = lengkung Belzier kuadratik
T = lengkung Belzier kuadratik licin
A = Lengkok elips
Z = closepath
Nota: Semua arahan di atas membenarkan huruf kecil. Huruf besar bermaksud kedudukan mutlak, huruf kecil bermaksud kedudukan relatif.
SVG mengandungi bentuk ringkas serta laluan bentuk bebas. Elemen laluan mempunyai atribut d, yang mewakili data laluan. Dalam nilai d, M mewakili Move to, L mewakili Line to, Q mewakili lengkung kuadratik, dan Z mewakili laluan tertutup.
<svg width="200" height="200"> <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z" /> </svg>
Teks
Teks dalam SVG berbeza sedikit daripada definisi gaya dalam CSS
<svg width="200" height="200"> <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f" font-size="40px" font-weight="bold">Hello SVG</text> </svg>
Kedua-dua SVG dan Kanvas Perbezaan antara
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.
