Cara menambah sempadan berganda ke bentuk SVG

Katakan seseorang meminta anda menambah sempadan berganda ke beberapa bentuk SVG geometri rawak. Atas sebab tertentu, anda tidak boleh menggunakan mana -mana editor grafik - mereka perlu dijana semasa runtime - jadi anda perlu menyelesaikannya dengan CSS atau dalam sintaks SVG.

Soalan pertama anda mungkin: Adakah terdapat apa-apa seperti gaya strok: dua kali ganda dalam SVG? Nah, jawapannya belum lagi dan tidak begitu mudah. Tetapi saya akan mencuba untuk melihat kaedah apa yang boleh saya dapati. Saya akan meneroka kemungkinan tiga bentuk asas yang berbeza: bulatan, segi empat tepat, dan poligon. Menunjuk yang boleh menyimpan warna telus di tengah -tengah dua baris.

Amaran Spoiler: Semua hasil mempunyai kelemahan mereka, sekurang -kurangnya dengan CSS dan SVG, tetapi biarkan saya memandu anda melalui niat saya.

Penyelesaian mudah

Ini tidak berfungsi dengan pelbagai bentuk, tetapi mereka adalah penyelesaian yang paling mudah.

Garis Besar dan Box-shadow

Ciri-ciri CSS menggariskan dan bayang-bayang kotak hanya digunakan untuk kotak sempadan bentuk atau SVG, dan kedua-duanya adalah penyelesaian yang hebat hanya untuk dataran dan segi empat tepat . Mereka juga membenarkan warna fleksibel menggunakan sifat tersuai.

Ia hanya mengambil dua baris CSS dengan garis besar, ditambah pula dengan warna latar belakang kelihatan melalui bentuk.

• ? Penyelesaian hanya untuk satu bentuk.
• ✅ Kod mudah
• ✅ Sempadan lancar
• ✅ Latar Belakang Telus

Box-shadow hanya memerlukan satu baris CSS, tetapi kita perlu memastikan bahawa setiap bentuk mempunyai SVG sendiri kerana kita tidak boleh memohon box-shadow terus ke bentuk. Satu lagi perkara yang perlu dipertimbangkan ialah kita perlu menggunakan warna latar belakang dalam perisytiharan itu.

• ? Penyelesaian hanya untuk satu bentuk
• ✅ Kod mudah
• ✅ Sempadan lancar
• ? Tiada latar belakang telus

Kecerunan SVG

Kecerunan radial SVG hanya berfungsi pada lingkaran ☺️. Kita boleh secara langsung menggunakan kecerunan pada strok, tetapi lebih baik menggunakan pembolehubah kerana kita perlu mengisytiharkan warna berkali -kali dalam kod.

• ? Penyelesaian hanya untuk satu bentuk
• ✅ Kod mudah
• ? Sempadan lancar
• ? Tiada latar belakang telus

Penyelesaian untuk semua bentuk

Ini akan berfungsi dengan semua bentuk, tetapi kod itu boleh menjadi kembung atau kompleks.

Penapis: drop-shadow ()

Akhirnya, satu penyelesaian untuk semua bentuk! Kita mesti mempunyai setiap bentuk dalam

• ✅ Satu penyelesaian untuk semua bentuk
• ✅ Kod mudah
• ? Sempadan kelihatan pixelated
• ? Tiada latar belakang telus

Penapis SVG

Ini adalah penyelesaian yang sangat fleksibel. Kami boleh membuat penapis dan menambahkannya ke bentuk melalui atribut penapis SVG. Bahagian rumit di sini adalah penapis itu sendiri. Kami memerlukan tiga lukisan, satu untuk sempadan luar, satu untuk banjir latar belakang, dan yang terakhir untuk melukis bentuk di bahagian depan. Hasilnya kelihatan lebih baik daripada menggunakan drop-shadow, tetapi sempadan masih pixelated.

• ✅ Satu penyelesaian untuk semua bentuk
• ? Kod kompleks
• ? Sempadan kelihatan pixelated
• ? Tiada latar belakang telus

Menggunakan semula bentuk

Terdapat beberapa pilihan yang mungkin di sini.

Pilihan 1: Transforms

Penyelesaian ini memerlukan transformasi. Kami meletakkan satu angka ke atas yang lain, di mana angka utama mempunyai warna mengisi dan warna strok, dan angka lain tidak mengisi, strok merah, dan berskala dan diposisikan semula ke pusat. Kami menentukan bentuk kami pada . Caranya adalah untuk menterjemahkan separuh daripada kotak viewbox ke ruang negatif supaya, apabila kita skala mereka, kita boleh melakukannya dari pusat angka.

• ✅ Satu penyelesaian untuk semua bentuk
• ? Kod diduplikasi
• ✅ Sempadan lancar
• ✅ Latar Belakang Telus

Opsyen 2:

Saya dapati penyelesaian yang bijak dalam senarai mel WWW-SVG oleh Doug Schepers yang menggunakan SVG . Sekali lagi, ia memerlukan menentukan bentuk sekali dan merujuk kepada mereka dua kali menggunakan . Kali ini bentuk utama mempunyai strok yang lebih besar. Bentuk kedua bentuk kedua bentuk utama, tidak mengisi, stroke anda yang sepadan dengan warna latar belakang.

• ✅ Satu penyelesaian untuk semua bentuk
• ? Kod diduplikasi
• ✅ Sempadan lancar
• ? Tiada latar belakang telus

Berikut adalah hasil penuh!

Hanya supaya anda mempunyai mereka semua di satu tempat. Beritahu saya, anda boleh memikirkan penyelesaian lain yang mungkin!

Atas ialah kandungan terperinci Cara menambah sempadan berganda ke bentuk SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!