Sebelumnya, kami fokus pada merangkum berbagai bentuk, teks dan gambar. Selanjutnya, kami akan meringkas pemrosesan warna, yaitu efek pengisian dan perbatasan, seperti yang kami bahas kanvas. Anda akan menemukan bahwa konten di sini pada dasarnya sama dengan kanvas. Properti ini dapat ditulis dalam elemen sebagai atribut atau disimpan dalam CSS (ini berbeda dari kanvas).
Isi Warna - Isi Atribut Properti ini menggunakan warna set untuk mengisi bagian dalam gambar. Sangat mudah digunakan. Cukup tetapkan nilai warna ke properti ini secara langsung. Lihat contoh:<rect x = "10" y = "10" stroke = "biru" isi = "merah"
fill-opacity = "0,5" stroke-opacity = "0,8"/>
Dalam contoh di atas, persegi panjang merah dan biru ditarik. Beberapa poin yang perlu diperhatikan:
1. Jika atribut pengisian tidak disediakan, pengisian hitam akan digunakan secara default. Jika Anda ingin membatalkan isi, Anda tidak perlu mengaturnya.
2. Anda dapat mengatur transparansi isi, yaitu, pengisian-opacity , dan rentang nilai adalah 0 hingga 1.
3. Yang sedikit lebih rumit adalah atribut aturan pengisian . Properti ini mendefinisikan algoritma yang menentukan apakah titik tersebut milik rentang pengisian; Selain warisan, ada dua nilai:
bukan nol : algoritma yang digunakan untuk nilai ini adalah memancarkan garis dari titik yang perlu dinilai ke arah mana pun, dan kemudian menghitung arah titik persimpangan antara gambar dan segmen garis; Hasil perhitungan dimulai dari 0, dan setiap segmen garis di persimpangan berasal dari kiri ke kanan, tambahkan 1; Setiap segmen garis di persimpangan berasal dari kanan ke kiri, kurangi 1; Setelah menghitung semua titik persimpangan dengan cara ini, jika hasil perhitungan ini tidak sama dengan 0, titik tersebut ada pada gambar dan perlu diisi; Jika nilainya sama dengan 0, tidak perlu diisi di luar gambar. Lihat contoh berikut: Evendd : Algoritma yang digunakan untuk nilai ini adalah memancarkan garis dari titik yang perlu dinilai ke arah mana pun, dan kemudian menghitung jumlah titik di mana gambar dan segmen garis berpotongan. Jika angkanya aneh, intinya diubah menjadi gambar dan perlu diisi; Jika angkanya bahkan, intinya berada di luar gambar dan tidak perlu diisi. Lihat contoh pada gambar di bawah ini: Atribut Warna Batas - Stroke Contoh di atas telah menggunakan atribut stroke. Atribut ini menggunakan nilai yang ditetapkan untuk menggambar perbatasan gambar, yang juga sangat langsung untuk digunakan. Cukup tetapkan nilai warna untuk itu. Melihat:1. Jika atribut stroke tidak disediakan, batas grafik tidak ditarik secara default.
2. Anda dapat mengatur transparansi tepi, yaitu opacity stroke , dan rentang nilai adalah 0 hingga 1.
Bahkan, situasi tepi sedikit lebih rumit daripada bagian dalam grafik, karena selain warna, tepi juga memiliki bentuk yang perlu ditentukan.
Titik akhir garis - properti stroke -linecap
Properti ini mendefinisikan gaya titik akhir segmen garis. Properti ini dapat menggunakan tiga nilai pantat, persegi, dan bulat . Lihat contoh:<svg>
<baris x1 = "40" x2 = "120" y1 = "20" y2 = "20" stroke = "hitam"-stroke-lebar = "20" stroke-linecap = "butt"/>
<baris x1 = "40" x2 = "120" y1 = "60" y2 = "60" stroke = "hitam"-stroke-lebar = "20" stroke-linecap = "square"/>
<baris x1 = "40" x2 = "120" y1 = "100" y2 = "100" stroke = "hitam"-stroke-lebar = "20" stroke-linecap = "bundar"/>
</svg>
Kode ini menggambar 3 baris menggunakan berbagai gaya titik akhir garis.
Dari gambar di sebelah kiri kita dapat dengan mudah melihat perbedaan gaya dalam 3.
Atribut Koneksi Jalur - Stroke -Lininjoin Properti ini mendefinisikan gaya di koneksi segmen garis. Properti ini dapat menggunakan tiga nilai mitra, bulat, dan bevel . Lihat contoh:<svg>
<poin Polyline = "40 60 80 20 120 60" Stroke = "hitam"-stroke-lebar = "20"
stroke-linecap = "butt" fill = "transparan" stroke-lineJoin = "mIter"/>
<poin Polyline = "40 140 80 100 120 140" stroke = "hitam"-stroke-lebar = "20"
stroke-linecap = "bundar" fill = "transparan" stroke-lineJoin = "round"/>
<poin Polyline = "40 220 80 180 120 220" stroke = "hitam"-stroke-lebar = "20"
stroke-linecap = "square" fill = "transparan" stroke-lineJoin = "bevel"/>
</svg>
Dari gambar di sebelah kiri kita dapat dengan mudah melihat perbedaan gaya dalam 3.
Atribut Virtual and Real Line - Stroke -Dasharray
Properti ini dapat mengatur garis virtual dan nyata dari segmen garis. Lihat contoh:<svg>
<Path D = "M 10 75 Q 50 10 100 75 T 190 75" Stroke = "Hitam"
stroke-linecap = "bundar" stroke-dasharray = "5,10,5" fill = "none"/>
<Path D = "M 10 75 L 190 75" Stroke = "Red"
stroke-linecap = "bundar" stroke-lebar = "1" stroke-dasharray = "5,5" fill = "none"/>
</svg>
Properti ini menetapkan beberapa kolom angka, tetapi angka -angka ini harus dipisahkan koma.
Tentu saja, ruang dapat dimasukkan dalam atribut, tetapi ruang tidak digunakan sebagai pembatas. Setiap angka
Panjang segmen garis solid didefinisikan, dan bersepeda dalam urutan menggambar dan tidak menggambar.
Jadi garis yang ditarik dalam contoh di sebelah kiri adalah garis solid dengan 5 unit, meninggalkan ruang dengan 5 unit.
Gambarlah 5 unit garis solid ... dan lanjutkan seperti ini.
Selain sifat -sifat yang biasa digunakan ini, sifat -sifat berikut dapat diatur:
Stroke-MiterLimit : Ini sama dengan di kanvas, yang menangani efek mitra pada hubungan antara kapan dan jika garis ditarik. Stroke-Dashoffset : Properti ini menetapkan posisi di mana garis putus-putus mulai ditarik. Gunakan CSS untuk menampilkan data HTML5 memperkuat gagasan div+CSS, sehingga bagian yang menampilkan data juga dapat diserahkan kepada CSS untuk diproses. Dibandingkan dengan elemen HTML biasa, itu hanya warna latar belakang dan perbatasan digantikan oleh isian dan stroke. Sebagian besar yang lain serupa. Mari kita ambil contoh singkat:#Myrect: hover {
Stroke: Hitam;
Isi: Biru;
}
Bukankah itu sangat akrab? Sesederhana itu.
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/