Unit ClipPath SVG: Sesuaikan Bentuk Khusus dengan Targetnya

Gunakan clipPathUnits="objectBoundingBox" jika bentuk pemotongan harus meregang mengikuti batas target. Normalisasi koordinat bentuk terlebih dahulu. Gunakan userSpaceOnUse jika Anda memerlukan penempatan eksplisit atau penskalaan seragam yang mempertahankan proporsi bentuk.

Mengubah atribut saja tidak mengonversi path yang digambar dalam ratusan unit menjadi bentuk antara nol dan satu. Perubahan itu dapat memindahkan hampir seluruh clip ke luar target. Panduan ini menggunakan satu siluet penanda buku orisinal untuk menunjukkan perubahan koordinat, distorsi yang dihasilkan, dan penyesuaian terpusat yang menjaga bukaan berbentuk belah ketupat tetap persegi.

Clipping mengendalikan visibilitas. Proses ini tidak memangkas path yang mendasarinya menjadi geometri baru yang dapat diedit. Jika Anda sudah memiliki siluet SVG yang bersih, gunakan langsung; penelusuran hanya relevan jika Anda perlu memperoleh kembali siluet tersebut dari gambar raster.

Pilih sistem koordinat sebelum mengubah ukuran

Nilai defaultnya adalah userSpaceOnUse. Koordinat clip-nya berada dalam sistem koordinat pengguna dari elemen yang merujuk clip tersebut. Dengan objectBoundingBox, batas kiri atas target dipetakan ke (0, 0) dan batas kanan bawahnya ke (1, 1). Lihat referensi clipPathUnits.

Kotak pembatas target belum tentu sama dengan viewBox SVG terluar. Clipping pada grup menggunakan batas grup tersebut, yang dapat berbeda dari persegi panjang di dalamnya. Untuk pengujian pertama yang hasilnya dapat diperkirakan, terapkan clip langsung pada persegi panjang dengan dimensi yang diketahui.

Bandingkan target lebar dengan target tinggi

Batas luar penanda buku kita adalah x=20, y=10, width=100, height=100. Belah ketupatnya merupakan subpath kedua dalam path yang sama. Pengujian menerapkannya pada persegi panjang berukuran 200 × 120 dan 120 × 200 dalam unit SVG lokal.

Kolom tengah mengisi batas setiap target, tetapi belah ketupatnya menjadi lebar atau tinggi. Kolom kanan mempertahankan belah ketupat dan lekukan bawah, dengan menyisakan ruang di sepanjang sumbu target yang lebih panjang. Keenam bukaan tetap transparan.

Simpan contoh lengkap berikut sebagai clippath-comparison.svg dan buka di browser. Kolomnya mengikuti urutan gambar. Baris atas menggunakan persegi panjang lebar; baris bawah menggunakan persegi panjang tinggi. Translasi tampilan mengatur posisi sampel dan tidak mengubah dimensi target lokalnya.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470">
  <defs>
    <path id="silhouette" d="M20 10H120V110L70 85L20 110Z M70 30L85 45L70 60L55 45Z"/>
    <clipPath id="fixed" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="box" clipPathUnits="objectBoundingBox">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(.01 0 0 .01 -.2 -.1)"/>
    </clipPath>
    <clipPath id="wide-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 16 -12)"/>
    </clipPath>
    <clipPath id="tall-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 -24 28)"/>
    </clipPath>
  </defs>
  <g fill="#107c86">
    <rect x="0" y="0" width="200" height="120"
      transform="translate(20 30)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(260 30)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(500 30)" clip-path="url(#wide-fit)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(60 230)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(300 230)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(540 230)" clip-path="url(#tall-fit)"/>
  </g>
</svg>

Warna hijau kebiruan berasal dari persegi panjang. Path clipping menyediakan outline yang terlihat. Tangkapan layar menambahkan label dan pola kotak-kotak di sekitar SVG yang sama; file mandiri itu sendiri memiliki latar belakang transparan.

Normalisasi batas sumber, termasuk titik asalnya

Untuk titik (x, y) dalam sumber yang batasnya adalah (minX, minY, width, height), hitung:

