Bayangan SVG Terpotong? Periksa Filter dan Viewport

Bayangan SVG yang terpotong dapat mengenai dua batas berbeda. Wilayah filter membatasi tempat efek dihitung; viewport SVG atau kontainer induk kemudian dapat memotong hasil rendering. Perbesar wilayah filter terlebih dahulu. Jika bayangan masih berakhir di tepi gambar, periksa viewport dan aturan clipping-nya.

Anda tidak perlu menelusuri ulang SVG yang path-nya sudah utuh. Panduan ini mengubah area kerja efek dan canvas yang terlihat sambil mempertahankan siluet orisinal yang sama.

Dua batas, satu path yang tidak berubah

Kami membuat siluet kecil dengan tangan dan membuka tiga versi di browser. Masing-masing menggunakan path dan pengaturan feDropShadow yang sama: dx="22", dy="18", dan stdDeviation="12". Tangkapan di bawah menunjukkan rendering browser sebenarnya, bukan konversi PerfectVector.

Dalam versi pertama, wilayah filter membentang dari (50, 50) hingga (210, 180). Hal itu meninggalkan pemotongan tajam sepanjang tepi kanan dan bawah bayangan. Dalam versi kedua, wilayah membesar hingga mencakup (-20, -20) sampai (300, 280), tetapi SVG masih hanya menampilkan 0 0 240 220. Tepi kanan bayangan sekarang mencapai bingkai viewport dan terpotong di sana.

Versi ketiga mempertahankan wilayah filter lebih besar dan mengubah viewBox menjadi -20 -20 320 300. width dan height-nya juga menjadi 320 dan 300, sehingga ketiga demonstrasi mempertahankan satu unit SVG per piksel CSS. Ruang tambahan menampung bayangan yang terlihat tanpa mengubah ukuran path.

Perluas wilayah filter dalam sistem koordinat yang tepat

Atribut <filter> x, y, width, dan height mendefinisikan wilayahnya. Nilai defaultnya adalah -10%, -10%, 120%, dan 120%: sudah ada ruang tambahan, tetapi mungkin tidak cukup untuk offset dan blur tertentu. MDN mendokumentasikan nilai default ini.

Periksa filterUnits sebelum mengubah angka:

• objectBoundingBox, nilai default, menginterpretasikan wilayah relatif terhadap kotak pembatas elemen yang difilter. Margin persentase bergantung pada dimensi bentuk.
• userSpaceOnUse memungkinkan Anda mendefinisikan wilayah dalam sistem koordinat pengguna saat ini dari elemen yang merujuk filter. Ini berguna ketika Anda mengetahui koordinat artwork.

Aturan tersebut berlaku untuk wilayah, seperti yang dijelaskan dalam referensi filterUnits. Aturan itu tidak otomatis mengubah unit offset atau blur bayangan.

primitiveUnits mengendalikan nilai panjang di dalam primitif filter. Nilai defaultnya adalah userSpaceOnUse; kami menetapkannya secara eksplisit dalam contoh agar 22, 18, dan 12 mempertahankan makna itu. Mengalihkannya ke objectBoundingBox akan mengubah cara nilai tersebut diinterpretasikan. MDN memisahkan unit primitif dari unit wilayah filter.

Untuk file Anda sendiri, periksa batas objek atau grup yang difilter, lalu tambahkan ruang yang cukup ke arah perpanjangan bayangan. Angka di bawah sesuai untuk demonstrasi ini. Angka tersebut bukan margin bayangan universal. Jika Anda meningkatkan blur, memindahkan bayangan, atau mentransformasikan grup yang difilter, periksa hasilnya kembali.

Berikan ruang pada viewport SVG juga

Simpan contoh lengkap ini sebagai shadow.svg dan buka di browser. Ini adalah SVG yang sama persis dengan yang digunakan untuk keadaan ketiga, juga diperiksa sebagai file mandiri:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

viewBox memiliki empat nilai: x minimum, y minimum, lebar, dan tinggi. Atribut ini memetakan persegi panjang koordinat pengguna tersebut ke viewport SVG. Meningkatkan dimensinya sambil mempertahankan lebar dan tinggi tampilan yang sama membuat artwork terlihat lebih kecil; hal itu tidak menambahkan ruang tata letak di luar elemen. MDN menjelaskan pemetaan viewBox.

Untuk mereproduksi dua kegagalan, ubah hanya nilai berikut dalam salinan contoh:

1. Untuk keadaan tengah, pertahankan filter tetapi atur width="240", height="220", dan viewBox="0 0 240 220" pada root.
2. Untuk keadaan pertama, pertahankan viewport lebih kecil itu dan atur juga filter ke x="50", y="50", width="160", dan height="130".
3. Pulihkan contoh lengkap dan bandingkan tepi kanan serta bawah. Data path tidak pernah berubah.

Jika seluruh gambar Anda berada di luar canvas, ikuti pemeriksaan SVG kosong yang lebih luas. Jika gambar terlihat tetapi dimensinya berubah selama impor, periksa hubungan antara unit SVG dan ukuran sebelum menyesuaikan geometri.

Mengapa overflow dapat membantu SVG inline tetapi tidak menyelesaikan masalah file

