Transformasi Pola SVG: Putar Fill, Pertahankan Kontur

Untuk memutar pola SVG di dalam bentuk tetap, letakkan patternTransform="rotate(...)" pada elemen pattern. Biarkan transformasi bentuk itu sendiri tetap. Untuk menggeser tempat jatuhnya gambar berulang, gunakan translasi pada pola yang sama.

Pengeditan ini memindahkan sistem koordinat pewarnaan. Memutar grup yang berisi bentuk juga memindahkan geometri yang ditampilkan. Lambang berlubang asli kami memperlihatkan perbedaannya: kontur tetap tegak saat pewarnaan berputar, sedangkan kontrol seluruh objek terpisah memiringkan lambang beserta bukaannya.

Pilih elemen yang seharusnya bergerak

Referensi patternTransform saat ini menjelaskan daftar transformasi yang diterapkan pada tile pola. Definisi pola SVG2 menjelaskan sistem koordinat tile dan transformasi pewarnaannya.

Dalam contoh ini, motif berupa tanda bengkok kecil asimetris yang diulang di dalam tile 24 satuan. Bentuk yang menerima pewarnaan merupakan path lain: lencana asimetris dengan bukaan persegi panjang. Memisahkan peran tersebut membuat keputusan pengeditan lebih jelas.

Kami memakai atribut SVG secara langsung. Catatan MDN tentang implementasi transform CSS bukan janji bahwa properti CSS bernama pattern-transform akan berfungsi di tujuan Anda.

Putar pewarnaan di dalam kontur

Buka kode awal rotasi pewarnaan yang lengkap

Simpan SVG ini sebagai pattern-emblem.svg dan buka di peramban. Berkas mandiri tanpa gambar atau pustaka eksternal. Rotasi pola adalah 30 derajat terhadap titik sumber (100,80); grup penerima tidak memiliki transformasi.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

Aturan fill evenodd membiarkan persegi panjang dalam terbuka. Lihat referensi fill-rule untuk aturan berbasis persilangannya. Bukaan merupakan bagian path lambang, sehingga memutar pewarnaan berulang tidak memutar bukaan itu.

patternUnits dan patternContentUnits sama-sama eksplisit dalam sumber ini. Referensi patternUnits mendefinisikan sistem koordinat tile. Panduan satuan pola kami membahas dimensi tile dan koordinat motif secara rinci. Di sini kami menjaganya tetap untuk mengisolasi transformasi; ini bukan resep merancang pengulangan tanpa sambungan.

Bandingkan rotasi, translasi, dan kontrol geometri

Buat tiga salinan kode awal dan ubah hanya atribut yang ditunjukkan:

1. Untuk pewarnaan asli, hapus patternTransform dari pola.
2. Untuk pewarnaan bergeser, ganti dengan patternTransform="translate(7 5)".
3. Untuk kontrol seluruh objek, hapus transformasi pola dan tambahkan transform="rotate(20 100 80)" pada elemen g penerima.

Salinan yang ditranslasikan mempertahankan orientasi motif, tetapi mengubah tempatnya di dalam lencana. Tanda di batas dapat masuk atau keluar dari bentuk yang dicat. Salinan rotasi memutar motif dan kisi pengulangannya bersama-sama; bukan sekadar memutar setiap motif terhadap pusatnya sendiri.

Untuk kontrol objek, referensi atribut transform menjelaskan rotasi terhadap titik pilihan. Transformasi itu mengubah cara geometri grup ditampilkan. Pewarnaan pola biasa ikut bergerak; satuan pola ruang pengguna tidak membuat pewarnaan contoh ini diam secara global.

Mulailah dengan satu transformasi saat mendiagnosis hasil. Jika nanti menggabungkan rotasi, translasi, dan penskalaan, periksa urutannya dalam panduan urutan transformasi SVG. Gabungan transformasi menghadirkan persoalan koordinat terpisah yang dihindari perbandingan terkontrol ini.

Verifikasi geometri dan piksel secara terpisah

Kami merender empat varian asli di Chrome pada 200×160 dan 400×320 piksel CSS. Rasio piksel perangkat peramban adalah 2. Setiap sumber juga didekode dan digambar ke kanvas yang dimensi buffer-nya sesuai ukuran pengujian, sehingga pikselnya dapat dibaca secara independen dari tangkapan layar.

Setiap berkas berisi string d lambang yang sama dan path motif yang sama: dua elemen path tanpa elemen image. Hash berkas lengkap berbeda karena transformasinya berbeda. Kotak geometri lokal lambang adalah (30,25,140,110) dalam setiap kasus.

