Urutan Transformasi SVG: Skalakan dan Posisikan Karya

Untuk atribut SVG transform="translate(60 25) scale(2)", titik sumber diskalakan dengan faktor 2, lalu dipindahkan 60 satuan horizontal dan 25 vertikal saat dipetakan ke sistem koordinat induk. Balik daftar menjadi scale(2) translate(60 25), dan translasi itu juga menjadi dua kali lipat. Karya memiliki ukuran sama tetapi posisi berbeda.

Ketika logo melompat setelah Anda mengubah ukurannya, periksa daftar transformasi sebelum menyunting path. Susunan yang berguna adalah grup luar untuk penempatan dan grup dalam untuk skala. Kedua tugas tetap terlihat, dan koordinat karya asli tetap tersedia untuk penyuntingan berikutnya.

Ikuti satu titik alih-alih menebak urutan

Ambil titik sumber (10, 10). Dengan skala 2 dan translasi (60, 25), kedua daftar menghasilkan:

Kedua titik berasal dari koordinat sumber yang sama. Daftar kedua menskalakan translasi maupun karya. Posisi akhirnya berbeda sebesar (60, 25) dari yang pertama.

Anda mungkin menemukan deskripsi urutan yang tampak bertentangan. Spesifikasi SVG menjelaskan daftar sebagai sistem koordinat bersarang dalam urutan tertulis: transformasi paling kiri menjadi grup terluar. Ketika mengikuti titik sumber keluar melalui grup tersebut, operasi paling dalam bekerja terlebih dahulu. Definisi atribut transform W3C secara eksplisit menunjukkan susunan bersarang yang setara.

Untuk perhitungan titik, kerjakan dari fungsi paling kanan ke kiri. Untuk struktur grup, baca dari luar ke dalam. Pertahankan interpretasi yang dipilih konsisten sepanjang perhitungan.

Bandingkan tanda dua bagian yang sama

Simpan contoh lengkap ini sebagai transform-order.svg dan buka di browser. Karyanya adalah cincin persegi asli dengan aksen segitiga terpisah. Bukaan merupakan ruang kosong nyata yang ditentukan oleh aturan isian even-odd.

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"
     viewBox="0 0 350 200">
  <g id="art" transform="translate(60 25) scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</svg>

Ubah hanya atribut grup menjadi transform="scale(2) translate(60 25)". Tanda berpindah lebih jauh ke kanan dan bawah, sementara ukuran dan celah antarbagian tetap sama.

Kami merender kedua daftar dan susunan grup bersarang yang setara di browser. Panel perbandingan memakai area koordinat identik; tanda samar memperlihatkan geometri asli. Setiap titik merah menandai tempat titik sumber (10, 10) berada.

Kotak lokal karya asli adalah x=10, y=10, width=95, height=40. Susunan pertama menghasilkan batas koordinat akar x=80, y=45, width=190, height=80. Daftar terbalik menghasilkan x=140, y=70, dengan ukuran 190 × 80 yang sama.

Pengukuran ini menjelaskan contoh sederhana tanpa stroke ini. Contoh tidak memiliki animasi atau transformasi CSS. Contoh memperagakan komposisi koordinat, bukan kualitas konversi PerfectVector atau kompatibilitas dengan setiap editor SVG.

Pisahkan penempatan dari ukuran dengan grup bersarang

Ganti grup asli dengan struktur ini, sambil mempertahankan path-nya:

<g transform="translate(60 25)">
  <g id="art" transform="scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</g>

Ini cocok dengan translate(60 25) scale(2) pada satu grup. Translasi luar menempatkan sistem koordinat yang diskalakan. Mengubah skala dalam membiarkan nilai translasi luar tetap (60, 25).

Itu tidak berarti setiap titik terlihat tetap saat Anda mengubah skala. Titik yang jauh dari titik asal lokal masih bergerak saat koordinatnya dikalikan. Tentukan titik sumber yang harus menjadi jangkar karya sebelum memilih translasi.

Misalnya, anggap sudut sumber cincin (10, 10) harus berada di (120, 80) setelah diskalakan dengan faktor 2. Hitung:

tx = targetX - scale × anchorX = 120 - 2 × 10 = 100
ty = targetY - scale × anchorY =  80 - 2 × 10 =  60

Gunakan translate(100 60) scale(2). Sudut kini dipetakan ke (120, 80). Mentranslasikan langsung sebesar (120, 80) akan menempatkan titik asal lokal di sana dan membuat sudut lebih jauh ke kanan serta bawah.

Perhitungan ini mengasumsikan penskalaan seragam tanpa rotasi atau skew. Untuk titik pivot rotasi yang dipilih sengaja, gunakan panduan transform-origin SVG. Letakkan setiap transformasi pada grup yang bertanggung jawab atas tugas tersebut alih-alih menggabungkan koreksi yang tidak terkait melalui coba-coba.

Baca pemetaan hasil render ketika file bersarang

SVG impor mungkin sudah memiliki transformasi pada beberapa leluhur. Melihat atribut grup terdekat saja melewatkan efek gabungannya. Referensi transform MDN juga mencatat bahwa transformasi CSS mendapat prioritas ketika properti CSS dan atribut presentasi menargetkan elemen sama. Periksa computed style jika mengubah atribut tampaknya tidak melakukan apa-apa.

