Flag Busur SVG: Gambar Kurva Tepat dengan Perintah A

Dua flag dalam perintah A SVG memilih busur mana yang menghubungkan titik awal dan akhirnya. Tetapkan large-arc-flag ke 0 untuk jalur lebih pendek atau 1 untuk jalur lebih panjang. Tetapkan sweep-flag ke 0 atau 1 untuk memilih arah mengelilingi elips. Pertahankan titik ujung dan radius, ubah hanya kedua digit itu, dan Anda dapat melihat keempat kemungkinan. Spesifikasi path SVG 2 mendefinisikan pilihan empat busur ini.

Ini berguna ketika tepi logo melengkung, cincin lencana, atau ornamen antarmuka melengkung ke arah salah setelah suntingan kode. Jika sumber berupa PNG, vektorisasi dapat memberikan bentuk yang bisa diedit terlebih dahulu; perintah A adalah suntingan geometri terpisah yang disengaja.

Baca tujuh nilai setelah A

Perintah busur absolut memiliki urutan ini:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx dan ry adalah radius elips. x-axis-rotation memutar elips tersebut dalam sistem koordinat saat ini. Kedua flag masing-masing berupa 0 atau 1. Terakhir, x y adalah titik akhir. Awalnya adalah titik saat ini yang ditinggalkan perintah sebelumnya, sering berupa M x y. a huruf kecil memakai titik akhir relatif alih-alih absolut; tutorial path MDN menjelaskan bentuk perintah.

Misalnya, M70 370 A140 110 0 0 1 280 420 dimulai di (70, 370), memakai radius 140 dan 110, membiarkan elips tanpa rotasi, memilih jalur lebih pendek dengan sweep 1, dan berakhir di (280, 420). Angka berada dalam sistem koordinat pengguna SVG. Angka tersebut tidak otomatis menjanjikan ukuran cetak fisik.

Lihat empat kemungkinan busur

Kami merender contoh asli ini dari satu file SVG. Setiap panel memakai awal (70, 370), akhir (280, 420), radius 140 110, dan rotasi 0 yang sama. Hanya flag berubah. Oranye menandai awal dan hijau menandai akhir. Ini adalah render bergaya browser dari perintah path kami sendiri, bukan keluaran konversi PerfectVector.

Label "atas" dan "bawah" menjelaskan awal, akhir, dan susunan koordinat ini. Label bukan makna universal 0 dan 1. Penempatan titik ujung berbeda atau grup yang ditransformasi dapat memindahkan busur terlihat ke tempat lain. Flag sweep memilih arah sudut meningkat atau menurun sepanjang elips terpilih; dalam viewBox SVG biasa dengan sumbu y mengarah ke bawah, sweep 1 umumnya tampak searah jarum jam. Editor busur interaktif SVG Tutorial berguna untuk mengamati perubahan arah sambil mempertahankan masukan lain.

Untuk mereproduksi satu panel, simpan sebagai arc.svg dan buka di browser:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

Ubah hanya dua digit setelah rotasi 0, memakai tabel di atas. Jika Anda juga mengubah radius atau titik ujung, Anda tidak lagi dapat mengetahui suntingan mana yang mengubah jalur.

Perbaiki kurva yang mengarah salah

1. Temukan segmen. Dalam nilai d path, identifikasi titik awal sebelumnya, perintah A, dan titik akhirnya. Path dapat berisi beberapa segmen busur; sunting hanya yang salah.
2. Periksa keputusan panjang versus pendek. Jika kurva kecil tiba-tiba mengitari sebagian besar elips, ubah large-arc-flag dari 1 ke 0. Jika segmen cincin yang direncanakan menjadi konektor pendek, coba 1.
3. Periksa sisi atau arah gerakan. Pertahankan semua yang lain dan balik sweep-flag. Ini sering memindahkan busur ke sisi lain tali busur antara titik ujung.
4. Periksa seluruh karya. Segmen yang dikoreksi masih dapat bertemu tetangganya pada sudut tidak nyaman atau melampaui viewBox. Buka kembali file pada ukuran tampilan yang dimaksud, lalu sesuaikan geometri berdekatan atau kanvas sesuai kebutuhan.

Jika tidak ada pasangan flag yang cocok dengan siluet yang diinginkan, masalahnya kemungkinan bukan flag. Radius dan titik ujung menentukan elips kandidat; flag hanya memilih di antaranya. Panduan busur NaN mengilustrasikan bagaimana perubahan radius atau titik ujung mengubah elips yang mendasarinya.

Rotasi dan batas radius

x-axis-rotation berpengaruh ketika rx dan ry berbeda: nilai ini memutar elips sebelum busur dipilih. Dengan radius sama, memutar lingkaran tidak mengubah outline-nya. Untuk logo dengan tepi oval miring, coba radius dan rotasi yang dimaksud terlebih dahulu, lalu pilih flag. Jika tidak, Anda mungkin memilih sisi yang benar dari elips yang salah.