normalizedX = (x - minX) / width
normalizedY = (y - minY) / height

Dalam contoh ini, perhitungannya adalah (x - 20) / 100 dan (y - 10) / 100. Matriks dalam definisi box melakukan kedua operasi tanpa menulis ulang data path:

matrix(0.01 0 0 0.01 -0.2 -0.1)

Matriks ini memetakan (20, 10) ke (0, 0) dan (120, 110) ke (1, 1). Membagi dengan 100 tanpa mengurangi titik asal akan membuat bentuk tetap bergeser di dalam target. Pemetaan kotak pembatas kemudian menskalakan hasil normalisasi secara terpisah sepanjang lebar dan tinggi target.

Gunakan batas sebenarnya dari geometri yang ingin Anda normalisasi. Sebuah viewBox dapat menyertakan ruang kosong yang disengaja, sehingga dimensinya tidak harus sama dengan batas siluet. Jika Anda ingin mempertahankan ruang kosong itu, gunakan persegi panjang viewBox secara sengaja alih-alih tanpa sengaja mencampurkan kedua pengukuran.

Untuk artwork impor dengan transformasi bersarang, ukur dan normalisasi dalam satu sistem koordinat yang konsisten. Selesaikan transformasi tersebut di editor sebelum menyalin data path mentah jika Anda tidak dapat memperhitungkannya dengan yakin. Alur kerja pengeditan SVG membahas pemeriksaan path dan grup sebelum penyerahan.

Pertahankan proporsi dengan satu faktor skala

Untuk persegi panjang target pada posisi lokal (0, 0) dengan lebar W dan tinggi H, gunakan:

s  = min(W / width, H / height)
tx = (W - s * width) / 2 - s * minX
ty = (H - s * height) / 2 - s * minY
matrix(s 0 0 s tx ty)

Target lebar menghasilkan s=1.2, tx=16, dan ty=-12. Clip-nya menempati x=40..160 dan y=0..120. Target tinggi menghasilkan s=1.2, tx=-24, dan ty=28, yang menempatkan clip pada x=0..120 dan y=40..160.

Ini adalah matriks eksplisit dalam userSpaceOnUse, jadi hitung ulang ketika dimensi lokal target berubah. Sekadar menampilkan seluruh SVG pada ukuran CSS yang berbeda akan menskalakan komposisi secara bersamaan. Mengubah persegi panjang di dalamnya dari lebar menjadi tinggi merupakan operasi yang berbeda.

Perhitungan ini mengasumsikan lebar dan tinggi sumber bukan nol serta tidak ada rotasi atau kemiringan yang belum diperhitungkan. Ini merupakan operasi penyesuaian agar muat di dalam: adanya ruang tersisa memang diharapkan. Peregangan dengan unit kotak pembatas sesuai jika mengisi target lebih penting daripada mempertahankan proporsi motif.

Pertahankan bukaan dalam geometri clipping

Contoh ini menempatkan clip-rule="evenodd" pada setiap use di dalam clipPath-nya. Path yang dirujuk memuat bagian luar penanda buku dan subpath belah ketupat. Aturan tersebut menentukan wilayah mana dari bentuk gabungan itu yang berada di dalam clip.

Menempatkan clip-rule pada persegi panjang hijau kebiruan tidak menetapkan aturan bentuk clipping. Demikian pula, fill-rule yang digunakan untuk mewarnai sumber bukan pengganti aturan clipping. Referensi clip-rule MDN menjelaskan cakupannya di dalam clipPath.

Jangan menambahkan belah ketupat putih terpisah dan berharap bentuk itu akan mengurangi clip. Siluet anak dalam path clipping digabungkan menjadi wilayah yang terlihat; warna isiannya tidak bertindak sebagai nilai mask hitam-putih. Untuk lubang seperti ini, gunakan path gabungan dan aturan winding yang dimaksudkan. Panduan lubang SVG yang terisi menjelaskan struktur path yang mendasarinya.

