Outline Bertitik SVG: Atur Spasi Dash dan Ujung Round

Untuk outline SVG bertitik, berikan stroke pada bentuk, tetapkan stroke-linecap="round", dan gunakan dash sepanjang nol diikuti celah positif, seperti stroke-dasharray="0 20". Lebar stroke mengendalikan diameter titik. Angka dash-array kedua mengendalikan jarak sepanjang path antara pusat titik; bukan ruang kosong antara tepi yang terlihat.

Perbedaan itu penting ketika border tampak berdesakan setelah ujungnya dibulatkan. Lencana tertutup menambahkan masalah lain: pengulangan dapat mencapai titik awal dengan interval sisa lebih pendek. Contoh di bawah memisahkan bentuk ujung, spasi terlihat, dan sambungan penutup agar Anda dapat menyesuaikan nilai yang tepat.

Ini adalah pengaturan stroke dekoratif. Pengaturan tidak membuat kontur offset baru atau mengubah setiap titik yang digambar menjadi path pemotongan terpisah.

Bandingkan ujung butt, ujung round, dan titik

stroke-dasharray menyelang-seling panjang dash yang digambar dan panjang celah yang tidak digambar. Daftar dua angka membuat pengulangan mudah diperiksa. Referensi dash-array MDN juga menjelaskan bagaimana daftar berjumlah ganjil diulang untuk membentuk urutan berjumlah genap.

Salin SVG mandiri ini ke file dan buka di browser. Setiap path asli sepanjang 240 satuan, dengan lebar stroke 8:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

Baris pertama memakai 12 20 dengan ujung butt. Dash lengkapnya menempati 12 satuan, menyisakan ruang terlihat 20 satuan. Baris kedua memakai angka yang sama dengan ujung round. Setiap ujung mencapai 4 satuan melampaui titik ujung dash yang mendasarinya, sehingga dash lengkap menempati 20 satuan dan celah terlihat mengecil menjadi 12.

Baris ketiga mengubah panjang dash menjadi nol. Ujung round membuat titik berdiameter 8 dengan pusat berjarak 20 satuan pada path lurus ini. Celah terlihat dari tepi ke tepi adalah 12 satuan. Aturan pewarnaan SVG W3C mendefinisikan ujung pada akhir dash, termasuk penanganan dash sepanjang nol; referensi ujung MDN menjelaskan geometri ujung.

Untuk dash lengkap dan terpisah pada segmen lurus tanpa kalibrasi jarak atau transformasi, perhitungan yang berguna adalah:

• Ujung butt: panjang dash terlihat = dash; celah terlihat = gap.
• Ujung round: panjang dash terlihat = dash + stroke-width; celah terlihat = gap - stroke-width.
• Titik round: diameter = stroke-width; spasi pusat = gap; celah terlihat = gap - stroke-width.

Jika perhitungan terakhir nol atau negatif, titik bersentuhan atau bertumpang tindih. Pada belokan, jarak sepanjang path berbeda dari jarak langsung antartitik. Periksa sudut dan kurva alih-alih menerapkan perhitungan celah garis lurus pada seluruh outline.

Sesuaikan pengulangan di sekeliling lencana tertutup

Path lencana persegi panjang berikut masing-masing berukuran 180 kali 120 satuan. Kelilingnya 2 × (180 + 120) = 600. Path dimulai pada sudut kiri atas dan berjalan searah jarum jam.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

Di kiri, 0 32 menempatkan pusat titik pada jarak path 0, 32, 64, dan seterusnya hingga 576. Hanya 24 satuan tersisa sebelum path kembali ke awal. Interval penutup lebih pendek daripada interval 32 satuan lainnya, sehingga sambungan tidak rata. Memperbesar ukuran tampilan SVG memperbesar ketidakcocokan itu tanpa menyelesaikannya.

Di kanan, 0 30 membagi keliling menjadi 20 interval sama. Pada persegi panjang khusus ini, kedua panjang sisi juga habis dibagi 30, sehingga sudut sejajar dengan titik. Sepanjang setiap sisi lurus, titik 8 satuan menyisakan ruang terlihat 22 satuan. Ini memperbaiki pengulangan lencana yang dipilih; bukan janji spasi visual identik pada setiap outline melengkung.

Untuk outline sendiri, pilih jumlah titik yang diinginkan dan bagi keliling path dengan jumlah itu untuk memperoleh jarak pengulangan awal. Lalu periksa hasil render sebenarnya, terutama belokan, detail kecil, dan titik penutup. Bentuk dengan beberapa subpath terputus memerlukan perhatian terpisah karena pola dash dimulai ulang pada setiap subpath, sebagaimana dijelaskan spesifikasi pewarnaan SVG.

stroke-dashoffset memindahkan posisi awal pola sepanjang path. Atribut dapat menempatkan sambungan mencolok di lokasi yang kurang terlihat, tetapi tidak membuat pengulangan 32 satuan membagi 600 secara pas. Gunakan pengulangan yang disesuaikan ketika tujuannya penutupan konsisten. Referensi dash-offset MDN mendokumentasikan penyesuaian fase itu.

Kami membuka kedua file SVG mandiri secara independen dan memeriksa rendering browser-nya terhadap perbandingan ini. Contoh memakai nilai tanpa satuan, tanpa kalibrasi pathLength, tanpa transformasi, dan tanpa CSS eksternal. Contoh memperagakan path buatan tangan tersebut, bukan konversi PerfectVector atau pengujian kompatibilitas lintas aplikasi.

