> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Bulatkan Sudut SVG dengan Mengubah Bentuk Isiannya
> Bulatkan satu sudut isian SVG dengan busur singgung, periksa kecocokan radius dengan sisi, dan pahami mengapa sambungan goresan bulat tidak mengubah isian.
Source: https://perfectvector.com/id/blog/round-svg-path-corners
Language: id
Author: Irene Kim
Published: 2026-10-12T08:00:00+09:00
Untuk membulatkan sudut isian jalur SVG, ubah geometri jalurnya. Hentikan kedua segmen lurus yang bersebelahan sebelum titik sudut, lalu hubungkan kedua ujung baru itu dengan kurva. `stroke-linejoin="round"` mengubah goresan yang digambar pada sambungan; kontur isian aslinya tetap berada di tempat.
Tutorial ini membulatkan satu sudut siku-siku pada lambang asli dengan isian. Anda memerlukan editor teks biasa dan browser. Pada akhirnya, Anda akan memiliki SVG lengkap dengan fillet lingkaran 20 satuan, pemeriksaan bahwa radius pilihan muat, serta berkas asli bersudut tajam untuk perbandingan atau pemulihan.
Fillet adalah kurva pengganti sudut tajam yang bertemu sisi-sisi bersebelahan secara tangensial. Contoh ini menggunakan seperempat busur lingkaran di antara sisi lurus horizontal dan vertikal. Contoh ini tidak otomatis membulatkan jalur Bézier hasil penelusuran sembarang.
## Pilih perubahan yang dibutuhkan gambar Anda
[Referensi stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) menentukan cara goresan digambar pada sudut jalur. Gunakan sambungan bulat jika batas berwarna itulah yang ingin diubah. Untuk mengubah siluet berisi, edit jalur sebenarnya.
| Objek atau kebutuhan Anda | Titik awal yang sesuai | Yang berubah |
| ------------------------------------------ | --------------------------------------------- | --------------------------------------------- |
| Persegi panjang SVG biasa | Mengatur `rx` atau `ry` pada persegi panjang | Geometri sudut persegi panjang |
| Jalur bersudut dengan goresan | Mengatur sambungan goresan bulat | Warna yang digambar di sekitar jalur yang ada |
| Poligon atau lambang dengan isian | Mengganti sudut terpilih dengan kurva | Siluet dengan isian |
| Jalur rumit hasil penelusuran dengan kurva | Memeriksa dan mengedit pertemuan yang dipilih | Bergantung pada segmen sebenarnya |
Untuk persegi panjang biasa, [referensi SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) mendokumentasikan `rx` dan `ry`. Emblema kami juga memiliki sisi diagonal, jadi mengubahnya menjadi persegi panjang membulat akan mengubah lebih dari sudut yang dipilih.
Jika masalahnya hanya lonjakan panjang pada goresan, mulailah dengan [diagnosis lonjakan miter](https://perfectvector.com/id/blog/svg-miter-spikes). Artikel ini mengubah geometri isiannya.
## Simpan bentuk asli bersudut tajam
Salin berkas lengkap ini ke `emblem-original.svg` dan buka di browser. Titik sudut kanan atas adalah (170, 30). Sisi masuknya horizontal; sisi keluarnya berlanjut ke bawah sampai (170, 100).
```xml
```
Simpan berkas ini sebagai master pembanding. Menambahkan `stroke="#df9d34"`, `stroke-width="8"`, dan `stroke-linejoin="round"` pada jalur ini memberinya goresan tepi membulat, sementara isian gelap tetap mencapai sudut tajam asli.
## Ganti sudut itu dengan busur 20 satuan
Pindahkan ujung garis masuk 20 satuan ke kiri dari titik sudut, ke (150, 30). Pindahkan awal garis keluar 20 satuan ke bawah, ke (170, 50). Lingkaran berpusat di (150, 50) dengan radius 20 menghubungkan titik tersebut sebagai seperempat busur.
Simpan berkas lengkap kedua ini sebagai `emblem-rounded.svg`:
```xml
```
`A20 20 0 0 1 170 50` berarti busur lingkaran dengan radius horizontal dan vertikal 20, rotasi nol, busur kecil, dan flag sweep 1, yang berakhir di (170, 50). [Spesifikasi jalur SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) menentukan parameter tersebut. Untuk sudut searah jarum jam ini, parameter itu memilih seperempat lingkaran yang dimaksud. [Panduan flag busur](https://perfectvector.com/id/blog/svg-arc-flags) membantu mendiagnosis busur yang membelok melalui arah yang salah.
Radius lingkaran vertikal pada ujung pertama dan horizontal pada ujung kedua. Karena itu, garis singgungnya mengikuti garis masuk horizontal dan garis keluar vertikal. Kurva dapat terlihat membulat tetapi masih membentuk tekukan pada sambungan; konstruksi ini memberi sisi-sisi tertentu tersebut arah singgung yang cocok.
*Contoh pertama mengubah goresan yang digambar. Contoh kedua mengubah kontur isian gelap. Contoh ketiga menunjukkan hasil tidak valid akibat mengabaikan sisi bersebelahan yang lebih pendek; pemeriksaan radius menolak kasus itu.*
## Periksa apakah radius muat pada sisi yang tersedia
Pada sudut 90 derajat ini, fillet lingkaran memakai jarak sebesar radiusnya di setiap sisi bersebelahan. Sisi masuk memiliki panjang 140 satuan, tetapi sisi keluar hanya 70. Untuk konstruksi satu sudut ini, radius positif tidak boleh lebih besar dari 70; pilih radius lebih kecil jika Anda ingin menyisakan bagian lurus pada sisi keluar.
Fungsi berikut sengaja dibatasi untuk lambang dan sudut ini saja. Jalankan di konsol JavaScript atau Node.js untuk menghasilkan nilai `d` pengganti.
```javascript
function roundEmblemCorner(radius) {
const incomingLength = 170 - 30;
const outgoingLength = 100 - 30;
if (!Number.isFinite(radius) || radius <= 0 ||
radius > Math.min(incomingLength, outgoingLength)) {
throw new Error('Radius must be positive and fit both adjacent edges.');
}
return `M30 30H${170 - radius}` +
`A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
'V100L110 160H30Z';
}
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z
```
Dengan radius 80, konstruksi naif akan mengakhiri busur di (170, 110), melewati titik sudut berikutnya (170, 100). Perintah `V100` selanjutnya akan berbalik arah. Tolak radius itu, jangan menerima begitu saja apa pun yang digambar browser.
Untuk sudut lain dengan sisi lurus, jarak singgung bergantung pada sudutnya. Untuk sudut cembung biasa dengan sudut dalam θ, jaraknya adalah `r / tan(θ / 2)`. Jika Anda membulatkan kedua ujung sisi bersama, jumlah kedua jarak yang terpakai harus muat pada sisi tersebut. Sudut cekung, kurva yang sudah ada, dan bentuk majemuk memerlukan keputusan geometri tambahan; fungsi ini tidak menanganinya.
## Verifikasi siluet yang berubah, lalu simpan sumbernya
1. Buka kedua SVG lengkap pada ukuran dan latar yang sama.
2. Hapus sementara goresan dari versi sambungan berwarna. Isiannya harus cocok dengan bentuk asli bersudut tajam.
3. Bandingkan kontur kanan atas versi membulat. Sisi lain, sisi diagonal, dan posisi keseluruhan harus cocok dengan aslinya.
4. Jalankan pemeriksaan radius dengan 20 lalu 80. Nilai pertama menghasilkan jalur yang ditampilkan; nilai kedua memunculkan galat radius.
5. Periksa SVG tersimpan di aplikasi tujuan penggunaannya. Pulihkan bentuk asli jika pembulatan menghilangkan ciri yang disengaja atau aplikasi tujuan mengubah tampilannya.
Catatan metode: kami merender jalur asli, bergaris tepi bulat, dan berfillet di Chromium. Titik pemeriksaan isian di (169, 31) berada di dalam dua bentuk pertama dan di luar bentuk berfillet. Fungsi yang persis sama di atas menerima 20 dan menolak 80. Kami juga memeriksa kedua ujung busur terhadap radius dan arah singgung sisi-sisi yang bersebelahan. Ini memverifikasi contoh sisi lurus yang diberikan, bukan algoritme fillet umum atau hasil mesin potong.
Jika kurva menonjol ke luar, periksa ujung busur dan flag sweep. Jika masih ada tekukan, periksa apakah garis singgung kurva cocok dengan segmen tetangga; [panduan sambungan Bézier mulus](https://perfectvector.com/id/blog/svg-bezier-smooth-joins) menjelaskan perbaikan terpisah itu. [Panduan pengeditan SVG](https://perfectvector.com/id/blog/how-to-edit-an-svg) membahas pembukaan, pemeriksaan, dan penyimpanan master yang dapat digunakan.
## Peran PerfectVector sebelum mengedit sudut
PerfectVector dapat memulihkan jalur vektor ketika gambar hanya tersedia sebagai raster. Periksa dahulu kontur yang dipulihkan, lalu putuskan sudut mana yang diubah dalam salinan. [Alur gambar ke vektor](https://perfectvector.com/id/image-to-vector) menyediakan tahap pemulihan; bukan otomatis menerapkan konstruksi fillet ini.
Gunakan berkas vektor asli jika tersedia. Kontur hasil penelusuran dapat mengandung segmen Bézier dan ketidakteraturan kecil yang tidak sesuai dengan contoh sisi lurus ini. Menggambar ulang lambang sederhana yang diinginkan mungkin lebih mudah daripada membulatkan setiap pertemuan hasil penelusuran. Simpan bentuk yang disetujui sebelum perubahan desain yang disengaja, lalu gunakan [panduan alur kerja blog](https://perfectvector.com/id/blog) untuk pemeriksaan penyerahan berikutnya.
## Tanya jawab
### Mengapa sambungan goresan bulat membuat sudut isian tetap tajam?
Sambungan mengatur goresan yang digambar di sekitar jalur. Isian mengikuti geometri jalur yang ada, sehingga sudut asli tetap bertahan sampai Anda mengganti geometri tersebut dengan kurva.
### Bisakah fungsi ini digunakan pada semua jalur SVG?
Tidak. Fungsi ini menangani satu sudut siku-siku tertentu pada lambang bersisi lurus yang ditampilkan. Sudut lain, sudut cekung, kurva yang sudah ada, dan batasan sisi bersama memerlukan konstruksi sendiri.
### Apakah ini membuat berkas siap dipotong?
Ini mengubah satu kontur dengan isian pada contoh. Periksa geometri tersimpan dan lakukan pemeriksaan yang diperlukan mesin potong atau proses produksi Anda; uji browser ini tidak membuktikan hasil pemotongan fisik.
## Sumber
1. [MDN — SVG stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) — Mendefinisikan pengaturan goresan yang dibedakan dari geometri isian dalam perbandingan.
2. [MDN — SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) — Mendokumentasikan kontrol radius yang lebih sederhana untuk persegi panjang biasa.
3. [W3C — Perintah busur elips SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) — Mendefinisikan radius, flag, dan ujung busur yang digunakan pada jalur membulat lengkap.
***
Jika jalur asli hilang, [pulihkan gambar Anda dengan PerfectVector](https://perfectvector.com/id/image-to-vector). Periksa konturnya terhadap referensi, simpan master hasil pemulihan, dan uji perubahan sudut yang disengaja dalam salinan terpisah pada ukuran yang dituju.
## Explore
- [Read the HTML article](https://perfectvector.com/id/blog/round-svg-path-corners)
- [Perintah Path Relatif SVG: Lacak Titik Saat Ini](https://perfectvector.com/id/blog/svg-relative-path-commands.md)
- [SVG Diimpor pada Ukuran Keliru: Temukan Penyebab dan Perbaiki](https://perfectvector.com/id/blog/svg-imports-wrong-size.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)