Perintah Path Relatif SVG: Lacak Titik Saat Ini

Perintah path SVG absolut seperti M, L, dan C memakai posisi dalam sistem koordinat pengguna saat ini. Bentuk relatifnya, m, l, dan c, memakai pergeseran dari titik saat ini. Untuk membaca atau menulis ulang path, lacak titik tersebut setelah setiap segmen. Mengubah huruf perintah tanpa mengubah angkanya dapat mengubah bentuk.

Dua aturan sering menimbulkan kebingungan: pasangan pertama dari m awal bertindak sebagai perpindahan absolut, sedangkan pasangan tambahan menjadi garis relatif; lalu Z atau z menutup subpath dan mengembalikan titik saat ini ke titik awalnya. Perpindahan relatif baru setelah penutupan itu memakai titik yang telah direset.

Baca posisi dan pergeseran secara terpisah

Spesifikasi path W3C mendefinisikan path melalui titik saat ini, subpath, dan perintah gambar. Koordinatnya memakai satuan pengguna SVG, yang belum tentu berupa piksel layar. viewBox atau transformasi dapat memetakannya ke posisi tampilan yang berbeda.

Dengan titik awal (40, 40), kedua perintah ini menggambarkan garis yang sama:

L180 40
l140 0

Perintah pertama menetapkan titik akhir (180, 40). Perintah kedua menambahkan (140, 0) ke (40, 40). Keduanya berakhir di (180, 40), yang menjadi titik saat ini untuk segmen berikutnya.

Sebaliknya, l180 40 menambahkan (180, 40) dan berakhir di (220, 80). Sintaks perintah itu valid, tetapi garis yang digambar berbeda.

Z huruf besar dan kecil memiliki efek yang sama: keduanya tidak menerima argumen koordinat. Referensi d MDN mencantumkan perintah beserta parameter masing-masing.

Bandingkan dua deskripsi karya asli yang sama

Simpan SVG lengkap ini sebagai absolute.svg lalu buka di browser. SVG ini berisi lencana majemuk berwarna hijau kebiruan dengan lubang persegi serta kurva kubik terpisah berwarna koral:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
  <path class="badge" fill="#173b40" fill-rule="evenodd" d="M40 40L180 40L210 80L180 140L40 140Z M80 70L80 110L120 110L120 70Z"/>
  <path class="curve" fill="none" stroke="#f28567" stroke-width="6" d="M40 190C80 145 155 225 220 180"/>
</svg>

Untuk relative.svg, pertahankan ukuran SVG, viewBox, dan gayanya, tetapi ganti kedua elemen path dengan ini:

<path class="badge" fill="#173b40" fill-rule="evenodd"
  d="m40 40 140 0 30 40 -30 60 -140 0z m40 30 0 40 40 0 0 -40z"/>
<path class="curve" fill="none" stroke="#f28567" stroke-width="6"
  d="m40 190c40 -45 115 35 180 -10"/>

Kami merender kedua file asli di browser, berdampingan dengan salinan lencana absolut yang sengaja dibuat keliru. Salinan yang keliru hanya mengubah L180 40 pertamanya menjadi l180 40; angkanya tetap sama.

Halaman kami memakai getTotalLength() dan getPointAtLength() bawaan SVG untuk membandingkan 301 sampel per path pada fraksi panjang total yang bersesuaian. Panjang yang ditampilkan adalah 657.082 satuan pengguna untuk setiap lencana dan 189.066 untuk setiap kurva. Selisih titik sampel maksimum ditampilkan sebagai 0.000000 untuk kedua pasangan.

Pengukuran itu mendukung kesetaraan string khusus ini, yang titik garis dan titik kubiknya juga cocok melalui perhitungan di bawah. Ini bukan bukti bahwa sembarang penulisan ulang atau konverter menangani semua perintah SVG. Perbandingan memakai viewport tanpa transformasi dan pengaturan pewarnaan yang sama sepanjang pengujian.

Ikuti m pertama dan garis implisitnya

Lencana kami dimulai dengan:

m40 40 140 0 30 40 -30 60 -140 0z

Hanya pasangan pertama yang melakukan perpindahan. Pasangan berikutnya bertindak sebagai segmen l relatif implisit. Definisi moveto secara eksplisit mempertahankan pasangan selanjutnya sebagai relatif meskipun m40 40 awal diperlakukan sebagai titik awal absolut.

Lacak satu pasangan setiap kali:

Sebagai perbandingan, M huruf besar dengan beberapa pasangan akan mengubah pasangan selanjutnya menjadi segmen L absolut implisit. Perintah itu tidak memperlakukan setiap pasangan sebagai perpindahan baru dan tidak memakai delta yang sama dengan contoh huruf kecil ini.

Elemen path membentuk urutan path-nya sendiri. Jangan memulai m relatif awalnya dari titik akhir elemen path lain yang tidak terkait sebelumnya.

Gunakan titik awal subpath tertutup untuk perpindahan berikutnya

Lubang dimulai setelah z pertama:

m40 30 0 40 40 0 0 -40z

Saat itu titik saat ini adalah (40, 40), sehingga perpindahan relatif baru menambahkan (40, 30) dan memulai lubang di (80, 70). Garis implisitnya lalu mencapai (80, 110), (120, 110), dan (120, 70) sebelum menutup.

Jika Anda keliru memakai titik akhir garis terakhir lencana luar, (40, 140), sebagai acuan, perpindahan tersebut akan ditempatkan di (80, 170). Penutupan sebelumnya membuat perhitungan itu salah. Definisi closepath mereset titik saat ini ke titik awal subpath saat ini.

