Unit Pola SVG: Jaga Ukuran Motif Berulang Tetap Tepat

Untuk menjaga jarak pengulangan pola SVG tetap konstan saat mengubah dimensi bentuk, gunakan patternUnits="userSpaceOnUse" serta lebar dan tinggi tile berupa angka. Kendalikan artwork di dalam tile tersebut secara terpisah dengan patternContentUnits atau viewBox pola.

Perbedaan itu penting ketika motif kecil mengisi lencana sempit dan banner lebar. Anda mungkin menginginkan lebih banyak salinan pada banner, celah lebih besar antarsalinan, atau motif yang diregangkan. Masing-masing merupakan pilihan koordinat berbeda. Menskalakan seluruh grup banner kembali mengubah hasilnya.

Jika motif sudah terdiri dari path SVG, pertahankan path tersebut. Vektorisasi digunakan lebih awal dalam alur kerja, ketika satu-satunya sumber adalah gambar raster.

Pisahkan tile dari artwork-nya

Pola memiliki tile persegi panjang yang berulang dan konten yang digambar di dalamnya. patternUnits mengendalikan x, y, width, dan height tile. patternContentUnits mengendalikan koordinat konten, kecuali pola memiliki viewBox.

Dengan objectBoundingBox, lebar .25 berarti seperempat lebar kotak pembatas objek yang diwarnai. Nilai ini tidak berarti seperempat lebar motif. Persegi panjang dengan lebar 120 unit mendapatkan tile 30 unit; persegi panjang dengan lebar 240 unit mendapatkan tile 60 unit.

Default konten tetap userSpaceOnUse. Karena itu, mengubah hanya patternUnits dapat mengubah celah antarmotif sambil membiarkan setiap motif berukuran sama. Tetapkan kedua atribut secara sengaja alih-alih menganggap keduanya berubah bersama.

Bandingkan empat versi satu daun

Kami menggambar path daun untuk contoh ini dan merender SVG di browser. Kedua persegi panjang target memiliki tinggi 80 unit; lebarnya adalah 120 dan 240. Tangkapan layar menambahkan label dan latar belakang di sekitar bentuk orisinal tersebut. Ini adalah demonstrasi SVG, bukan hasil konversi PerfectVector.

Baca baris dari atas ke bawah:

1. Tile tetap 40 × 40 menghasilkan tiga kolom pada persegi panjang sempit dan enam pada yang lebar. Dimensi daun tetap sama.
2. Lebar tile .25 mempertahankan empat kolom pada kedua target. Persegi panjang yang lebih lebar memiliki ruang lebih banyak di antara daun karena koordinat daun masih menggunakan unit pengguna.
3. Koordinat konten kotak pembatas meregangkan daun secara horizontal ketika lebar target menjadi dua kali lipat. Ukuran vertikalnya tetap sama karena tinggi target tidak berubah.
4. Tile tetap 40 × 40 dengan viewBox="0 0 40 40" kembali ke hasil baris pertama, meskipun patternContentUnits="objectBoundingBox" tetap ada dalam markup. viewBox pola diprioritaskan.

Buka contoh lengkap

Simpan ini sebagai pattern-units.svg dan buka langsung di browser. Keempat baris menggunakan definisi yang sama dengan gambar, tanpa label dan latar belakangnya. Setiap pasangan persegi panjang berada dalam grup yang ditranslasikan sehingga titik asal lokalnya dapat dibandingkan.

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

Mulailah dengan pola fixed dan ubah hanya lebar persegi panjang kedua. Kemudian periksa tile dan both sebelum mengubah path. Ini memisahkan pilihan koordinat dari artwork itu sendiri. Untuk perubahan path dan warna yang lebih luas, gunakan panduan mengedit SVG.

Gunakan viewBox ketika motif memiliki koordinatnya sendiri

viewBox pola memungkinkan daun mempertahankan area gambar yang familier sementara tile memiliki ukuran terpisah. Spesifikasi pola SVG menyesuaikan area gambar itu ke dalam tile menggunakan viewBox dan preserveAspectRatio.

Dalam baris terakhir, tile dan viewBox sama-sama berukuran 40 × 40, sehingga tidak ada ketidaksesuaian rasio aspek. Jika Anda kemudian membuat tile persegi panjang, default preserveAspectRatio="xMidYMid meet" mempertahankan proporsi motif dan memusatkan area gambar yang disesuaikan. preserveAspectRatio="none" memungkinkan penskalaan horizontal dan vertikal secara terpisah. Pilih itu hanya ketika distorsi memang disengaja.

Mengubah patternContentUnits tidak akan memperbaiki ukuran ketika viewBox pola ada: atribut tersebut tidak berpengaruh dalam kasus ini. Ubah dimensi tile, viewBox, atau aturan rasio aspeknya sesuai bagian yang harus berubah.

