Penukar Garis Lakar SVG kepada Isian

Tampal mana-mana SVG yang mengandungi bentuk bergaris lakar dan dapatkan semula SVG setara di mana setiap garis lakar digantikan dengan laluan berisi yang mempunyai bentuk visual dan lebar yang sama. Berguna untuk sistem ikon dan alat reka bentuk yang hanya boleh memaparkan isian dengan boleh dipercayai, atau untuk mengurangkan SVG kepada laluan hanya berisi sebelum penyuntingan vektor selanjutnya.

Apakah alat ini?

Sesetengah saluran paip pemaparan — penjana fon ikon tertentu, sesetengah enjin permainan, pengeksport PDF yang lebih lama, dan alat yang hanya menggubah isian — tidak mengendalikan garis lakar SVG dengan betul atau langsung tidak mengendalikannya. Menukar garis lakar kepada bentuk berisi dengan lebar yang sama mengelakkan isu ini sepenuhnya: hasil visual kelihatan sama, tetapi ia dinyatakan sebagai satu laluan berisi tunggal dan bukannya garis bergaris lakar.

Alat ini berfungsi dengan mengambil sampel banyak titik di sepanjang garis luar setiap bentuk (menggunakan API panjang laluan pelayar itu sendiri, mekanisme yang sama digunakan oleh animasi SVG) dan membina dua garis ofset selari pada separuh lebar garis lakar pada setiap sisi, kemudian menutupnya menjadi satu poligon berisi.

Kenapa guna alat ini?

Berfungsi pada elemen path, line, polyline, polygon, rect, circle dan ellipse — bukan sekadar <path> — menggunakan satu kaedah pensampelan bersatu.
Mengekalkan isian bentuk itu sendiri (jika ada) sebagai lapisan berasingan di bawah isian garis lakar baharu, jadi bentuk yang berisi dan bergaris lakar ditukar dengan betul.
Pratonton sebelum/selepas bersebelahan supaya anda boleh mengesahkan penukaran secara visual sebelum menyalin hasilnya.
Berjalan sepenuhnya dalam pelayar anda — SVG yang anda tampal tidak pernah dimuat naik ke mana-mana.
Percuma, segera, tiada had saiz fail selain daripada apa yang pelayar anda mampu paparkan.

Cara menggunakannya

Tampal kod SVG anda ke dalam kotak teks (contoh yang berfungsi telah diisi terlebih dahulu).
Klik "Convert strokes to fills".
Bandingkan pratonton sebelum/selepas untuk mengesahkan hasilnya kelihatan betul.
Klik "Copy SVG" untuk menyalin kod yang telah ditukar, bebas garis lakar.

Contoh

Input

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

Hasil

Satu <path fill="#3B82F6"> yang garis luarnya menjejaki kedua-dua belah lengkung asal, 12 unit terpisah, tanpa sebarang atribut stroke.

Bentuk lengkung dikekalkan kerana alat ini mengambil sampel titik secara berterusan di sepanjang laluan yang benar-benar dipaparkan, bukan sekadar titik kawalannya.

Soalan lazim

Mengapakah penjuru tajam menjadi bulat dan bukannya lancip (mitred)?

Ini adalah penyederhanaan yang diketahui dan disengajakan bagi pendekatan pensampelan: pensampelan titik yang padat di sepanjang laluan secara semula jadi menghasilkan sambungan dan hujung bulat, tanpa mengira nilai stroke-linejoin atau stroke-linecap asal. Membina semula sambungan mitre atau bevel yang tepat memerlukan algoritma yang berbeza dan lebih kompleks (persilangan segmen garis pada setiap bucu) yang tidak dilaksanakan oleh alat ini. Bagi kebanyakan kes penggunaan ikon dan ilustrasi, perbezaan visual adalah kecil, tetapi jika anda memerlukan sambungan mitre yang tepat, ciri "outline stroke" penyunting vektor khusus akan lebih tepat.

Adakah ini mengendalikan garis lakar putus-putus (stroke-dasharray)?

Tidak — alat ini menganggap setiap garis lakar sebagai pejal dan mengabaikan stroke-dasharray/stroke-dashoffset. Garis lakar putus-putus akan ditukar seolah-olah ia pejal, yang mengubah rupanya. Jika SVG anda menggunakan garis lakar putus-putus, alat ini bukan pilihan yang sesuai untuk bentuk khusus tersebut.

Mengapa tiada apa-apa yang ditukar?

Alat ini hanya menukar elemen yang mempunyai kedua-dua warna garis lakar (bukan "none") dan stroke-width positif, ditetapkan sama ada sebagai atribut atau dalam gaya elemen itu sendiri. Jika SVG anda menetapkan garis lakar melalui kelas CSS luaran yang tidak dapat diselesaikan oleh pelayar dalam pratonton terasing alat ini, atau melalui blok <style> yang merujuk kelas, gaya yang dikira mungkin tidak diselesaikan dengan betul — cuba tetapkan stroke dan stroke-width sebagai atribut langsung pada bentuk itu sebagai gantinya.

Bilakah saya patut menukar garis lakar kepada isian, dan bilakah saya patut mengekalkan garis lakar?

Jika anda masih mereka bentuk, kekalkan garis lakar — stroke-width kekal boleh disunting sebagai satu nombor tunggal, yang anda akan hilang selepas penukaran. Jika anda mengeksport ke saluran paip yang tidak mengendalikan garis lakar dengan betul (penjana fon ikon, enjin permainan tertentu atau pengeksport PDF), tukar sebagai langkah eksport akhir dan kekalkan fail bergaris lakar asal sebagai sumber boleh sunting anda, memandangkan penukaran ini adalah sehala.

Adakah penukaran menjadikan fail SVG lebih besar?

Biasanya ya — satu lengkung bergaris lakar yang ditakrifkan oleh beberapa titik kawalan menjadi garis luar berisi yang terdiri daripada ratusan segmen garis yang disampel, jadi data laluan berkembang dengan ketara. Bagi ikon, ini jarang menjadi isu dalam praktiknya, tetapi jika saiz menjadi kebimbangan, jalankan output yang ditukar melalui pengoptimum SVG selepas itu untuk mengurangkan ketepatan koordinat.

Adakah stroke-opacity dibawa ke isian yang ditukar?

Tidak — laluan yang ditukar mengambil warna garis lakar sebagai isiannya tetapi pada kelegapan penuh; nilai stroke-opacity pada bentuk asal digugurkan. Jika anda perlu mengekalkan ketelusan, tambah fill-opacity dengan nilai yang sama pada laluan yang ditukar secara manual selepas menyalin output.