Pengantar SVG 2D di HTML5 - Pendahuluan dan Penggunaan Gambar Grafik (Bentuk Dasar)

Penulis：Eve Cole Waktu Pembaruan：2025-04-03 02:00:03

Bentuk dasar

SVG memberikan banyak bentuk dasar, dan elemen -elemen ini dapat digunakan secara langsung, yang jauh lebih baik daripada kanvas. Jangan bicara omong kosong, lihat saja contohnya, ini yang paling langsung:

<svg>

<Poin Polyline = "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"

stroke = "oranye" fill = "transparan" stroke-lebar = "5"/>

<Point Polygon = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"

stroke = "hijau" fill = "transparan" stroke-lebar = "5"/>

</svg>

Hasil yang ditampilkan dalam HTML ini adalah sebagai berikut:

Contoh ini menarik banyak bentuk: persegi panjang normal, persegi panjang bundar, lingkaran, elips, garis lurus, poligon, dan jalur. Ini semua adalah elemen grafik dasar. Meskipun ada banyak cara untuk menggambar grafik, seperti Rect dapat diimplementasikan menggunakan Rect atau Path, kita masih harus mencoba menjaga konten SVG pendek dan ringkas dan mudah dibaca .

Di bawah ini adalah instruksi untuk menggunakan setiap bentuk (hanya ada sifat dasar yang mengontrol bentuk dan posisi gambar, dan sifat -sifat seperti pengisian dirangkum nanti).

Rectangle - Elemen Rect

Elemen ini memiliki 6 properti yang mengontrol posisi dan bentuk, yaitu:

X: Nilai x dari koordinat (sistem koordinat pengguna) dari sudut kiri atas persegi panjang.

Y: Nilai Y dari koordinat (sistem koordinat pengguna) dari sudut kiri atas persegi panjang.

Lebar: Lebar persegi panjang.

Tinggi: Tinggi persegi panjang.

RX: Ketika efek sudut bulat tercapai, jari-jari sudut bulat di sepanjang sumbu x.

RY: Saat mencapai efek sudut bulat, jari-jari sudut bulat di sepanjang sumbu y.

Misalnya, dalam contoh di atas, efek sudut bulat dicapai, dan Anda juga dapat mencapai efek sudut elips dengan mengatur RX dan RY ke nilai yang berbeda.

Elemen Lingkaran - Lingkaran

Sifat -sifat elemen ini sederhana, terutama untuk menentukan pusat dan jari -jari:

R: Jari -jari lingkaran.

CX: Nilai X dari koordinat pusat.

Cy: Nilai Y dari koordinat pusat lingkaran.

Ellipse - Elemen Ellipse

Ini adalah elemen melingkar yang lebih umum. Anda dapat mengontrol panjang sumbu semi-mayor dan sumbu semi-mayor masing-masing untuk mencapai elips yang berbeda. Sangat mudah untuk berpikir bahwa ketika kedua semi-sumbu sama, itu adalah lingkaran yang sempurna.

RX: Sumbu setengah mayor (X Radius).

RY: Sumbu semi-short (y-radius).

CX: Nilai X dari koordinat pusat.

Cy: Nilai Y dari koordinat pusat lingkaran.

Elemen garis - garis

Garis lurus perlu menentukan titik awal dan titik akhir:

x1: Titik awal koordinat x.

Y1: Titik awal koordinat y.

x2: titik akhir x koordinat.

Y2: titik akhir koordinat y.

Polyline - Elemen Polyline

Polylines terutama perlu menentukan titik akhir dari setiap segmen baris, jadi hanya set satu titik yang diperlukan sebagai parameter:

Poin: Serangkaian titik yang dipisahkan oleh spasi, koma, newline, dll. Setiap titik harus memiliki 2 angka: nilai x dan nilai y. Jadi 3 poin berikut (0,0), (1,1) dan (2,2) dapat ditulis sebagai: 0 0, 1 1, 2 2.

Poligon - Elemen Poligon

Elemen ini adalah melakukan satu langkah lagi dari elemen polyline, sambungkan titik terakhir dan titik pertama untuk membentuk sosok tertutup. Parameternya sama.

Elemen jalur - jalur

Ini adalah elemen yang paling umum dan kuat; Menggunakan elemen ini Anda dapat mengimplementasikan sosok lain, tidak hanya bentuk dasar di atas, tetapi juga bentuk kompleks seperti kurva bezier; Selain itu, menggunakan jalur dapat mencapai segmen transisi yang lancar. Meskipun polyline juga dapat digunakan untuk mencapai efek ini, ada banyak titik yang perlu disediakan, dan efeknya tidak baik jika diperbesar. Elemen ini mengontrol posisi dan bentuk dengan hanya satu parameter:

D: Serangkaian instruksi menggambar dan parameter gambar (poin).

Instruksi menggambar dibagi menjadi dua jenis: instruksi koordinat absolut dan instruksi koordinat relatif. Huruf yang digunakan dalam dua instruksi ini adalah sama, yaitu, huruf besar dan kecil berbeda. Instruksi absolut menggunakan huruf besar, dan koordinat juga merupakan koordinat absolut; Instruksi relatif menggunakan huruf kecil yang sesuai, dan koordinat poin mewakili offset.

Instruksi menggambar koordinat absolut

Parameter dari rangkaian instruksi ini mewakili koordinat absolut. Dengan asumsi bahwa sikat saat ini terletak di (x0, y0), instruksi koordinat absolut berikut mewakili makna sebagai berikut:

petunjuk	parameter	menjelaskan
M	xy	Pindahkan sikat ke titik (x, y)
L	xy	Sikat menggambar segmen garis dari titik saat ini ke titik (x, y)
H	X	Sikat menggambar segmen garis horizontal dari titik saat ini ke titik (x, y0)
V	y	Sikat menggambar segmen garis vertikal dari titik saat ini ke titik (x0, y)
A	RX RY X-AXIS-ROTASI BESAR-BENAR BENAR-BATAH XY XY	Sikat menarik busur dari titik saat ini ke titik (x, y)
C	x1 y1, x2 y2, xy	Sikat menarik kurva bezier kubik dari titik saat ini ke titik (x, y)
S	x2 y2, xy	Versi Khusus Kurva Bezier Cubic (Titik Kontrol Pertama Dihilangkan)
Q	x1 y1, xy	Gambar kurva bezier kuadratik ke titik (x, y)
T	xy	Versi Khusus Kurva Bezier Kuadrat (titik kontrol dihilangkan)
Z	Tidak ada parameter	Gambar sosok tertutup, dan jika atribut D tidak menentukan perintah Z, lalu gambar segmen garis alih -alih gambar yang melampirkan.

Pindahkan perintah kuas m, gambar perintah garis: l, h, v, dan tutup perintah z semuanya relatif sederhana; Berikut ini adalah fokus pada beberapa instruksi untuk menggambar kurva. Instruksi gambar busur: rx ry x-sumbu-sumbu-rotasi sapuan besar-arc-flag-flag xy

Lebih rumit untuk menghubungkan 2 poin dengan busur, dan ada banyak situasi, sehingga perintah ini memiliki 7 parameter, yang mengontrol setiap atribut kurva. Berikut ini menjelaskan arti dari nilai numerik:

rx, ry adalah panjang sumbu semi-mayor dan sumbu semi-short dari busur

Rotasi sumbu x adalah sudut antara sumbu x dan arah horizontal di mana busur ini berada, yaitu, sudut rotasi berlawanan arah jarum jam dari sumbu x, dan angka negatif mewakili sudut rotasi searah jarum jam.

Bat-arc-flag adalah 1 untuk mewakili busur sudut besar dan 0 untuk mewakili busur sudut kecil.

Sapu-flag adalah 1, yang mewakili busur dari titik awal ke titik akhir searah jarum jam di sekitar pusat, dan 0 mewakili arah berlawanan arah jarum jam.

x, y adalah koordinat terminal busur.

Saya tidak akan berbicara tentang dua parameter pertama dan dua parameter terakhir, ini sangat sederhana; Mari kita bicara tentang tiga parameter di tengah:

X-sumbu-rotasi mewakili sudut rotasi, dan mengalami perbedaan busur dalam contoh berikut:

<svg>

<Path D = "M10 315

L 110 215

A 30 50 0 0 0 1 162.55 162.45

L 172.55 152.45

A 30 50 -45 0 1 215.1 109.9

L 315 10 "stroke =" hitam "fill =" hijau "stroke-lebar =" 2 "isi-opacity =" 0,5 "/>

</svg>

HTML di atas menggambar gambar berikut:

Dari gambar, kita dapat melihat bahwa parameter rotasi elips yang berbeda mengarah ke arah yang berbeda dari busur yang ditarik. Tentu saja, parameter ini tidak berpengaruh pada lingkaran yang sempurna.

Kontrol besar-arc-flag dan sapu-flag ukuran dan arah busur, dan mengalami perbedaan dalam busur dalam contoh berikut:

<svg>

<Path D = "M80 80

A 45 45, 0, 0, 0, 125 125

L 125 80 Z "Fill =" Green "/>

