Titik Asal Transformasi SVG: Putar Artwork di Sekitar Pusatnya

Untuk memutar artwork SVG di sekitar pusatnya sendiri dengan CSS, letakkan path terkait dalam satu grup dan terapkan transform-box: fill-box serta transform-origin: center pada grup tersebut. Kemudian terapkan rotasi di sana. Kedua properti menjawab pertanyaan berbeda: persegi panjang mana yang menyediakan referensi, dan di mana poros berada di dalam persegi panjang itu.

Jika ikon impor Anda berayun melintasi canvas, periksa referensi tersebut sebelum mengubah koordinat path-nya. Jika bagian-bagiannya berputar secara terpisah, periksa elemen mana yang menerima transformasi. Artwork vektor yang sudah ada biasanya membutuhkan perbaikan grup atau transformasi; penelusuran berguna hanya ketika Anda terlebih dahulu membutuhkan path yang dapat diedit dari sumber raster.

Mengapa center saja masih dapat memindahkan artwork

Untuk anak SVG biasa seperti path atau grup, titik asal transformasi default adalah 0 0. Elemen SVG root memiliki default berbeda. Dengan transform-box: view-box default, mengatur titik asal ke center merujuk pada viewport referensi SVG, bukan batas artwork itu sendiri. Referensi transform-origin SVG MDN menjelaskan default dan pengecualian ini.

Karena itu, ruang kosong di sekitar logo berpengaruh. Simbol kecil yang ditempatkan di dekat salah satu sudut area gambar besar memiliki pusat berbeda dari area gambar tersebut. transform-box: fill-box mengalihkan referensi ke kotak pembatas objek elemen. Properti ini tidak memangkas SVG atau menghapus ruang kosong. Referensi transform-box mendefinisikan kotak yang tersedia, termasuk stroke-box ketika diperlukan referensi yang menyertakan stroke.

Putar dua path sebagai satu lambang

Simpan contoh lengkap ini sebagai rotation.svg dan buka di browser. Contoh menggunakan persegi orisinal dan aksen segitiga terpisah, keduanya ditempatkan jauh dari titik asal koordinat. CSS berada di dalam SVG agar file mandiri membawa aturan rotasinya sendiri.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

Sebelum rotasi, artwork gabungan membentang dari x = 80 hingga 220 dan y = 50 hingga 130. Kotaknya memiliki lebar 140 unit dan tinggi 80 unit, sehingga pusatnya adalah (150, 90). Persegi dan aksen mempertahankan hubungan posisinya ketika grup berputar.

Kami merender empat keadaan sudut tetap dari path yang sama dalam browser, membaca geometrinya, dan membuka kembali SVG lengkap di atas secara terpisah. Perbandingan menggunakan area tampilan lebih lebar untuk memberikan ruang bagi hasil dengan titik asal default. Ini adalah path demonstrasi buatan tangan, bukan output konversi PerfectVector atau pengujian setiap browser dan editor.

Versi titik asal default memindahkan lambang di sekitar (0, 0). Kedua versi grup terpusat sesuai. Pada panel terakhir, persegi berputar di sekitar (120, 90) sementara aksen segitiga berputar di sekitar (195, 90). Setiap bagian tetap dekat dengan posisi awalnya sendiri, tetapi lambang tidak lagi berputar sebagai satu objek.

Untuk file Anda sendiri, pilih hanya bagian yang harus bergerak bersama. Persegi panjang latar belakang, tanda registrasi, atau path liar yang jauh dapat memperbesar batas grup. Alur kerja pengeditan SVG membahas pemeriksaan dan pembersihan file sebelum Anda menambahkan perilaku.

Gunakan koordinat eksplisit ketika poros merupakan pilihan desain

Atribut transformasi SVG dapat menyatakan sudut dan poros secara langsung. Dalam contoh, ganti <g class="artwork"> dengan <g transform="rotate(35 150 90)">. Biarkan dua path berada di dalamnya. Menghapus class juga menghentikan transformasi CSS yang mengesampingkan atribut.

Bentuk rotate(angle cx cy) atribut menggunakan derajat diikuti poros dalam sistem koordinat pengguna saat ini. CSS rotate(35deg) memiliki sintaks berbeda dan mengambil titik asal dari properti terpisah. Jika transformasi CSS dan atribut transformasi SVG sama-sama menargetkan elemen yang sama, CSS diprioritaskan. Lihat referensi atribut transform MDN.

Koordinat eksplisit berguna untuk engsel, jarum, atau poros logo yang sengaja digeser. Pertahankan koordinat dalam sistem koordinat lokal yang sama dengan grup yang Anda putar. Koordinat yang diukur di layar tidak otomatis menjadi koordinat yang dapat ditempelkan ke grup SVG bersarang.

Jika grup yang ada sudah memiliki transformasi penempatan, pertahankan transformasi itu dan letakkan rotasi pada grup dalam baru yang berisi artwork. Kemudian uji file hasil ekspor. Mengganti transformasi yang ada dapat membuang translasi atau skala yang menempatkan lambang. Jika perubahan skala juga menggeser lambang, contoh urutan transformasi SVG menunjukkan bagaimana translasi dan penskalaan digabungkan.

Baca batas sebelum menghitung pusat

Untuk grup sederhana seperti contoh ini, perhitungan pusatnya adalah:

cx = x + width / 2
cy = y + height / 2

Dalam pengukuran browser kami, getBBox() pada grup mengembalikan x: 80, y: 50, width: 140, dan height: 80. Rotasi grup itu sendiri tidak mengubah nilai kotak lokal tersebut. Dokumentasi getBBox membedakan nilai ruang pengguna ini dari getBoundingClientRect(), yang persegi panjangnya relatif terhadap viewport browser.

Untuk outline seleksi atau viewBox yang disesuaikan, alur kerja kotak pembatas SVG menunjukkan cara mengonversi antara sistem koordinat tersebut dan memeriksa margin stroke.

Ukur elemen yang ingin Anda putar. Transformasi anak dapat memengaruhi batas grup yang menampungnya: grup kami dengan anak yang berputar terpisah memiliki batas berbeda dari pasangan aslinya. Wrapper, skala bersarang, atau bentuk liar perlu diperiksa sebelum Anda menggunakan ulang angka sederhana di atas.

Pusat kotak tidak selalu merupakan pusat visual

Persegi dalam contoh ini menempati area jauh lebih besar daripada aksen segitiganya. Titik tengah kotak gabungannya tetap berada di tengah antara tepi paling kiri dan paling kanan. Itu adalah aturan geometris; aturan tersebut tidak menilai apakah desain terlihat seimbang saat berputar.

Mulailah dengan pusat kotak, periksa lambang pada beberapa sudut, dan beralih ke poros eksplisit jika desain memerlukannya. Jarum jam biasanya membutuhkan titik penempelannya. Logo dengan aksen tidak di tengah mungkin memerlukan pusat pilihan desainer. Pisahkan keputusan itu dari memperbaiki titik asal berbasis viewport yang tidak disengaja.

Rotasi juga membutuhkan ruang. Ekspor yang rapat di sekitar artwork belum diputar dapat memotong sudut setelah artwork berputar. Sisakan ruang yang cukup di area tampilan dan periksa clipping induk. Jika seluruh file diimpor pada skala yang salah, gunakan diagnosis ukuran SVG sebelum mengubah bagian satu per satu.

Alur kerja ini memutar bentuk yang sudah ada tanpa menulis ulang konturnya. Jika tujuan Anda adalah mengubah satu outline menjadi outline lain, panduan morph SVG membahas masalah terpisah tentang pencocokan geometri path.

Siapkan sumber sebelum menetapkan poros

Jika ikon Anda hanya tersedia sebagai PNG atau JPG dan Anda perlu mengedit bentuk terpisahnya, PerfectVector dapat membantu menyiapkan kandidat SVG. Konversikan artwork menjadi vektor, periksa siluet dan detail terpisahnya, lalu kelompokkan bagian yang harus berputar bersama. Periksa bentuk latar belakang yang tidak diinginkan sebelum mengukur grup.

Bitmap dapat berputar secara keseluruhan tanpa penelusuran. Gunakan vektorisasi ketika geometri yang dapat diedit merupakan bagian dari pekerjaan. Jika Anda sudah memiliki master vektor yang dapat digunakan, pertahankan; mengubah titik asal transformasi tidak memperbaiki kontur yang rusak, dan menelusuri salinan raster menambahkan langkah rekonstruksi yang tidak diperlukan.

Sebelum menyerahkan file, buka kembali SVG yang sama persis di tujuannya. Pastikan bagian yang dimaksudkan berputar bersama, poros tetap berada di tempat yang Anda pilih, dan artwork yang diputar memiliki ruang. Simpan master yang tidak diubah untuk pengeditan di kemudian hari. Artikel alur kerja SVG di blog membahas pemeriksaan persiapan dan ekspor terkait.

FAQ

Mengapa transform-origin: center memutar SVG saya di sekitar canvas? Untuk anak SVG yang menggunakan referensi view-box default, center merujuk pada viewport referensi SVG. Atur transform-box ke fill-box pada elemen yang ingin Anda putar jika Anda menginginkan kotak pembatas objeknya.

Haruskah saya memutar grup atau setiap path? Putar grup ketika bagian-bagiannya harus bergerak sebagai satu lambang. Menerapkan fill-box dan center pada setiap path memberikan poros sendiri kepada setiap bagian, yang mengubah susunan gabungannya.

Apakah pusat fill-box akan membuat logo asimetris terlihat seimbang? Properti ini memilih pusat kotak pembatas objek. Keseimbangan visual mungkin membutuhkan poros berbeda, jadi periksa logo pada beberapa sudut dan pilih koordinat eksplisit ketika diperlukan.

Sources

1. MDN — transform-origin SVG — Mendefinisikan default titik asal SVG, pengecualian elemen root, dan hubungan kotak referensi.
2. MDN — transform-box — Mendefinisikan kotak referensi objek, stroke, dan viewport.
3. MDN — transform SVG — Mendokumentasikan koordinat rotasi eksplisit, transformasi grup, dan prioritas CSS.
4. MDN — getBBox — Menjelaskan pengukuran geometri lokal dan perbedaannya dari persegi panjang viewport.

Membutuhkan bentuk yang dapat diedit dari sumber raster? Siapkan SVG dengan PerfectVector, periksa bagian yang dipulihkan, lalu kelompokkan dan periksa poros yang dipilih dalam file hasil ekspor akhir.