Corak SVG - Trik CSS

Isi kandungan

Elemen SVG membolehkan kita menentukan corak di dalam markup SVG kita dan menggunakan corak tersebut sebagai fill. Proses asas untuk corak berjalan seperti:

  • Tentukan bahagian dalam SVG
  • Tentukan bentuk di dalam corak
  • Gunakan bentuknya
  • Buat bentuk baru dan isi dengan corak

Ini adalah koleksi bentuk SVG sederhana yang digunakan sebagai corak. Senarai ini mungkin berkembang dari masa ke masa tetapi ideanya kurang mempunyai koleksi yang komprehensif daripada mempunyai sintaks yang berguna sebagai titik permulaan untuk mencipta corak baru dan menarik.

Kami juga menyimpan koleksi ini di CodePen.

Corak Bulatan

 

Corak Papan Peti

 

Corak segi enam

 

Corak Kiub

 

Corak Chevron

 

Sekiranya anda ingin bermain-main dalam masa nyata dengan atribut corak yang berbeza untuk mengetahui cara kerja corak, cuba ini:

Artikel menarik...