> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Gradien SVG Sepanjang Path: Periksa Warna di Tikungan
> Bandingkan gradien koordinat SVG dengan pita warna yang dibuat sengaja pada pita melengkung. Periksa sumber, uji dua ukuran, dan tentukan kompromi geometrinya.
Source: https://perfectvector.com/id/blog/svg-gradient-curved-stroke
Language: id
Author: Irene Kim
Published: 2026-10-05T08:00:00+09:00
Updated: 2026-10-05T08:00:00+09:00
SVG `linearGradient` biasa tidak mengukur kemajuan sepanjang path melengkung. Gradien mewarnai menurut vektor gradien dalam suatu sistem koordinat. Jika pita berbalik arah, dua titik pada posisi yang sama sepanjang vektor itu bisa mendapat warna yang sama meskipun berjauhan di sepanjang pita.
Untuk desain statis yang membutuhkan perkembangan warna mengitari tikungan, Anda dapat membuat bagian-bagian berwarna terpisah. Ini memberi kendali atas urutannya, tetapi menambah geometri dan batas warna yang terlihat. Contoh asli kami membandingkan gradien horizontal dengan delapan pita yang dibuat sengaja pada rute yang sama. Kedua berkas berisi path tanpa gambar tertanam.
## Periksa tempat warna berulang
[Spesifikasi paint server SVG2](https://www.w3.org/TR/SVG2/pservers.html) mendefinisikan gradien linear melalui vektor dan stop warnanya. Gradien radial dideskripsikan melalui geometri lingkarannya sendiri. Kedua definisi tidak menjadikan path sembarang sebagai sumbu warna berdasarkan jarak sepanjang path.
Pita kami dimulai di kiri atas, bergerak ke kanan, berbelok mengikuti setengah lingkaran, lalu kembali ke kiri bawah. Gradien horizontal membuat kedua ujung kiri oranye dan tikungan kanan ungu. Itu gradien koordinat yang sah; gradien tersebut hanya menjawab pertanyaan desain yang berbeda dari “ubah warna dari awal rute ini hingga akhirnya.”
[Tutorial gradien MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) menjelaskan model titik akhir dan stop. Menambahkan stop mengubah urutan warna berbasis koordinat itu. Ini tidak membuat pewarnaan mengikuti kurva.
**Warna koordinat dan pita yang dibuat**
*Ilustrasi: gradien koordinat dapat mengulang warna pada rute yang kembali, sedangkan pita terpisah dapat menetapkan urutan awal-ke-akhir yang berbeda. Jumlah elemen sumber dan sampel peramban sebenarnya di bawah berasal dari berkas SVG yang dibuat independen.*
## Simpan satu gradien biasa sebagai kontrol
Simpan berkas lengkap ini sebagai `coordinate.svg`. Path memakai stroke 24 satuan di dalam viewBox `200×160`. Bagian lurus dan setengah lingkaran kanannya membentuk satu garis tengah yang bisa diedit.
```svg
```
Kami memakai `gradientUnits="userSpaceOnUse"` untuk membuat titik akhir gradien eksplisit dalam sistem koordinat sumber. Beralih ke koordinat kotak pembatas akan mengubah cara titik akhir dinyatakan; itu tidak menghadirkan pewarnaan berdasarkan jarak path. Lihat [referensi gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) dan [panduan koordinat gradien](https://perfectvector.com/id/blog/svg-gradient-units) kami.
Seluruh rute merupakan satu elemen `path`. Simpan versi sederhana ini sebagai master geometri meskipun Anda memutuskan menyerahkan perlakuan warna lebih rumit.
## Buat urutan bertahap mengitari tikungan
Simpan kode berikut sebagai `bands.svg`. Kode membagi bagian lurus atas menjadi dua bagian, setengah lingkaran menjadi empat busur, dan bagian lurus yang kembali menjadi dua bagian. Warna ditetapkan menurut urutan rute, dari oranye pada awal atas hingga ungu pada ujung bawah.
```svg
```
Ini delapan pita yang dipilih manual dengan panjang segmen tidak sama. Pita itu bukan perhitungan kenaikan warna seragam per satuan panjang path dan tidak menciptakan gradasi kontinu. Titik akhir busur desimal yang dibulatkan mendekati rute asli; contoh ini tidak mengklaim kontur identik per piksel.
[Referensi `path`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) menjelaskan elemen dan data path-nya. Setiap bagian di sini tetap berupa garis tengah ber-stroke, bukan fill tertutup yang dibuat dari kontur luar. Jika tujuan membutuhkan bentuk tertutup, siapkan dan periksa geometri itu secara terpisah alih-alih menganggap potongan stroke ini kontur pemotongan.
Kami memakai [`stroke-linecap="butt"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) agar bagian yang bersebelahan tidak memanjang melewati titik akhirnya. Ujung bulat pada setiap bagian internal akan menumpuk warna tetangga. Transisi lurus-ke-busur juga membutuhkan arah yang cocok; [panduan sambungan mulus](https://perfectvector.com/id/blog/svg-bezier-smooth-joins) kami membahas pertanyaan kontinuitas geometri secara terpisah.
## Bandingkan dua ukuran dan dua posisi
Kami merender kedua berkas asli di Chrome pada `200×160` dan `400×320` piksel CSS. Peramban mendekode setiap SVG, lalu melukisnya ke kanvas yang dimensi buffer-nya cocok dengan dimensi pengujian. Rasio piksel perangkat peramban adalah 2; sampel yang dicatat ini berasal dari buffer kanvas, bukan penghitungan piksel perangkat dalam tangkapan layar.
Pada koordinat sumber `(60,30)` dan `(60,130)`, titik-titik berada pada bagian lurus rute yang berbeda. Koordinat horizontalnya sama, sehingga gradien horizontal memberi keduanya warna sampel yang sama.
| Berkas | Sampel atas pada x=60 | Sampel bawah pada x=60 | Path | Gambar tertanam |
| --------------------- | --------------------- | ---------------------- | ---- | --------------- |
| Gradien koordinat | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 |
| Pita yang dibuat | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 |
| Master geometri datar | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 |
Pasangan sampel sama pada kedua ukuran yang diuji, dengan alfa 255 pada bagian dalam yang dicat. Area terbuka pada sumber `(100,80)` memiliki alfa nol dalam keenam kasus. Ini memeriksa berkas yang dibuat ini dalam peramban tersebut; ini tidak menjamin setiap renderer atau seluruh piksel batas.
Rendering berpita jelas mempertahankan perubahan warna diskret pada kedua ukuran. Periksa sambungan pada ukuran penyerahan, terutama setelah ekspor atau penyematan. Bagian terpisah dapat memperlihatkan celah akibat antialiasing, pembulatan, atau pengeditan berikutnya. Menambah jumlah bagian dapat memperkecil setiap langkah warna, tetapi juga menciptakan lebih banyak path dan batas untuk dipelihara.
## Pilih perlakuan sebelum memperluas gambar
| Kebutuhan desain | Titik awal yang berguna | Biaya pemeriksaan |
| ----------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Warna mengikuti arah halaman | Satu gradien koordinat | Posisi titik akhir dan batas sumber |
| Perkembangan statis di sekitar rute ini | Bagian berwarna yang dibuat sengaja | Warna bagian, sambungan tangen, dan celah |
| Perkembangan mulus di sepanjang kurva sembarang | Pendekatan yang dirancang terpisah atau metode penyerahan lain | Pengambilan sampel, persilangan, geometri yang bisa diedit, dan rendering tujuan |
Memutar gradien linear mengubah arahnya. Mengulangnya mengubah cara warnanya meluas. Kedua operasi tidak membuatnya terus berbelok mengikuti garis tengah yang kembali ini. Gradien radial mungkin sesuai komposisi melingkar, tetapi itu geometri pewarnaannya sendiri, bukan solusi umum berbasis jarak rute.
Jika Anda menyesuaikan kurva nanti, revisi bagian-bagian itu bersama-sama. Simpan master datar untuk membandingkan rute yang dimaksud dan pertahankan salinan perlakuan warna secara terpisah. [Panduan path relatif](https://perfectvector.com/id/blog/svg-relative-path-commands) kami dapat membantu saat membaca atau memindahkan perintah path dasarnya.
Jika gambar awal adalah PNG atau JPG dan Anda membutuhkan kontur yang bisa diedit, [konversikan sumber dengan PerfectVector](https://perfectvector.com/id/image-to-vector), periksa bentuk dan area terbuka yang dipulihkan, lalu simpan master SVG bersih. Pilih atau bangun ulang perlakuan warna setelah memeriksa geometri itu. Vektorisasi tidak menjamin pemulihan gradasi kontinu secara persis atau menciptakan fitur gradien-sepanjang-path bawaan. SVG bersih yang sudah ada membutuhkan pengeditan pewarnaan dan geometri langsung; [panduan vektorisasi gambar](https://perfectvector.com/id/blog/what-is-image-vectorization) menjelaskan kapan konversi raster membantu.
## Pertanyaan umum
**Bisakah saya membuat linearGradient mengikuti stroke melengkung apa pun?**
Definisi linearGradient biasa tidak menyediakan pengaturan jarak path. Vektor koordinatnya mengendalikan pewarnaan. Contoh bertahap menetapkan warna terpisah pada bagian rute terpisah.
**Apakah lebih banyak stop gradien memperbaiki warna yang berulang?**
Lebih banyak stop dapat memperhalus transisi warna di sepanjang vektor gradien. Titik pada posisi yang sama sepanjang vektor tersebut tetap memiliki pewarnaan berbasis koordinat yang sama.
**Apakah berkas berpita berisi gambar raster?**
Tidak. Contoh yang kami buat berisi delapan elemen path tanpa elemen image. Contoh juga berisi langkah warna terlihat, bukan gradien kontinu berbasis jarak path.
**Haruskah saya mengganti setiap gradien dengan path terpisah?**
Gunakan gradien koordinat yang lebih sederhana jika cocok dengan desain. Bagian terpisah berguna ketika perkembangan dan biaya pengeditannya dapat diterima; periksa celah dan rendering tujuan sebelum penyerahan.
## Sumber
1. [W3C — Paint server SVG2](https://www.w3.org/TR/SVG2/pservers.html) — Vektor gradien, stop, dan pewarnaan berbasis koordinat.
2. [MDN — Gradien dalam SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) — Konstruksi gradien linear dan radial.
3. [MDN — gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Sistem koordinat ruang pengguna dan kotak pembatas.
4. [MDN — path](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) — Elemen path dan data path yang bisa diperiksa.
5. [MDN — stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) — Perilaku ujung butt dan bulat.
## Explore
- [Read the HTML article](https://perfectvector.com/id/blog/svg-gradient-curved-stroke)
- [Bulatkan Sudut SVG dengan Mengubah Bentuk Isiannya](https://perfectvector.com/id/blog/round-svg-path-corners.md)
- [Pembungkusan Teks SVG: Buat Baris Terukur dengan tspan](https://perfectvector.com/id/blog/svg-text-wrap-tspan.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)