HTML5 SVG 2D Pengenalan 4—Stroke and Fill_html5 Kemahiran Tutorial

Terdahulu kami memberi tumpuan kepada meringkaskan pelbagai bentuk, teks dan gambar Seterusnya, kami akan meringkaskan pemprosesan warna, iaitu, kesan isian dan sempadan, seperti yang kami bincangkan pada kanvas Anda akan mendapati bahawa kandungan di sini pada dasarnya adalah sama sebagai kanvas. Atribut ini boleh ditulis dalam elemen sebagai atribut atau disimpan dalam CSS (ini berbeza daripada kanvas).
Warna isian - atribut isian
Atribut ini menggunakan warna yang ditetapkan untuk mengisi bahagian dalam grafik. Hanya tetapkan nilai warna atribut ini secara langsung. Lihat contoh:

Salin kod

Kodnya adalah seperti berikut:

isi-opasiti="0.5" lejang-opasiti="0.8" />

Dalam contoh di atas, segi empat tepat dengan tepi merah dan biru dilukis. Perhatikan beberapa perkara:
1 Jika atribut isi tidak disediakan, isian hitam akan digunakan secara lalai. Jika anda ingin membatalkan pengisian, anda perlu menetapkannya kepada tiada.
2. Anda boleh menetapkan ketelusan isian, iaitu kelegapan isian.
3. Lebih rumit ialah atribut peraturan isi. Atribut ini mentakrifkan algoritma untuk menilai sama ada titik tergolong dalam julat pengisian; sebagai tambahan kepada nilai yang diwarisi, terdapat dua nilai: bukan sifar: Algoritma yang digunakan untuk nilai ini ialah: lancarkan garis dari titik yang akan ditentukan dalam sebarang arah, dan kemudian hitung arah persilangan graf dan segmen garisan; keputusan bermula dari 0, dan setiap persimpangan Jika segmen garisan di persimpangan adalah dari kiri ke kanan, tambah 1 untuk setiap titik persimpangan di mana segmen garisan dari kanan ke kiri, kurangkan 1 selepas mengira semua titik persimpangan; hasil pengiraan ini tidak sama dengan 0, maka jika titik itu berada dalam grafik, ia perlu diisi jika nilainya sama dengan 0, ia berada di luar grafik dan tidak perlu diisi. Lihat contoh di bawah:

evenodd: Algoritma yang digunakan untuk nilai ini ialah: lancarkan garisan dari titik yang akan ditentukan dalam sebarang arah, dan kemudian hitung bilangan persilangan antara graf dan segmen garisan Jika nombor itu ialah nombor ganjil, tukar titik dalam graf Pengisian diperlukan; Lihat contoh di bawah:

Warna sempadan - atribut lejang
Atribut lejang telah digunakan dalam contoh di atas Atribut ini menggunakan nilai yang ditetapkan untuk melukis sempadan grafik juga sangat mudah untuk digunakan. Hanya tetapkan nilai warna kepadanya. Nota:
1 Jika atribut strok tidak disediakan, jidar grafik tidak akan dilukis secara lalai.
2. Anda boleh menetapkan ketelusan tepi, iaitu kelegapan lejang.
Sebenarnya, situasi tepi adalah lebih rumit sedikit daripada di dalam graf, kerana selain warna, tepi juga mempunyai "bentuk" yang perlu ditakrifkan.

Titik akhir baris - atribut cap garis lejang
Atribut ini mentakrifkan gaya titik akhir segmen garisan ini boleh menggunakan punggung, segi empat sama, bulat Tiga nilai. Lihat contoh:

Salin kod

Kodnya adalah seperti berikut:

Kod ini melukis 3 garisan menggunakan titik akhir garis gaya yang berbeza,

Daripada gambar di sebelah kiri, kita boleh nampak dengan mudah perbezaan 3 gaya tersebut.

Sambungan garisan - atribut sambungan garis lejang
Atribut ini mentakrifkan gaya sambungan segmen garisan Atribut ini boleh menggunakan tiga nilai miter, bulat, serong . Lihat contoh:

Salin kod

Kod adalah seperti berikut:

stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/>

stroke-linecap="round" fill="transparent" stroke-linejoin="round"/>

stroke-linecap="square" fill="transparent" stroke-linejoin="bevel"/>

Daripada gambar di sebelah kiri, kita boleh nampak dengan mudah perbezaan 3 gaya tersebut.

Atribut garis maya dan pepejal - stroke-dasharray
Atribut ini boleh menetapkan garisan maya dan pepejal yang digunakan untuk segmen garisan. Lihat contoh:

Salin kod

Kodnya adalah seperti berikut:

stroke-linecap="round " stroke-dasharray=" 5,10,5" fill="none"/>
stroke-linecap="round " stroke-width=" 1" stroke-dasharray="5,5" fill="none"/>

Atribut ini menetapkan satu siri nombor, tetapi nombor ini mesti dipisahkan dengan koma.

Atribut sudah tentu boleh mengandungi ruang, tetapi ruang tidak berfungsi sebagai pemisah. Setiap nombor

mentakrifkan panjang segmen garisan pepejal, yang dikitar mengikut urutan lukisan dan bukan lukisan.

Jadi garisan yang dilukis dalam contoh di sebelah kiri ialah garis pepejal 5 unit, meninggalkan 5 unit ruang,

Lukis 5 unit lagi garisan pepejal...dan teruskan seperti ini.

Selain atribut yang biasa digunakan ini, terdapat juga atribut berikut yang boleh ditetapkan:
had-miter lejang: Ini adalah sama seperti dalam kanvas perkaitan antara semasa melukis dan tidak melukis garisan .
stroke-dashoffset: Atribut ini menetapkan kedudukan di mana garis putus-putus mula dilukis.

Gunakan CSS untuk memaparkan data
HTML5 mengukuhkan idea DIV CSS, jadi bahagian paparan data juga boleh diserahkan kepada CSS. Berbanding dengan elemen HTML biasa, hanya warna latar belakang dan sempadan digantikan dengan isian dan lejang. Kebanyakan yang lain hampir sama. Mari kita ambil contoh mudah:

Salin kod

Kodnya adalah seperti berikut:

#MyRect:hover {
stroke: hitam;
fill: blue;
}

Bukankah ia semudah itu?

Rujukan praktikal:
Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Pusat Pembangunan: https://developer.mozilla.org/en/SVG
Rujukan Popular: http://www.chinasvg.com/
Dokumentasi rasmi: http://www.w3.org/TR/SVG11/