Contoh menetapkan overflow="hidden" secara eksplisit agar batas viewport-nya dapat direproduksi. Untuk SVG inline, overflow="visible" dapat menghapus clip viewport tersebut. Atribut ini tidak dapat memulihkan piksel yang sudah dibuang pada wilayah filter, dan elemen leluhur dengan clipping sendiri masih dapat menyembunyikan hasilnya. CSS juga dapat mengesampingkan atribut presentasi SVG. Referensi overflow SVG menjelaskan aturan clipping ini.

Periksa jalur penyematan yang sebenarnya. SVG inline pada halaman lapang, SVG mandiri, dan SVG yang dimuat melalui elemen gambar HTML tidak menyediakan tata letak sekitar yang sama. Tangkapan tiga keadaan kami menggunakan elemen gambar dan memberikan ruang canvas internal yang cukup pada file tersebut. Gunakan pendekatan itu ketika SVG harus dibawa sebagai gambar mandiri: sertakan efek dalam batas yang dimaksudkan, lalu buka kembali file yang sama persis di tujuannya.

Jika tampilannya benar saat berdiri sendiri tetapi terpotong di dalam kartu, periksa overflow, clipping, dan masking kartu. Jika gagal hanya di editor atau exporter tertentu, bandingkan salinan yang disederhanakan dan lihat dukungan filter aplikasi tersebut. Panduan perubahan tampilan SVG membahas masalah importer terpisah itu.

Pertahankan geometri dan bangun ulang efek secara terpisah

Drop shadow yang dirender menambahkan tampilan pada path; efek ini tidak mengubah blur menjadi kontur lain yang dapat diedit. Pertahankan master SVG dengan geometri asli. Untuk alur kerja pemotongan, periksa outline path secara terpisah: bayangan yang terlihat bukan garis potong tambahan.

Jika sumber Anda hanya tersedia sebagai PNG atau JPG, PerfectVector dapat membantu memulihkan geometri SVG sebelum Anda menambahkan efek. Konversikan artwork tanpa bayangan menjadi vektor, lalu periksa outline, celah, dan bentuk latar belakang yang tidak diinginkan dalam editor. Tambahkan bayangan di sana dan uji batasnya menggunakan pemeriksaan di atas.

Gunakan sumber tanpa blur yang sudah menyatu dengan gambar jika tersedia. Menelusuri gambar yang telah diratakan tidak dapat memulihkan pengaturan filter asli atau membuktikan di mana desainer bermaksud mengakhiri siluet bersih. Untuk lambang sederhana tanpa sumber bersih, menggambar ulang secara manual mungkin menjadi pilihan yang lebih mudah dikendalikan. Ikhtisar vektorisasi gambar menjelaskan apa yang direkonstruksi penelusuran.

Periksa file yang diserahkan

Buka SVG hasil ekspor itu sendiri, bukan hanya canvas editor. Pastikan bayangan yang dimaksudkan muat pada ukuran tampilan akhir dan output masih berisi path yang Anda perlukan. Periksa juga halaman web atau aplikasi tujuan sebenarnya, karena clip di sekitarnya atau filter yang tidak didukung dapat memunculkan kembali gejala itu.

Hindari membiarkan wilayah filter yang sangat besar sebagai perbaikan default. Wilayah yang jauh melampaui kebutuhan efek membuat file lebih sulit dipahami; wilayah itu juga tidak dapat memperbaiki batas clipping luar. Gunakan margin yang disengaja, pertahankan sumber tanpa filter, dan periksa ulang setelah mengubah blur atau offset.

FAQ

Mengapa bayangan masih terpotong setelah saya memperbesar lebar filter? Viewport SVG, kontainer induk, clip path, atau mask mungkin memberlakukan batas lain. Periksa x dan y filter serta lebar dan tingginya, lalu lihat posisi pemotongan yang tersisa.

Apakah filterUnits mengubah radius blur? filterUnits mengendalikan sistem koordinat wilayah filter. primitiveUnits mengendalikan nilai panjang di dalam primitif filter, termasuk pengaturan offset dan blur bayangan. Pisahkan keduanya ketika mendiagnosis file.

Dapatkah saya memperbaiki clipping dengan memvektorisasi SVG kembali? Jika SVG sudah memiliki path yang dapat digunakan, perbaiki wilayah filter atau viewport. Vektorisasi digunakan di tahap awal ketika sumbernya adalah artwork raster; proses itu tidak memulihkan parameter bayangan asli.

Sources

1. MDN: Elemen filter — Mendefinisikan elemen filter dan ruang tambahan wilayah defaultnya.
2. MDN: filterUnits — Menjelaskan koordinat kotak pembatas dan ruang pengguna untuk wilayah filter.
3. MDN: primitiveUnits — Membedakan panjang primitif dari wilayah filter luar.
4. MDN: viewBox — Menjelaskan bagaimana koordinat pengguna dipetakan ke viewport SVG yang terlihat.
5. MDN: overflow — Mendokumentasikan clipping viewport, default SVG inline, dan prioritas CSS.

Memulai dengan siluet yang hanya tersedia sebagai raster? Siapkan path SVG dengan PerfectVector, periksa outline yang dipulihkan terlebih dahulu, lalu tambahkan bayangan Anda dan buka kembali SVG akhir untuk memeriksa kedua batas.