Jika desain Anda memerlukan tepi yang sebagian transparan atau visibilitas berbasis luminans, bandingkan clipPath dan mask SVG pada gambar yang sama. Clip berguna untuk batas geometris; mask menawarkan model visibilitas yang berbeda. Untuk ikon satu warna yang diwarnai melalui CSS, lihat panduan mask CSS SVG.

Periksa batas dan hasil ekspor

Garis horizontal atau vertikal dapat memiliki kotak pembatas geometris dengan tinggi nol atau lebar nol meskipun stroke-nya terlihat. Hindari objectBoundingBox untuk target semacam itu, dan jangan membagi dengan dimensi sumber nol saat menormalisasi. Spesifikasi koordinat SVG mengecualikan lebar stroke dari perhitungan kotak pembatas ini dan memperingatkan tentang kasus degenerat tersebut.

Sebelum penyerahan:

1. Pastikan ID clip yang dirujuk ada dan unik dalam dokumen.
2. Bandingkan target lebar dan tinggi, termasuk bukaan terkecil.
3. Periksa batas sumber dan batas target dalam sistem koordinat yang dimaksudkan.
4. Simpan dan buka kembali SVG hasil ekspor di aplikasi yang akan menggunakannya.
5. Pertahankan geometri asli jika clip harus tetap dapat diedit.

Spesifikasi CSS Masking menyatakan bahwa clipping mengubah rendering, bukan geometri bawaan elemen. Karena itu, aplikasi pemotongan atau pemrosesan geometri mungkin membutuhkan irisan path yang sebenarnya atau operasi editor lain. Konfirmasi path yang dihasilkan dalam aplikasi tersebut; pratinjau browser yang benar saja tidak membuktikan bahwa file siap dipotong.

Pulihkan siluet raster bila diperlukan

PerfectVector sesuai ketika motif khusus hanya tersisa sebagai PNG atau JPG dan Anda membutuhkan kontur yang dapat diedit untuk clip. Konversikan gambar tersebut menjadi SVG, lalu periksa tepi luar, bukaan dalam, dan bentuk latar belakang yang tidak diinginkan sebelum mengekstrak siluet. Pilih kontur yang termasuk dalam clip; warna sumber tidak menentukan tingkat clipping yang berbeda.

Pertahankan master vektor yang sudah ada jika Anda memilikinya. Penanda buku geometris sederhana dapat digambar langsung, seperti yang dilakukan untuk contoh ini. Vektorisasi tidak memilih unit clip, menormalisasi batas, atau melakukan pemangkasan Boolean permanen. Untuk saran pemilihan sumber yang lebih luas, baca ikhtisar vektorisasi gambar.

FAQ

Apakah objectBoundingBox mempertahankan proporsi bentuk? Tidak. Unit ini memetakan clip yang dinormalisasi ke lebar dan tinggi target secara terpisah. Gunakan skala seragam dalam userSpaceOnUse ketika siluet harus mempertahankan proporsinya.

Mengapa mengubah clipPathUnits menyembunyikan bentuk saya? Koordinat path mungkin masih berada dalam unit asli sumber. Normalisasikan ke sistem koordinat relatif terhadap target, termasuk titik asal sumber, atau pertahankan userSpaceOnUse dan posisikan secara eksplisit.

Apakah clipping menghapus bagian SVG saya yang tersembunyi? Tidak. Clipping mengubah apa yang dirender sambil mempertahankan geometri yang mendasarinya. Gunakan operasi pengeditan path yang sesuai jika file yang diserahkan membutuhkan kontur yang dipangkas secara permanen.

Sources

1. MDN — clipPathUnits — Pilihan koordinat dan interpretasi ruang pengguna default.
2. MDN — clip-rule — Penempatan aturan winding di dalam path clipping.
3. W3C — Sistem koordinat SVG — Pemetaan kotak pembatas, pengecualian stroke, dan keterbatasan dimensi nol.
4. W3C — CSS Masking — Geometri clipping, siluet gabungan, dan path dasar yang tidak berubah.

Jika clip Anda dimulai dari motif raster, siapkan SVG-nya dengan PerfectVector, periksa siluet dan bukaannya, lalu uji kedua proporsi target sebelum memilih peregangan atau penyesuaian seragam.