Pola berguna ketika satu definisi harus mewarnai isian berulang. Jika Anda membutuhkan salinan yang ditempatkan satu per satu, simbol SVG dan instans use lebih sesuai untuk pekerjaan itu.

Mengubah ukuran persegi panjang berbeda dari menskalakan grupnya

userSpaceOnUse menetapkan jarak dalam koordinat pengguna, bukan piksel layar permanen. Transformasi dapat menskalakan koordinat tersebut, termasuk isian pola.

Kami juga membuka dua versi dengan definisi fixed di atas. Persegi panjang pertama memiliki width="240". Yang kedua mempertahankan width="120" di dalam grup dengan transform="translate(20 120) scale(2 1)". Keduanya menempati 240 unit layar dalam dokumen itu, tetapi yang pertama menampilkan enam kolom daun dan yang ditransformasikan menampilkan tiga kolom yang diregangkan secara horizontal.

Gunakan perbedaan ini ketika memecahkan masalah artwork responsif:

• Untuk menampilkan lebih banyak pengulangan, perbesar geometri target sambil mempertahankan skala koordinatnya.
• Untuk memperbesar seluruh komposisi, skalakan grup dan perkirakan tampilan polanya ikut diskalakan.
• Jika tata letak halaman mengubah ukuran tampilan SVG root, periksa pemetaan viewBox root sebelum menyalahkan atribut pola.

Spesifikasi sistem koordinat SVG menjelaskan transformasi yang diterapkan pada koordinat pengguna. Untuk ketidaksesuaian antaraplikasi, periksa dimensi dokumen SVG terlebih dahulu; unit pola saja tidak dapat menentukan ukuran output fisik.

Siapkan motif khusus sebelum mengulangnya

Jika motif Anda hanya tersedia sebagai PNG atau JPG, PerfectVector dapat memulihkan geometri SVG untuk pengulangan. Konversikan motif menjadi vektor, buka hasilnya di editor, dan periksa outline, celah kecil, dan bentuk latar belakang yang tidak diinginkan sebelum menempatkannya di dalam pola.

Simpan master SVG motif tersebut secara terpisah. Bangun tile di sekitar salinannya, lalu uji target sempit dan lebar. Artwork vektor yang sudah ada dapat langsung masuk ke langkah pengeditan ini. Lambang geometris sederhana mungkin lebih cepat digambar ulang secara manual, sementara foto mungkin lebih baik dipertahankan sebagai gambar daripada ditelusuri menjadi kumpulan path yang kompleks.

Rendering browser tidak membuktikan bahwa setiap aplikasi desain mempertahankan definisi pola. Buka kembali file tersimpan di tujuan sebenarnya dan periksa jarak pengulangan serta bentuk motif di sana. Isian berulang juga tidak membuat salinan mandiri yang dapat diedit dari setiap daun yang terlihat. Panduan file SVG menjelaskan mengapa struktur dokumen penting bersama tampilannya.

Sebelum menyerahkan file, periksa bahwa setiap fill="url(#...)" menunjuk ke ID pola unik yang ada, tile memiliki dimensi positif, dan motif muat dalam tile yang dimaksudkan. Pola SVG biasanya memotong konten pada batas tile, sehingga daun yang melintasi tepi membutuhkan desain pengulangan yang disengaja, bukan asumsi bahwa overflow akan muncul.

FAQ

Mengapa jarak saya berubah tetapi ukuran daun tetap sama? patternUnits mengendalikan dimensi tile, sedangkan patternContentUnits mengendalikan koordinat artwork. Tile kotak pembatas dengan konten ruang pengguna default dapat mengubah jaraknya tanpa mengubah ukuran daun.

Mengapa patternContentUnits tampaknya tidak melakukan apa pun? Periksa apakah pola memiliki viewBox. Jika ada, viewBox mendefinisikan pemetaan koordinat konten dan patternContentUnits tidak berpengaruh.

Apakah userSpaceOnUse menjaga ukuran pola tetap sama di layar? Unit ini mempertahankan dimensi tile numerik dalam sistem koordinat pengguna target saat ini. Menskalakan grup atau mengubah pemetaan koordinat ke viewport SVG root masih dapat mengubah ukuran tampilan pola.

Sources

1. MDN — patternUnits — Mendefinisikan koordinat geometri tile dan default kotak pembatas.
2. MDN — patternContentUnits — Mendefinisikan koordinat konten dan pengesampingan oleh viewBox.
3. W3C — Pola SVG — Menjelaskan penyesuaian tile, perilaku rasio aspek, dan clipping pola.
4. W3C — Sistem koordinat SVG — Mendefinisikan transformasi koordinat pengguna di balik penskalaan grup.

Memiliki motif yang hanya tersedia sebagai raster untuk digunakan ulang? Ubah gambar Anda menjadi path SVG, periksa outline yang dipulihkan, dan uji pada kedua ukuran target sebelum membuat pola berulang akhir.