<Path D = "M230 80

A 45 45, 0, 1, 0, 275 125

L 275 80 Z "FILL =" RED "/>

<Path D = "M80 230

A 45 45, 0, 0, 1, 125 275

L 125 230 Z "Fill =" Purple "/>

<Path D = "M230 230

A 45 45, 0, 1, 1, 275 275

L 275 230 Z "Fill =" Blue "/>

</svg>

HTML ini menggambar gambar berikut:

Dari hal di atas, kita dapat melihat bahwa parameter ini sebenarnya adalah satu -satunya parameter yang diperlukan untuk menentukan bagian busur. Juga terlihat di sini bahwa busur di SVG lebih rumit daripada yang ada di kanvas.

Menggambar Instruksi Kurva Bezier Cubic: C X1 Y1, X2 Y2, XY

Ada dua titik kontrol dalam kurva bezier kubik, yaitu (x1, y1) dan (x2, y2), dan yang terakhir (x, y) mewakili titik akhir kurva. Mengalami contoh -contoh berikut:

<svg>

</svg>

Cuplikan HTML ini menggambar angka berikut:

Dari hal di atas kita dapat melihat bahwa titik kontrol mengontrol radian kurva.

Versi Khusus Kurva Bezier Cubic: SX2 Y2, XY

Sering kali, untuk menggambar kurva yang halus, perlu untuk menggambar kurva terus menerus beberapa kali. Pada saat ini, untuk menghaluskan transisi, titik kontrol kurva kedua seringkali merupakan titik pemetaan dari titik kontrol kurva pertama di sisi lain kurva. Versi yang disederhanakan ini dapat digunakan saat ini. Perlu dicatat di sini bahwa jika tidak ada instruksi S lain atau instruksi C di depan instruksi S, maka kedua titik kontrol akan dianggap sama dan merosot ke dalam kurva bezier kuadrat; Jika instruksi S digunakan setelah instruksi S lain atau instruksi C, titik kontrol pertama dari instruksi S berikutnya akan ditetapkan secara default ke titik pemetaan titik kontrol kedua dari kurva sebelumnya. Mari kita alami:

<svg>

</svg>

Fragmen HTML ini ditarik sebagai berikut:

Instruksi S di atas hanya memiliki titik kontrol kedua, dan titik kontrol pertama menggunakan titik pemetaan dari titik kontrol kedua dari instruksi kurva sebelumnya.

Menggambar Instruksi Kurva Bezier Kuadrat: QX1 Y1, XY, T XY (Versi Khusus Kurva Bezier Kuadratik)

Kurva bezier kuadrat hanya memiliki satu titik kontrol (x1, y1), yang biasanya ditunjukkan pada gambar di bawah ini:

Jika Anda menggambar kurva terus menerus, Anda juga dapat menggunakan versi yang disederhanakan T. Demikian pula, ketika T hanya sebelum perintah Q atau T, titik kontrol dari perintah T berikutnya akan diatur ke titik pemetaan dari titik kontrol kurva sebelumnya secara default. Mari kita alami:

<svg>

</svg>

Fragmen HTML ini ditarik sebagai berikut:

Demikian pula, jika perintah T tidak didahului oleh perintah Q atau T, dianggap tidak ada titik kontrol dan garis yang ditarik adalah garis lurus.

Instruksi Menggambar Koordinat Relatif

Surat -surat instruksi menggambar koordinat absolut adalah sama, kecuali bahwa semuanya adalah huruf kecil. Parameter yang terlibat dalam koordinat dalam parameter rangkaian instruksi ini mewakili koordinat relatif, yang berarti bahwa parameter mewakili offset dari titik saat ini ke titik target, angka positif mewakili offset positif ke sumbu, dan angka negatif mewakili offset terbalik. Namun, untuk instruksi Z, tidak ada perbedaan dalam kasus.

Perlu dicatat di sini bahwa instruksi koordinat absolut dan instruksi koordinat relatif dapat digunakan secara campuran . Terkadang penggunaan campuran dapat menyebabkan metode menggambar yang lebih fleksibel.

Catatan tentang gambar jalur SVG:

Saat menggambar sosok dengan lubang, Anda harus memperhatikan: gambar tepi luar harus berlawanan arah jarum jam, dan urutan tepi lubang di dalamnya harus searah jarum jam. Hanya efek pengisian grafis yang ditarik dengan cara ini akan benar.

Referensi Praktis:

Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Pusat Pengembangan: https://developer.mozilla.org/en/svg

Referensi Populer: http://www.chinasvg.com/

Dokumen Resmi: http://www.w3.org/tr/svg11/