Pendahuluan SVG 2D HTML5 5 - Representasi Warna dan Metode Definisi

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

SVG dan kanvas adalah sama, keduanya menggunakan metode representasi warna HTML/CSS standar, dan warna -warna ini dapat digunakan untuk atribut isian dan stroke.

Pada dasarnya ada cara berikut untuk mendefinisikan warna :

1. Nama warna: Gunakan nama warna merah, biru, hitam ...

2. Nilai RGBA/RGB: Ini juga mudah dimengerti, misalnya #FF0000, RGBA (255.100.100.0.5).

3. Nilai heksadesimal: warna yang didefinisikan dalam heksadesimal, seperti #FFFFFF.

4. Nilai Gradien: Ini juga sama seperti di kanvas, mendukung dua warna gradien: gradien linier dan gradien cincin. Seperti yang ditunjukkan pada gambar di bawah ini:

5. Pengisian Pola: Gunakan pola khusus sebagai warna pengisian.

Beberapa yang pertama sangat sederhana, mari kita fokus pada dua warna pengisi dalam dua yang berikutnya.

Gradien linier

Gradien linier dapat digunakan untuk menentukan gradien linier, dan setiap komponen warna gradien didefinisikan menggunakan elemen stop. Lihat contoh berikut:

<svg>

<defs>

</lineargradient>

</lineargradient>

<type style = "text/css"> <! [CDATA [

#rect1 {fill: url (#gradient1); }

.stop1 {stop-color: red; }

.stop2 {stop-color: black; Stop-opacity: 0; }

.stop3 {stop-color: blue; }

]]>

</tyle>

</efs>

</svg>

Dalam contoh ini, kita perlu mencatat :

1. Elemen warna gradien harus ditempatkan di elemen DEFS;

2. Anda perlu mengatur nilai ID untuk elemen gradien, jika tidak, elemen lain tidak akan dapat menggunakan gradien ini.

3. Anggota warna gradien didefinisikan menggunakan berhenti, dan propertinya juga dapat didefinisikan menggunakan CSS; Ini mendukung atribut seperti kelas dan ID, yang didukung oleh HTML standar. Atribut umum lainnya adalah sebagai berikut :

Atribut Offset : Ini mendefinisikan rentang aksi warna anggota, dan nilai atribut ini adalah dari 0% hingga 100% (atau 0 hingga 1); Biasanya warna pertama diatur ke 0%, dan yang terakhir diatur ke 100%.

Atribut Stop-Color : Ini sangat sederhana, mendefinisikan warna warna anggota.

Properti Stop-Opacity : Menentukan transparansi warna anggota.

Atribut X1, Y1, X2, Y2 : Dua titik ini menentukan arah gradien. Jika Anda tidak menulisnya secara default, itu adalah gradien horizontal. Dalam contoh di atas, gradien vertikal juga dibuat.