Catatan implementasi SVG 2 mendefinisikan kasus khusus. Jika salah satu radius nol, segmen diperlakukan sebagai garis lurus. Jika radius terlalu kecil untuk menghubungkan titik ujung, renderer memperbesarnya secukupnya agar busur mungkin dibuat. Jika awal dan akhir identik, segmen busur dihilangkan. Aturan ini menjelaskan mengapa perubahan flag kadang tampak tidak berefek. Aturan juga berarti render saja mungkin tidak membuktikan bahwa radius yang Anda ketik benar-benar digunakan tanpa koreksi.

Gunakan kurva hasil tracing sebagai titik awal, bukan rumus busur

Logo raster mungkin memperlihatkan batas lingkaran bersih, tetapi SVG hasil rekonstruksi dapat mendeskripsikannya dengan segmen Bézier dan jangkar alih-alih perintah A eksplisit. Alat vektorisasi gambar merekonstruksi bentuk yang terlihat; tidak selalu menyimpulkan pusat lingkaran, radius, atau flag busur asli perancang. Jika master vektor asli tersedia, sunting file itu alih-alih men-trace ulang.

Ketika hanya PNG atau JPG tersedia, ubah gambar menjadi path vektor yang bisa diedit dengan PerfectVector, periksa kontur hasil rekonstruksi, lalu tentukan apakah perlu digambar ulang secara geometris dengan presisi. Untuk cincin lencana, ukur pusat dan radius yang dimaksud dalam editor vektor dan ganti hanya bagian melengkung itu jika geometri konsisten penting. Pertahankan hasil tracing yang diterima untuk karya tidak beraturan yang akan terdistorsi oleh elips eksak. Panduan penyuntingan SVG kami membahas pilihan editor visual atau suntingan kode terarah; panduan pembersihan node membantu ketika kurva hasil tracing sulit dibentuk ulang.

Pembagian pekerjaan ini penting: PerfectVector dapat membantu merekonstruksi sumber yang hanya raster sebagai path, sementara penetapan parameter busur eksak dan pemeriksaan sambungan tetap keputusan desain. Jangan mengonversi SVG yang sudah bersih ke PNG dan men-trace ulang hanya untuk mengubah flag.

Sebelum menyerahkan SVG

• Simpan salinan asli atau master hasil tracing yang diterima.
• Konfirmasikan titik awal, titik akhir, radius, rotasi, dan kedua nilai flag dalam urutan itu.
• Bandingkan jalur terpilih pada pembesaran dekat maupun ukuran penggunaan sebenarnya.
• Periksa sambungan dan apakah jalur panjang melintasi tepi viewBox.
• Buka kembali SVG yang diserahkan dalam editor atau browser target. Tangkapan layar yang tampak benar tidak membuktikan penerima dapat menyunting path sesuai maksud.

FAQ

Apa arti flag large-arc dan sweep dalam SVG? Flag large-arc memilih busur kandidat yang lebih pendek atau panjang antara dua titik ujung. Flag sweep memilih arah gerakan segmen mengelilingi elips. Bersama-sama, flag memilih di antara empat kandidat ketika geometri tidak degenerat.

Mengapa mengubah flag large-arc SVG tidak memberi efek terlihat? Periksa apakah titik ujung berseberangan pada elips, sehingga kedua jalur berupa setengah putaran. Periksa juga titik ujung identik, radius nol, atau radius yang disesuaikan renderer untuk menghubungkan titik. Ubah satu parameter setiap kali dan bandingkan path yang dirender.

Bisakah vektorisasi gambar otomatis memulihkan perintah busur asli saya? Jangan menganggap demikian. Alat tracing dapat merekonstruksi bentuk vektor yang bisa diedit dari karya raster, tetapi hasil mungkin memakai kurva Bézier atau banyak jangkar. Buat ulang lingkaran atau elips presisi dalam editor vektor ketika geometri asli diperlukan.

Sources

1. W3C — Path SVG 2 — Sintaks busur, kombinasi flag, dan geometri path.
2. W3C — Catatan Implementasi SVG 2 — Koreksi radius dan penanganan busur degenerat.
3. MDN — Path SVG — Perintah path absolut dan relatif serta tutorial busur.
4. SVG Tutorial — Arc — Demonstrasi interaktif radius, rotasi, dan flag.
5. NaN — Perintah Path SVG: Busur — Penjelasan interaktif penyesuaian elips dan hasil flag.

Memerlukan sumber yang bisa diedit sebelum membentuk lambang yang hanya berupa raster? Konversikan gambar menjadi path vektor, periksa hasilnya, dan gambar ulang busur yang radius atau sweep eksaknya penting.