Posisi jendela SVG umumnya ditentukan oleh CSS, dan ukurannya ditetapkan oleh lebar atribut dan tinggi elemen SVG. Namun, jika SVG disimpan dalam objek tertanam (seperti elemen objek, atau elemen SVG lainnya), dan dokumen yang berisi SVG diformat dengan CSS atau XSL, dan CSS atau nilai ukuran tertentu lainnya dari objek periferal ini sudah dapat menghitung ukuran jendela, maka ukuran objek periperal akan digunakan.
Di sini kita perlu membedakan konsep jendela, sistem koordinat jendela, dan sistem koordinat pengguna:
Jendela : Mengacu pada area persegi panjang yang terlihat di halaman web, dengan panjang dan lebar terbatas, dan area ini umumnya terkait dengan ukuran objek periferal. Sistem Koordinat Jendela : Pada dasarnya sistem koordinat dengan asal, sumbu x dan sumbu y; dan itu meluas ke kedua arah tanpa batas. Secara default, asal berada di sudut kiri atas jendela, sumbu x secara horizontal ke kanan, dan sumbu y secara vertikal ke bawah. Poin dalam sistem koordinat ini dapat diubah. Sistem Koordinat Pengguna : Pada dasarnya sistem koordinat dengan asal, sumbu x dan sumbu y; dan itu meluas ke kedua arah tanpa batas. Secara default, asal berada di sudut kiri atas jendela, sumbu x secara horizontal ke kanan, dan sumbu y secara vertikal ke bawah. Poin dalam sistem koordinat ini dapat diubah.Secara default, sistem koordinat jendela dan sistem koordinat pengguna tumpang tindih, tetapi harus dicatat di sini bahwa sistem koordinat jendela milik elemen yang membuat jendela. Setelah sistem koordinat jendela ditentukan, nada koordinat seluruh jendela akan ditentukan. Namun, sistem koordinat pengguna milik setiap elemen grafik. Selama grafik memiliki transformasi koordinat, sistem koordinat pengguna baru akan dibuat. Semua koordinat dan dimensi dalam elemen ini Gunakan sistem koordinat pengguna baru ini.
Sederhananya: sistem koordinat jendela menjelaskan profil koordinat awal dari semua elemen di jendela, dan sistem koordinat pengguna menjelaskan profil koordinat dari setiap elemen. Secara default, semua elemen menggunakan sistem koordinat pengguna default yang bertepatan dengan sistem koordinat jendela.
Koordinat transformasi ruang Mari kita tinjau transformasi koordinat pengguna Canvas, yang diimplementasikan melalui fungsi terjemahan, penskalaan, dan rotasi; Setiap transformasi akan bekerja pada angka yang ditarik nanti, kecuali jika transformasi dilakukan lagi, yang merupakan konsep sistem koordinat pengguna saat ini. Canvas hanya memiliki satu sistem koordinat pengguna.Di SVG, situasinya sangat berbeda. Sebagai elemen grafik vektor, SVG sendiri pada dasarnya dapat dianggap sebagai sistem koordinat pengguna; Kedua ruang koordinat SVG dapat diubah: transformasi ruang jendela dan transformasi ruang pengguna. Transformasi ruang jendela dikendalikan oleh viewbox properti dari elemen terkait (elemen -elemen ini membuat jendela baru); Transformasi ruang pengguna dikendalikan oleh atribut transformasi elemen grafik. Transformasi ruang jendela diterapkan pada seluruh jendela yang sesuai, dan transformasi ruang pengguna diterapkan pada elemen saat ini dan elemen anaknya.
Transformasi Jendela - Properti ViewBoxSemua elemen yang dapat membuat jendela (lihat bagian berikutnya), plus penanda, pola, dan elemen tampilan, memiliki atribut viewbox.
Format nilai atribut viewbox adalah (x0, y0, u_width, u_height), dan setiap nilai dipisahkan oleh koma atau ruang. Mereka bersama -sama menentukan area yang ditampilkan oleh jendela: koordinat sudut kiri atas jendela diatur ke (x0, y0), lebar jendela diatur ke u_width, dan tingginya u_height; Transformasi ini berfungsi untuk seluruh jendela.
Jangan bingung di sini: ukuran dan posisi jendela telah ditentukan oleh elemen yang menciptakan jendela dan elemen periferal (misalnya, jendela yang dibuat oleh elemen SVG terluar ditentukan oleh CSS, lebar dan tinggi). Viewbox di sini sebenarnya untuk mengatur area yang ditentukan ini untuk menampilkan bagian mana dari sistem koordinat jendela. Pengaturan ViewBox sebenarnya mencakup dua transformasi: zoom dan terjemahan ruang jendela.Perhitungan transformasi juga sangat sederhana: Ambil jendela tampilan elemen SVG terluar sebagai contoh, dengan asumsi bahwa lebar dan panjang SVG diatur ke lebar, tinggi, dan pengaturan kotak view adalah (x0, y0, u_width, u_height). Kemudian skala lebar dan tinggi gambar yang ditarik adalah: lebar/u_width, tinggi/u_height masing -masing. Koordinat sudut kiri atas jendela diatur ke (x0, y0).
Mengalami perbedaan dalam hasil yang ditarik oleh kode berikut:
<svg viewbox = "0 0 200 200">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
Pada gambar yang ditarik dalam contoh di atas, Anda dapat melihat persegi panjang hijau dan merah. Dalam hal ini, titik -titik di sistem koordinat jendela masih sesuai dengan titik -titik di jendela, yang juga merupakan default.
<svg viewbox = "0 0 100 100">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
Pada gambar yang ditarik dalam contoh di atas, Anda hanya dapat melihat persegi panjang hijau, dan persegi panjang hijau ditampilkan di layar dengan 200*200 piksel. Pada saat ini, titik koordinat tidak lagi satu per satu, dan angkanya diperbesar.
<svg viewbox = "0 0 400 400">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
Pada gambar yang ditarik dalam contoh di atas, unit sistem koordinat jendela dikurangi, sehingga kedua persegi panjang dikurangi.
Dalam pekerjaan sehari -hari, satu tugas yang sering kita selesaikan adalah skala satu set grafik untuk menyesuaikannya dengan wadah induknya. Kami dapat mencapai ini dengan mengatur properti ViewBox.
Elemen yang dapat membuat jendela baru Kapan saja, kita dapat menyarangkan Windows. Saat membuat jendela baru, sistem koordinat jendela baru dan sistem koordinat pengguna akan dibuat, dan tentu saja, yang baru akan dibuat, termasuk jalur kliping. Berikut ini adalah daftar elemen yang dapat membuat jendela baru: SVG : SVG mendukung bersarang. Simbol : Buat jendela baru saat dipakai oleh elemen penggunaan. Gambar : Jendela baru dibuat saat merujuk elemen SVG. Luar Negeri : Buat jendela baru untuk membuat objek di dalam. Tetap skala skala preserveaspectratio properti Terkadang, terutama saat menggunakan ViewBox, kami berharap grafik menempati seluruh jendela alih -alih menskalakan proporsi yang sama di kedua arah. Terkadang, kami berharap bahwa kedua arah gambar diskalakan pada skala tetap. Gunakan atribut ceserveaspectratio untuk mencapai tujuan mengendalikan ini.Properti ini adalah semua elemen yang dapat membuat jendela baru, plus gambar, penanda, pola, dan elemen tampilan. Selain itu, atribut PreserveasPectratio hanya akan berfungsi setelah viewbox diatur ke elemen. Jika viewbox tidak diatur, properti PrePreaspectratio diabaikan.
Sintaks atribut adalah sebagai berikut: preserveaspectratio = [tundukan] <ligner> [<Treamorslice>]]
Perhatikan bahwa 3 parameter perlu dipisahkan oleh spasi.
Tunda : Parameter opsional, hanya valid untuk elemen gambar. Jika nilai atribut preserveaspectratio dalam elemen gambar dimulai dengan tunduk, itu berarti bahwa elemen gambar menggunakan rasio penskalaan dari gambar yang dirujuk. Jika gambar yang direferensikan tidak memiliki rasio penskalaan, penundaan diabaikan. Semua elemen lain mengabaikan string ini. Align : Parameter ini menentukan penyelarasan penskalaan terpadu, dan nilai -nilai berikut dapat diambil:Tidak ada - penskalaan terpadu yang tidak dipaksakan, sehingga grafik dapat mengisi seluruh viewport sepenuhnya.
xminimin-paksa penskalaan seragam, dan sejajarkan <min-x> dan <min-y> di kotak view ke nilai x dan y minimum dari viewport.
XMIDYMIN - FORCE SCALING UNIFIKASI, dan menyelaraskan titik tengah dalam arah X di Vivewbox ke titik tengah arah x viewport. Singkatnya, titik tengah dalam arah X disejajarkan, dan arah Y adalah sama seperti di atas.
XmaxyMin - Paksa penskalaan seragam, dan sejajarkan <min-x> + <blubth> diatur di viewbox ke nilai x maksimum viewport.
Ada jenis nilai lain yang mirip dengan: xminimid, xmidymid, xmaxymid, xminymax, xmidymax, xmaxyMax. Arti kombinasi ini mirip dengan situasi di atas.
Meetorslice : Parameter opsional, Anda dapat menggunakan nilai -nilai berikut:Temui - Nilai default, skala secara seragam grafik, sehingga semua grafik ditampilkan di viewport.
SLICE - Penskalaan grafik yang disatukan, memungkinkan grafik untuk mengisi viewport, dan ekses dipotong.
Gambar berikut menjelaskan efek dari berbagai pengisian:
Transformasi Sistem Koordinat Pengguna - Atribut Transformasi Jenis transformasi ini ditentukan dengan mengatur properti transformasi elemen. Perlu dicatat di sini bahwa transformasi elemen yang ditetapkan oleh atribut transformasi hanya mempengaruhi elemen dan elemen anaknya, tidak ada hubungannya dengan elemen lain, dan tidak mempengaruhi elemen lain. Terjemahan - Terjemahan Transformasi terjemahan menerjemahkan nilai koordinat yang relevan ke posisi yang ditentukan, dan transformasi perlu diteruskan ke dalam jumlah yang diterjemahkan pada kedua sumbu. Lihat contoh:<rect x = "0" y = "0" transform = "translate (30,40)" />
Contoh ini menarik persegi panjang dan menerjemahkan titik awalnya (0,0) ke (30,40). Meskipun nilai koordinat (x, y) dapat diatur secara langsung, juga sangat nyaman untuk mengimplementasikannya menggunakan transformasi terjemahan. Parameter kedua dari transformasi ini dapat dihilangkan, dan default diproses ketika 0 diproses.
Putar - putar Memutar elemen juga merupakan tugas yang sangat umum. Kita dapat menggunakan transformasi putar untuk mengimplementasikannya, yang membutuhkan parameter sudut rotasi untuk dilewatkan. Lihat Contoh:<rect x = "20" y = "20" transform = "rotate (45)" />
Contoh ini menunjukkan persegi panjang rotasi 45 derajat. Beberapa catatan:
1. Transformasi di sini mengambil nilai sudut sebagai parameter.
2. Rotasi mengacu pada rotasi relatif terhadap sumbu x.
3. Rotasi diperluas di sekitar asal (0,0) dari sistem koordinat pengguna.
Condong - condong Transformasi juga mendukung transformasi kemiringan, yang dapat dimiringkan di sepanjang sumbu x (sudut kiri dan kiri dan kanan dimiringkan ke kanan, yang sebenarnya dimiringkan ke sumbu-y), atau di sepanjang sumbu y (atas dan ke bawah, yang dimiringkan ke sudut ke bawah, yang sebenarnya dimiringkan ke sumbu x-sumbu). Transformasi ini membutuhkan parameter sudut untuk dilewati, yang akan menentukan sudut kemiringan. Lihat contoh berikut:<svg>
<rect x = "0" y = "0" fill = "green" />
<lingkaran cx = "15" cy = "15" r = "15" fill = "red" />
<lingkaran cx = "15" cy = "15" r = "15" fill = "yellow" transform = "skewx (45)" />
<rect x = "30" y = "30" />
<rect x = "30" y = "30" transform = "skewx (45)" />
<rect x = "30" y = "30" transform = "Skewy (45)" />
</svg>
Dari hasilnya, Anda dapat secara langsung melihat posisi dan bentuk persegi panjang dengan ukuran yang sama setelah transformasi kemiringan yang berbeda. Perhatikan di sini bahwa posisi awal persegi panjang telah berubah, karena dalam sistem koordinat baru (30,30) sudah berada di posisi yang berbeda.
Skala skala Objek penskalaan diselesaikan oleh transformasi penskalaan, yang menerima 2 parameter, menentukan rasio penskalaan masing -masing pada horizontal dan vertikal. Jika parameter kedua dihilangkan, nilai yang sama dengan parameter pertama diambil. Lihat contoh berikut:<svg>
<Text x = "20" y = "20" font-size = "20"> ABC (skala) </teks>
<Text x = "50" y = "50" font-size = "20" transform = "scale (1.5)"> ABC (skala) </teks>
</svg>
Transform Matrix - Matriks Siapa pun yang telah mempelajari grafik tahu bahwa semua transformasi sebenarnya diwakili oleh matriks, sehingga transformasi di atas sebenarnya dapat diwakili oleh matriks 3*3:kartu as
BDF
0 0 1
Karena hanya 6 nilai yang digunakan, itu juga disingkat sebagai [ABCDEF]. Tetapkan matriks (a, b, c, d, e, f) untuk mengubah untuk mengimplementasikan transformasi yang sesuai. Transformasi akan mengubah koordinat dan panjang menjadi dimensi baru. Matriks yang sesuai dari transformasi di atas adalah sebagai berikut:
Transformasi Terjemahan [1 0 1 0 TX TY]:
1 0 TX
0 1 ty
0 0 1
Transformasi penskalaan [SX 0 0 SY 0 0]:
SX 0 0
0 sy 0
0 0 1
Transformasi rotasi [cos (a) sin (a) -sin (a) cos (a) 0 0]:
cos (a) -sin (a) 0
sin (a) cos (a) 0
00 1
Kecenderungan sepanjang sumbu x [1 0 tan (a) 1 0 0]:
1 tan (a) 0
0 1 0
0 0 1
Kecenderungan sepanjang sumbu y [1 tan (a) 0 1 0 0]:
11 0
tan (a) 1 0
00 1
Ubah esensi Ketika kami merangkum kanvas sebelumnya, kami tahu bahwa semua jenis transformasi diterapkan pada sistem koordinat pengguna. Dalam SVG, semua transformasi juga untuk dua sistem koordinat (pada dasarnya sistem koordinat pengguna). Setelah menentukan atribut transformasi ke objek kontainer atau objek grafik, atau menentukan atribut viewbox ke SVG, simbol, penanda, pola, tampilan, SVG akan berubah sesuai dengan sistem koordinat pengguna saat ini untuk membuat sistem koordinat pengguna baru, dan bertindak pada objek saat ini dan sub-objeknya. Unit koordinat dan panjang yang ditentukan dalam objek ini tidak lagi 1: 1 yang sesuai dengan sistem koordinat periferal, tetapi dikonversi ke sistem koordinat pengguna baru saat berubah bentuk; Sistem koordinat pengguna baru ini hanya bertindak pada elemen saat ini dan elemen anaknya. Rantai transformasi Properti Transform mendukung pengaturan beberapa transformasi. Transformasi ini hanya dipisahkan oleh ruang di tengah dan ditempatkan bersama di properti. Efek eksekusi sama dengan melakukan transformasi ini secara independen.<G Transform = "Translate (-10, -20) Skala (2) Rotate (45) Translate (5,10)">
<!-Elemen Grafik Buka Di Sini->
</g>
Efek di atas sama dengan yang berikut:
<g transform = "translate (-10, -20)">
<g transform = "skala (2)">
<g transform = "rotate (45)">
<g transform = "translate (5,10)">
<!-Elemen Grafik Buka Di Sini->
</g>
</g>
</g>
</g>
satuan Akhirnya, mari kita bicara tentang unit. Koordinat dan panjang apa pun dapat dilengkapi dengan dan tanpa unit. Tanpa unitNilai tanpa unit dianggap memiliki unit pengguna, yang merupakan nilai unit dari sistem koordinat pengguna saat ini.
Situasi membawa unitUnit yang relevan di SVG sama seperti di CSS: EM, EX, PX, PT, PC, CM, MM dan. % Juga dapat digunakan untuk panjang.
Unit Pengukuran Relatif: EM dan EX juga mirip dengan CSS, relatif terhadap ukuran font dan x-tinggi dari font saat ini.
Unit Pengukuran Absolut: Satu PX sama dengan unit pengguna, yaitu 5px sama dengan 5. Namun, apakah PX sesuai dengan piksel tergantung pada apakah ada beberapa transformasi.
Unit lainnya pada dasarnya kelipatan px: 1pt = 1.25px, 1pc = 15px, 1mm = 3.543307px, 1cm = 35.43307px, 1in = 90px.
Jika lebar dan tinggi elemen SVG terluar tidak menentukan unit (yaitu, unit pengguna), nilai -nilai ini akan dianggap sebagai PX.
Artikel ini cukup sulit untuk dibicarakan. Bahkan, ingatlah bahwa koordinat dan panjang elemen grafis merujuk pada koordinat dan panjang sistem koordinat pengguna baru setelah transformasi ganda sistem koordinat jendela dan transformasi sistem koordinat pengguna. Referensi Praktis: Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspxPusat Pengembangan: https://developer.mozilla.org/en/svg
Referensi Populer: http://www.chinasvg.com/
Dokumen Resmi: http://www.w3.org/tr/svg11/