Kedua subpath merupakan bagian dari satu elemen path. fill-rule="evenodd" membuat persegi dalam menjadi bukaan pada contoh ini. Pertahankan aturan isian dan pengaturan pewarnaan saat membandingkan penulisan ulang koordinat agar perubahan isian tidak menutupi geometri yang Anda uji.

Ukur setiap titik kontrol kubik dari titik awal yang sama

Kurva terpisah dimulai di (40, 190):

M40 190 C80 145 155 225 220 180
m40 190 c40 -45 115 35 180 -10

Untuk satu segmen c huruf kecil ini, ketiga pasangan adalah pergeseran dari (40, 190). Titik kontrol kedua tidak diukur dari titik kontrol pertama, dan titik akhir tidak diukur dari titik kontrol kedua.

Setelah segmen selesai, perbarui titik saat ini menjadi titik akhirnya, (220, 180). Segmen relatif berikutnya akan memakai titik awal baru itu. Tutorial path MDN menjelaskan titik kontrol kubik dan bentuk absolut/relatif; panduan sambungan Bézier membahas gagang tangen dan perintah singkat S secara terpisah.

Jangan menerapkan pengurangan koordinat pada setiap angka dalam setiap perintah. Pada busur, radius, rotasi, dan flag memiliki peran berbeda; hanya pasangan titik akhirnya yang beralih antara posisi absolut dan relatif. Baca penjelasan flag busur sebelum menulis ulang data A atau a. Contoh ini memperagakan garis, perpindahan, penutupan, dan satu segmen kubik biasa, bukan prosedur konversi path secara umum.

Pindahkan karya tanpa mencampur penempatan dan sintaks path

Untuk lencana majemuk yang seluruhnya relatif ini, mengubah m40 40 awal menjadi m60 60 menggeser titik-titiknya sebesar (20, 20): delta berikutnya dan perpindahan subpath relatif mengikuti titik awal yang berubah itu. Path kurva terpisah tetap sama. Pada data campuran, posisi absolut berikutnya tetap terikat pada koordinat yang ditetapkan, sehingga menyunting perpindahan pertama dapat mendistorsi path.

Untuk memindahkan seluruh karya dua path sebagai satu kesatuan, pertahankan kedua string d dan letakkan elemennya di dalam grup dengan transform="translate(20 20)". Spesifikasi sistem koordinat SVG menjelaskan bagaimana transformasi membentuk pemetaan koordinat. Transformasi grup mengubah penempatan tanpa menulis ulang data path asli.

Pastikan viewport masih memuat karya yang dipindahkan; mentranslasikan grup tidak otomatis memperbesar kanvasnya. Panduan urutan transformasi SVG membahas penempatan ketika translasi dan penskalaan digabungkan.

Periksa geometri sumber sebelum mengubah notasinya

PerfectVector dapat membantu jika karya hanya tersedia sebagai PNG atau JPG. Siapkan kandidat SVG, lalu bandingkan siluet, lubang, dan bentuk kurva yang direkonstruksi dengan sumber sebelum menyunting data path-nya. Notasi absolut atau relatif tidak menentukan apakah geometri yang direkonstruksi cocok untuk kebutuhan Anda.

Gunakan file master vektor yang tersedia secara langsung, atau gambar ulang simbol sederhana jika itu lebih mudah dikendalikan. Menulis ulang perintah tidak dapat memulihkan bentuk yang dimaksud dari informasi raster yang hilang. Ikhtisar vektorisasi gambar menjelaskan langkah rekonstruksi terpisah tersebut.

Saat menyunting SVG yang layak digunakan, simpan salinan aslinya, ubah satu segmen yang dipahami setiap kali, lalu bandingkan file nyata pada skala yang sama. Lacak titik awal subpath selain titik saat ini. Pertahankan pengaturan isian dan stroke selama perbandingan, lalu uji file ekspor di aplikasi penerimanya.

FAQ

Apakah m huruf kecil pertama relatif terhadap path lain? Tidak. Ketika m menjadi perintah pertama sebuah path, pasangan pertamanya diperlakukan sebagai titik awal absolut. Pasangan tambahan menjadi garis relatif implisit, dan titik akhir elemen path lain bukan acuan awalnya.

Di mana titik saat ini setelah Z atau z? Di titik awal subpath yang baru ditutup. Perpindahan relatif berikutnya memakai titik yang direset itu, bukan titik akhir garis sebelumnya.

Bisakah saya mengonversi path dengan mengubah perintahnya menjadi huruf kecil? Tidak. Nilai posisi harus dihitung ulang sesuai makna setiap perintah. L180 40 pada contoh ini menjadi l140 0 dari titik saat ini (40, 40), sedangkan l180 40 menggambar garis yang berbeda.

Sources

1. W3C — Path SVG 2 — Mendefinisikan titik saat ini, moveto awal, garis implisit, penutupan, dan parameter kubik.
2. MDN — Tutorial path — Mengilustrasikan perintah garis dan kurva absolut serta relatif.
3. MDN — Atribut d — Mencantumkan peran parameter perintah, termasuk busur dan closepath.
4. W3C — Sistem Koordinat SVG 2 — Menjelaskan pemetaan koordinat pengguna dan penempatan karya melalui transformasi.

Memulai dengan karya yang hanya tersedia sebagai raster? Siapkan path SVG dengan PerfectVector, periksa siluet dan bukaan yang direkonstruksi, lalu sunting hanya perintah yang Anda pahami dan cocokkan SVG yang diserahkan dengan aslinya.