Untuk SVG inline yang dirender, snippet ini memetakan titik grup yang dipilih ke koordinat pengguna SVG akar:

const root = document.querySelector('svg');
const art = document.querySelector('#art');
const rootMatrix = root.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error('SVG is not measurable');
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const point = new DOMPoint(10, 10).matrixTransform(toRoot);
const result = { x: point.x, y: point.y };

Matriks akar invers menghapus pemetaan layar bersama milik akar. Itu penting karena tampilan 700 × 400 contoh dua kali ukuran viewBox 350 × 200-nya. Piksel layar dan koordinat SVG berbeda satuan di sini. MDN mendokumentasikan pemetaan yang dikembalikan getScreenCTM().

Perbandingan browser kami menghasilkan matrix(2 0 0 2 60 25) untuk daftar pertama dan versi bersarang. Daftar terbalik menghasilkan matrix(2 0 0 2 120 50). Dalam contoh skala dan translasi ini, dua angka terakhir menunjukkan translasi yang berbeda secara eksplisit.

Snippet mengasumsikan transformasi dua dimensi yang dapat diinvers. Skala nol tidak sesuai untuk pemeriksaan matriks invers ini. Untuk overlay, ekspor yang disesuaikan, stroke, atau kotak berotasi, gunakan alur batas SVG yang lebih rinci.

Jangan mengharapkan getBBox() pada grup karya melaporkan posisi akar yang ditransformasi. Hasil lokalnya mengecualikan transformasi elemen itu sendiri dan transformasi leluhurnya, sebagaimana dijelaskan referensi getBBox. Kotak lokal dapat tetap sama sementara tanda terlihat bergerak.

Perbaiki transformasi sebelum membuat ulang karya

Kerjakan salinan SVG. Identifikasi path yang harus bergerak bersama, lalu periksa grup dan leluhurnya. Catat titik jangkar yang mudah dikenali dan tujuan yang dimaksud untuk titik itu.

Ubah satu transformasi setiap kali. Jika ukuran benar tetapi penempatan salah, bandingkan translasi yang dihasilkan kedua urutan. Jika bagian-bagian bergerak sendiri-sendiri, letakkan penempatan bersama pada grup yang melingkupinya. Pisahkan pivot rotasi dari pertanyaan urutan skala.

Buka kembali file tersimpan dalam aplikasi tujuan dan periksa seluruh jangkauan tanda. Transformasi yang benar masih dapat memindahkan karya keluar viewBox atau ke wilayah pemotongan. Panduan penyuntingan SVG membahas proses pembersihan dan ekspor yang lebih luas.

Jika tanda hanya tersedia sebagai PNG atau JPG dan Anda membutuhkan kontur yang bisa diedit, vektorisasi logo PerfectVector dapat menyiapkan kandidat SVG. Periksa siluet, bukaan, dan bentuk terpisahnya, lalu kelompokkan karya hasil rekonstruksi dan terapkan transformasi penempatan di editor atau kode.

Bitmap dapat dipindahkan dan diskalakan tanpa vektorisasi. Gunakan tracing ketika bentuk yang bisa diedit diperlukan, dan pertahankan master vektor yang ada jika tersedia. Untuk geometri atau tulisan logo yang persis, rekonstruksi manual mungkin tetap diperlukan; panduan vektorisasi logo menjelaskan cara memilih metode awal tersebut.

FAQ

Apakah SVG menerapkan transformasi dari kiri ke kanan atau kanan ke kiri? Daftar bersesuaian dengan sistem koordinat bersarang dalam urutan tertulis, dari luar ke dalam. Ketika menghitung posisi akhir titik sumber, terapkan fungsi paling kanan terlebih dahulu dan kerjakan ke luar menuju kiri.

Mengapa membalik translate dan scale memindahkan logo? Dengan scale diikuti translate dalam daftar atribut, skala juga mengalikan translasi. Dengan translate diikuti scale, translasi tetap di luar skala itu. Karena itu, nilai yang sama dapat menghasilkan ukuran sama pada posisi berbeda.

Apakah translasi luar menjaga setiap titik tetap ketika saya mengubah ukuran grup dalam? Tidak. Translasi luar menjaga nilai translasi terpisah dari skala dalam. Titik yang jauh dari titik asal lokal masih bergerak saat diskalakan. Pilih titik jangkar dan hitung translasi yang diperlukan untuk menempatkannya.

Sources

1. W3C — Atribut transform SVG — Mendefinisikan hubungan antara daftar transformasi dan sistem koordinat bersarang.
2. MDN — SVG transform — Mendokumentasikan sintaks transformasi, pemetaan matriks, dan prioritas CSS.
3. MDN — getScreenCTM — Menjelaskan matriks untuk memetakan koordinat SVG menuju viewport dokumen.
4. MDN — getBBox — Menjelaskan batas lokal dan pengecualian transformasi elemen yang diukur.

Jika logo sumber Anda memerlukan geometri yang bisa diedit, siapkan kandidat SVG dengan PerfectVector, periksa kontur dan bagian terpisahnya, lalu pilih jangkar dan verifikasi posisi akhirnya setelah penskalaan.