4. Gunakan warna gradien, seperti yang ditunjukkan pada contoh, cukup tetapkan nilai untuk mengisi atau membelai dalam bentuk url (#ID).

5. Penggunaan kembali anggota gradien: Anda juga dapat menggunakan xlink: href untuk merujuk pada anggota gradien yang ditentukan, sehingga contoh di atas juga dapat ditulis ulang sebagai berikut:

</lineargradient>

Gradien cincin

Gunakan elemen RadialGradient untuk menentukan gradien cincin, atau gunakan berhenti untuk menentukan warna anggota. Lihat contoh:

<svg>

<defs>

</RadialGradient>

</RadialGradient>

</efs>

</svg>

Dari contoh di atas, kecuali untuk nama elemen dan beberapa anggota khusus, yang lainnya sama dengan gradien linier, termasuk definisi stop, harus ditempatkan di defs, itu harus diatur ke ID, menggunakan url (#id) untuk menetapkan nilai, dll. Anggota khusus ini adalah sebagai berikut:

Atribut Offset : Ini sama dengan nilai gradien linier, tetapi artinya berbeda. Dalam gradien cincin, 0% mewakili pusat lingkaran, yang mudah dimengerti.

Atribut CX, CY, R : Faktanya, mudah dimengerti. Cincin itu bertahap. Tentu saja, Anda perlu mendefinisikan pusat dan jari -jari cincin. Anda dapat memahami ukuran dan posisi lingkaran dalam contoh di atas.

FX, TA Atribut: Menentukan posisi di tengah warna (fokus), yaitu, koordinat di tempat terpadat warna gradien. Dalam contoh di atas, kemerahan paling merah adalah pusat lingkaran, yang merupakan efek default; Jika Anda ingin mengubahnya, Anda dapat mengatur nilai koordinat FX, FY.

Namun, Anda perlu memperhatikan nilai -nilai CX, Cy, R, FX, FY di atas. Anda akan menemukan bahwa mereka semua adalah desimal, jadi apa unitnya?

Ini mengharuskan Anda untuk terlebih dahulu memahami atribut terkait lain: gradientunits , yang mendefinisikan unit koordinat yang digunakan untuk mendefinisikan warna gradien. Properti ini memiliki 2 nilai yang tersedia: UsersPaceOnuse dan ObjectBoundingBox.

ObjectBoundingBox adalah nilai default. Koordinat yang digunakannya relatif terhadap kotak pelampung objek (kasus di mana itu bukan kotak penutup persegi lebih rumit, lewati), dan rentang nilai adalah 0 hingga 1. Misalnya, nilai koordinat CX dan Cy dalam contoh di atas (0,25, 0,25). Ini berarti bahwa pusat lingkaran adalah 1/4 dari sudut kiri atas kotak selungkup, dan jari -jari 0,25 berarti bahwa jari -jari adalah 1/4 dari panjang kotak selungkup kotak objek, seperti yang Anda lihat pada gambar.

UsersPaceOnuse berarti bahwa koordinat absolut digunakan. Saat menggunakan pengaturan ini, Anda harus memastikan bahwa warna gradien dan objek mengisi harus disimpan di posisi yang sama.

Lihatlah contoh berikut, perhatikan bahwa nilai default properti gradientunits adalah ObjectBoundingBox:

<svg>

<defs>

<RadialGradient id = "gradient5"

cx = "0,5" cy = "0,5" r = "0,5" fx = "0,25" fy = "0,25">

</RadialGradient>

</efs>

<rect x = "10" y = "10" rx = "15" ry = "15"

fill = "url (#gradient5)" stroke = "hitam" stroke-lebar = "2"/>

</svg>

Anda akan tahu arti fokus dengan melihat rendering.

Selain itu, ada elemen warna gradien dan beberapa sifat transformasi, seperti gradienttransform , yang bukan fokus di sini, dan transformasi akan dirangkum nanti.

Atribut lain yang mungkin digunakan adalah properti spreadmethod , yang mendefinisikan perilaku yang harus diambil oleh warna gradien ketika mencapai titik akhirnya. Properti ini memiliki 3 nilai opsional: PAD (default), Reflect, Repeat. Tak perlu dikatakan, PAD adalah transisi alami. Setelah warna gradien selesai, gunakan warna anggota terakhir untuk secara langsung membuat bagian yang tersisa dari objek. Refek akan membuat warna gradien berlanjut, tetapi warna gradien akan terus terbalik, mulai dari warna terakhir ke warna pertama; Ketika titik akhir warna gradien tercapai lagi, membalikkan urutan, sehingga objek diisi dengan cara ini. Ulangi juga akan memungkinkan warna gradien untuk melanjutkan rendering, tetapi tidak akan dibalik, dan masih akan membuat dari warna pertama ke warna terakhir berulang kali. Rendering adalah sebagai berikut:

Lihatlah sepotong kode yang dirender berulang kali:

<svg>

<defs>

<RadialGradient ID = "Gradient"

cx = "0,5" cy = "0,5" r = "0,25" fx = ". 25" fy = ". 25"

spreadmethod = "ulangi">

</RadialGradient>

</efs>

<rect x = "50" y = "50" rx = "15" ry = "15"

fill = "url (#gradient)"/>

</svg>

Isi tekstur

Pengisian tekstur juga merupakan cara yang populer untuk mengisi. Di SVG, Anda dapat menggunakan pola untuk membuat tekstur, dan kemudian menggunakan pola ini untuk mengisi objek lain. Mari kita lihat contoh secara langsung:

<svg>

<defs>

</lineargradient>

</lineargradient>

</efs>

<defs>

</pol>

</efs>

</svg>

Contohnya terlihat sederhana, buat pola dari warna gradien dan kemudian gunakan polanya

Isi persegi panjang. Catatan di sini:

1. Efeknya berbeda saat mengisi pola ini di browser yang berbeda.

Misalnya, contoh bekerja sama di firefix dan chrome. Tetapi jika Anda membuat warna gradien

Jika pola didefinisikan dalam kombinasi DEFS yang sama, Firefox masih dapat dirender secara normal.

Namun, Chrome tidak dapat mengenali warna gradien, itu hanya akan mengisinya dengan hitam default.

2. Pola juga perlu mendefinisikan ID.

3. Pola juga harus didefinisikan dalam DEFS.

4. Penggunaan pola juga untuk secara langsung menetapkan URL (#ID) untuk mengisi atau membelai.

Semua di atas sangat sederhana. Mari kita fokus pada representasi koordinat dalam contoh. Koordinat lebih rumit dalam pola.

Pola ini berisi dua sifat terkait: Atribut PatternUnits dan PatternContentUnits; Kedua properti masih hanya memiliki dua nilai: ObjectBoundingBox dan UsersPaceOnuse. Arti dari kedua nilai ini telah dibahas di atas. Yang mudah dibingungkan di sini adalah bahwa nilai default dari kedua properti ini berbeda, tetapi ketika Anda memahami alasan melakukan ini, Anda akan menemukan bahwa melakukan ini masuk akal.

1. Atribut Patternunits

Properti ini sama dengan properti gradientunits dari gradien, dan ObjectBoundingBox digunakan secara default. Atribut yang dipengaruhi oleh atribut ini adalah x, y, lebar, dan tinggi. Keempat atribut ini menentukan titik awal dan lebar pola masing -masing. Mereka berdua menggunakan nilai relatif, dan dalam contoh, mereka ingin mengisi arah horizontal dan vertikal 4 kali, sehingga lebar dan tinggi diatur ke 0,25.

2. Properti PatternContentunits

Nilai default dari properti ini justru sebaliknya, menggunakan UsersPaceOnuse. Properti ini menjelaskan sistem koordinat bentuk yang ditarik dalam pola (seperti Rect, lingkaran di atas). Artinya, secara default, bentuk yang Anda gambar dalam pola menggunakan sistem koordinat yang berbeda dan ukuran/posisi pola itu sendiri. Mempertimbangkan kasus dalam contoh di atas, kami ingin mengisi persegi panjang 200*200 dan ulangi setiap arah 4 kali. Ini berarti bahwa setiap pola adalah 50*50, sehingga kedua persegi panjang dan lingkaran di dalam pola ini ditarik dalam persegi panjang 50*50 ini. Dengan cara ini, kita dapat memahami koordinat persegi panjang dan lingkaran dalam pola di atas. Selain itu, untuk memusatkan pola dalam contoh ini, itu perlu diimbangi oleh 10px sebelum rendering. Nilai ini dibatasi oleh properti PatternUnits, jadi secara default, nilai x dan y adalah: 10/2 = 0,05.

Jadi mengapa pola mengatur nilai default dari dua atribut seperti ini?

Ini ditentukan oleh penggunaan pengguna (dibahas dalam contoh di atas):

Gaya pola pertama : Saya pikir ini adalah sebagian besar situasi, sehingga diproses sebagai nilai default: pola diregangkan saat grafik luar diskalakan, dan tidak peduli seberapa besar kotak luarnya, polanya akan selalu diisi 4 kali di kedua arah. Namun, grafik yang terkandung dalam pola tidak akan diregangkan karena kotak yang diisi di luar diskalakan. Meskipun sangat dibuat-buat, memahaminya.

Gaya pola kedua : Bentuk dalam pola juga direntangkan saat bentuk tepi luar ditingkatkan. Kami juga dapat menetapkan nilai properti PatternContentUnits ke ObjectBoundingBox untuk mencapai efek ini. Misalnya, ubah bagian pola sebagai berikut:

</pol>

Setelah modifikasi, saat mengubah ukuran persegi panjang yang diisi, bentuk dalam pola juga akan diregangkan. Dan setelah modifikasi, itu diubah ke koordinat objek periferal, sehingga koordinat X dan Y dari pola tidak lagi diperlukan. Polanya akan selalu disesuaikan agar sesuai dengan bentuk yang diisi.

Gaya pola ketiga : Bentuk dan ukuran pola diperbaiki. Tidak peduli bagaimana objek periferal diskalakan, Anda dapat mengubah sistem koordinat ke pengguna yang digunakan untuk mencapai efek ini. Kodenya adalah sebagai berikut:

</pol>

Pola khas dalam 3 ini ditunjukkan pada gambar di bawah ini:

Referensi Praktis:

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

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/