Kotak lokal saja akan melewatkan perubahan seluruh objek. Untuk lambang poligonal ini, kami juga mentransformasikan lima titik sudut luarnya melalui matriks peramban sebenarnya dan mengukur jangkauan yang ditampilkan. Tabel menormalisasi viewport lebih besar kembali ke satuan sumber:

Jangkauan ternormalisasi sesuai pada kedua ukuran yang diuji. Kontrol objek mempertahankan string d yang sama, tetapi geometri yang ditampilkan berubah. Karena itu, kesamaan data sumber merupakan bukti berguna bahwa konstruksi path dipertahankan, tetapi tidak cukup untuk membuktikan kontur terlihat tetap di tempatnya.

Untuk varian pewarnaan saja, buffer piksel kanvas lengkap berbeda dari aslinya pada setiap ukuran. Pada titik sumber (45,45), sampel asli adalah latar tile (244,240,228) dan sampel pewarnaan berotasi adalah motif terakota (193,90,56), keduanya dengan alfa 255. Translasi tidak mengubah sampel tertentu itu, meski buffer keseluruhannya berbeda. Satu titik sampel dapat melewatkan pergeseran pewarnaan.

Pada sumber (85,80), bukaan memiliki alfa nol dalam kedelapan kasus. Batas piksel sepenuhnya buram juga tidak berubah untuk ketiga varian tegak pada setiap ukuran; batas piksel berbasis ambang itu bukan pengukuran yang sama dengan jangkauan tepat titik sudut kontur. Pengamatan ini terbatas pada sumber yang kami buat dan perambannya, bukan sertifikat kompatibilitas renderer.

Periksa tujuan tersimpan sebelum penyerahan

Simpan lambang asli sebagai acuan geometri dan pertahankan perlakuan pewarnaan dalam salinan terpisah. Paint server berulang tidak menjadikan setiap motif terlihat bentuk independen yang bisa dipilih mesin pemotong atau editor berikutnya. Jika tujuan itu membutuhkan geometri yang diperluas, siapkan dan periksa perluasan secara terpisah. Panduan pengeditan SVG membahas perubahan sumber yang lebih luas.

Jika kontur berputar di luar dugaan, periksa transformasi grupnya sendiri dan elemen leluhurnya sebelum menyesuaikan pola. Jika beberapa salinan inline tanpa sengaja berbagi satu perlakuan pewarnaan, beri ID pola serta referensi fill yang sesuai nama unik. Contoh perbandingan kami mengisolasi ID tersebut; berkas SVG mandiri terpisah tidak berbagi namespace sumber daya tingkat dokumen itu.

Jika motif atau lambang khusus hanya ada sebagai PNG atau JPG dan Anda membutuhkan kontur yang bisa diedit, siapkan SVG dengan PerfectVector, periksa kontur dan bukaannya, lalu simpan master bersih. Kemudian bangun pengulangan dan pilih transformasi pewarnaan dalam kode SVG Anda. Vektorisasi menyiapkan gambar; tidak merancang pengulangan, memilih fasenya, atau menjamin penanganan pola oleh tujuan. Path bersih yang sudah ada bisa langsung diedit polanya; panduan vektorisasi menjelaskan kapan konversi raster berguna.

Pertanyaan umum

Apakah patternTransform mengubah data path lambang saya? Dalam contoh ini, atribut mentransformasikan pewarnaan pola. String d lambang tetap sama. Periksa juga transformasi grup penerima dan elemen leluhur, karena geometri yang ditampilkan dapat bergerak tanpa mengubah d.

Bisakah saya menggeser pola tanpa memutarnya? Bisa. Varian translate(7 5) menggeser penempatan pewarnaan sambil mempertahankan orientasi motif. Jaga dimensi tile dan geometri penerima tetap saat menguji efek.

Mengapa pola ikut berputar ketika seluruh grup saya putar? Transformasi grup mengubah geometri penerima yang ditampilkan beserta pewarnaannya. Itu operasi berbeda dari menempatkan transformasi hanya pada elemen pattern.

Apakah motif berulang merupakan path terpisah yang bisa diedit? Sumber kami memiliki satu path motif dalam paint server dan satu path lambang penerima. Pengulangan yang terlihat bukan elemen path yang dibuat terpisah; perluas dan periksa secara terpisah jika tujuan membutuhkan bentuk tersebut.

Sumber

1. MDN — patternTransform — Daftar transformasi pola dan catatan implementasi atribut.
2. W3C — Pola SVG2 — Sistem koordinat tile dan transformasi pewarnaan.
3. MDN — fill-rule — Bukaan genap-ganjil dalam path penerima.
4. MDN — transform — Rotasi yang diterapkan pada geometri grup yang ditampilkan.
5. MDN — patternUnits — Sistem koordinat tile eksplisit yang dijaga tetap dalam perbandingan ini.