Jaga ukuran dan pengaturan pewarnaan konsisten

Mulai dengan nilai numerik dalam koordinat SVG sendiri, seperti di atas. Jangan menggantinya dengan persentase dan menganggap nilainya merepresentasikan fraksi keliling path yang sama. Referensi dash-array menjelaskan resolusi persentase terhadap viewport, bukan panjang path.

Jika Anda memakai pathLength untuk menormalisasi jarak, hitung pola dash dalam sistem jarak yang dikalibrasi itu. Hindari mencampur keliling tanpa kalibrasi dari contoh ini dengan nilai dash ternormalisasi dari snippet lain. Panduan animasi stroke SVG menunjukkan penggunaan terpisah kalibrasi panjang path native untuk efek gambar yang muncul bertahap.

Tetapkan fill="none" ketika Anda hanya menginginkan border. Isian dapat tetap terlihat meskipun sebagian stroke putus-putus. Jika titik yang diharapkan hilang, pastikan elemen memiliki stroke terlihat dan aturan CSS tidak menimpa atribut presentasinya. Daftar pemeriksaan stroke hilang membahas pemeriksaan itu sebelum Anda mulai mengubah spasi.

Sisakan cukup ruang di sekitar geometri untuk stroke-nya. Stroke 8 satuan melampaui path, dan ujung round melampaui ujung terbuka. Contoh menyertakan margin agar titik tidak terpotong viewport. Uji SVG yang diserahkan pada ukuran tampilan sebenarnya; titik kecil yang terlihat terpisah dalam pratinjau diperbesar mungkin sulit dilihat dalam ikon.

Pisahkan persiapan karya dari desain border

Jika motif di dalam lencana hanya tersedia sebagai PNG atau JPG, alur gambar ke vektor PerfectVector dapat menyiapkan karya SVG yang bisa diedit untuk motif itu. Bandingkan siluet, bukaan kecil, dan wilayah terpisah dengan gambar asli sebelum menempatkannya di dalam border. Pertahankan outline dekoratif sebagai bentuk terpisah agar lebar stroke dan spasi titik dapat diubah secara independen.

Simpan master vektor yang ada jika tersedia. Persegi panjang atau border sederhana lain biasanya mudah digambar langsung di editor. Vektorisasi tidak otomatis mendesain border offset, memulihkan satu garis tengah, atau memilih spasi dash. Jika tanda tebal hasil tracing memiliki dua batas, panduan SVG satu garis menjelaskan mengapa itu berbeda dari satu rute gambar.

Untuk alur pemotongan, jangan menganggap mesin akan menafsirkan pewarnaan stroke dekoratif sebagai potongan individual berbentuk titik. Siapkan geometri yang dimaksud di editor dan periksa pratinjau aplikasi tujuan. Artikel ini menguji pewarnaan browser, bukan perilaku mesin pemotong. Panduan penyuntingan blog membahas keputusan persiapan file terkait.

Periksa outline akhir

Sebelum menerima file, periksa path terbuka pendek dan border tertutup secara terpisah. Konfirmasikan gaya ujung, lebar stroke, dan angka pengulangan; lalu periksa tanda pertama serta terakhir pada path terbuka dan sambungan di sekeliling path tertutup. Periksa kurva tajam pada ukuran penggunaan karya.

Buka kembali SVG tersimpan dalam aplikasi tujuan. Jika Anda memerlukan pewarnaan dekoratif yang bisa diedit, pertahankan properti stroke. Jika tujuan memerlukan kontur permanen, lakukan dan verifikasi konversi itu sebagai tahap penyuntingan terpisah. Simpan salinan sumber yang bisa diedit agar spasi dapat direvisi kemudian.

FAQ

Mengapa dash saya tampak lebih dekat setelah memilih ujung round? Ujung round melampaui kedua ujung dash. Pada segmen lurus, celah terlihat antara dash lengkap adalah celah yang ditetapkan dikurangi lebar stroke, selama tandanya tetap terpisah.

Bagaimana membuat titik bulat alih-alih bentuk kapsul pendek? Gunakan dash sepanjang nol, celah positif, dan ujung round. Misalnya, lebar stroke 8 dengan stroke-dasharray="0 20" menghasilkan titik 8 satuan dengan pusat berjarak 20 satuan pada path lurus.

Mengapa satu celah berbeda di sekeliling outline tertutup? Pengulangan mungkin tidak membagi keliling secara merata. Sesuaikan pengulangan dengan panjang path, lalu periksa titik penutup dan sudut. Memindahkan dash offset mengubah fase pola tetapi tidak memperbaiki ketidakcocokan perhitungan.

Sources

1. MDN — stroke-dasharray — Mendefinisikan daftar dash dan celah bergantian serta penanganan nilainya.
2. MDN — stroke-linecap — Menjelaskan geometri ujung butt dan round serta perilaku panjang nol.
3. W3C — Pewarnaan SVG — Menetapkan penggambaran dash, perlakuan ujung, dan penanganan pola pada subpath.
4. MDN — stroke-dashoffset — Mendefinisikan offset yang dipakai untuk menggeser pola dash.

Jika motif lencana Anda berasal dari gambar raster, siapkan kandidat SVG dengan PerfectVector, periksa kontur dan bukaannya, dan tambahkan border bertitik sebagai bentuk terpisah yang bisa diedit.