> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Yol Boyunca SVG Gradyanı: Dönüşteki Rengi Kontrol Edin
> SVG koordinat gradyanını kıvrımlı şeritte bilinçli renk bantlarıyla karşılaştırın. Kaynağı inceleyin, iki boyutta sınayın ve geometri ödünleşimini seçin.
Source: https://perfectvector.com/tr/blog/svg-gradient-curved-stroke
Language: tr
Author: Irene Kim
Published: 2026-10-05T08:00:00+09:00
Updated: 2026-10-05T08:00:00+09:00
Normal SVG `linearGradient`, kıvrımlı yol boyunca ilerlemeyi ölçmez. Koordinat sistemindeki gradyan vektörüne göre boyar. Şerit geri dönüyorsa bu vektör üzerinde aynı konumda bulunan iki nokta, şerit boyunca birbirinden uzak olsa da aynı rengi alabilir.
Rengin dönüş boyunca ilerlemesi gereken sabit tasarım için ayrı renkli bölümler oluşturabilirsiniz. Bu, sıralamayı denetlemenizi sağlar, ancak geometri ve görünür renk sınırları ekler. Özgün örneğimiz aynı oluşturulmuş rota üzerinde yatay gradyanı sekiz bilinçli bantla karşılaştırır. İki dosya da yollar içerir, gömülü görsel içermez.
## Rengin nerede tekrarlandığını kontrol edin
[SVG2 boyama sunucusu belirtimi](https://www.w3.org/TR/SVG2/pservers.html), doğrusal gradyanları vektör ve renk duraklarıyla tanımlar. Radyal gradyanları kendi dairesel geometrileriyle açıklar. İki tanım da rastgele bir yolu, yol mesafesine dayalı renk eksenine dönüştürmez.
Şeridimiz sol üstte başlar, sağa gider, yarım çember etrafından dönüp sol alta geri gelir. Yatay gradyan iki sol ucu turuncu, sağ dönüşü mor yapar. Bu geçerli bir koordinat gradyanıdır; yalnızca “bu rotanın başlangıcından sonuna kadar rengi değiştir” sorusundan farklı bir tasarım sorusunu yanıtlar.
[MDN gradyan öğreticisi](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients), uç nokta ve durak modelini açıklar. Daha çok durak eklemek koordinat tabanlı renk sırasını değiştirir. Boyamanın eğriyi izlemesini sağlamaz.
**Koordinat rengi ve oluşturulmuş bantlar**
*İllüstrasyon: koordinat gradyanı geri dönen rotada rengi tekrarlayabilir; ayrı bantlar farklı bir başlangıçtan sona sıralaması atayabilir. Aşağıdaki gerçek kaynak sayıları ve tarayıcı örnekleri bağımsız oluşturulmuş SVG dosyalarından gelir.*
## Kontrol olarak normal bir gradyanı koruyun
Bu eksiksiz dosyayı `coordinate.svg` olarak kaydedin. Yol, `200×160` viewBox içinde 24 birim kontur kullanır. Düz bölümleri ve sağ yarım çemberi tek düzenlenebilir merkez çizgisi oluşturur.
```svg
```
Gradyan uç noktalarını kaynak koordinat sisteminde açık kılmak için `gradientUnits="userSpaceOnUse"` kullanıyoruz. Sınırlama kutusu koordinatlarına geçmek bu uçların ifade edilişini değiştirir; yol mesafesi boyaması getirmez. [gradientUnits başvurusuna](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) ve [gradyan koordinatı kılavuzumuza](https://perfectvector.com/tr/blog/svg-gradient-units) bakın.
Rotanın tamamı tek `path` öğesidir. Daha ayrıntılı renk efekti teslim etmeye karar verseniz bile bu basit sürümü geometri ana dosyası olarak saklayın.
## Dönüş çevresinde basamaklı bir sıra oluşturun
Aşağıdakini `bands.svg` olarak kaydedin. Üst düz bölümü iki parçaya, yarım çemberi dört yaya ve geri dönen düz bölümü iki parçaya böler. Renkler, üst başlangıçtaki turuncudan alt uçtaki mora doğru rota sırasıyla atanır.
```svg
```
Bunlar, parça uzunlukları eşit olmayan, elle seçilmiş sekiz banttır. Yol uzunluğu birimi başına tekdüze renk artışı hesabı değildir ve sürekli gölgeleme oluşturmaz. Yuvarlanmış ondalık yay uç noktaları özgün rotaya yaklaşır; örnek piksel piksel özdeş dış hat iddiasında bulunmaz.
[`path` başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path), öğeyi ve yol verilerini belgeler. Her bölüm, dış hatları çizilmiş kapalı dolgu yerine konturlu merkez çizgisi olarak kalır. Hedef kapalı şekiller gerektiriyorsa bu kontur parçalarını kesim dış hatları saymak yerine geometriyi ayrı hazırlayıp inceleyin.
Bitişik parçaların uç noktalarını aşmaması için [`stroke-linecap="butt"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) kullanıyoruz. Her iç bölümde yuvarlak uç kullanmak komşu renkleri örterdi. Düzden yaya geçişler de eşleşen yönler gerektirir; [pürüzsüz birleşim kılavuzumuz](https://perfectvector.com/tr/blog/svg-bezier-smooth-joins) geometrik süreklilik konusunu ayrı ele alır.
## İki boyutu ve iki konumu karşılaştırın
İki özgün dosyayı Chrome'da `200×160` ve `400×320` CSS pikselinde işledik. Tarayıcı her SVG'yi çözüp arka tampon boyutları test boyutlarıyla eşleşen tuvale boyadı. Tarayıcının cihaz piksel oranı 2 idi; kayıtlı örnekler ekran görüntüsü cihaz piksellerini saymaktan değil, tuval tamponundan gelir.
Kaynak koordinatları `(60,30)` ve `(60,130)` konumlarında noktalar rotanın farklı düz bölümlerindedir. Aynı yatay koordinatı paylaştıkları için yatay gradyan ikisine aynı örneklenmiş rengi verir.
| Dosya | x=60 üst örnek | x=60 alt örnek | Yollar | Gömülü görseller |
| ------------------------ | -------------- | -------------- | ------ | ---------------- |
| Koordinat gradyanı | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 |
| Oluşturulmuş bantlar | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 |
| Düz geometri ana dosyası | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 |
Örnek çiftleri iki test boyutunda aynıydı; boyalı iç kısımlarda alfa 255'ti. Kaynak `(100,80)` konumundaki açık alan altı durumda da sıfır alfaya sahipti. Bu, bu özgün dosyaları bu tarayıcıda kontrol eder; her işleyiciyi veya tüm sınır piksellerini onaylamaz.
Bantlı işleme iki boyutta da kesikli renk değişimlerini görünür biçimde korur. Birleşimleri teslim boyutunda, özellikle dışa aktarma veya gömme sonrasında inceleyin. Ayrı parçalar kenar yumuşatma, yuvarlama veya sonraki düzenlemeler nedeniyle dikişleri ortaya çıkarabilir. Bölüm sayısını artırmak her renk adımını küçültebilir, ancak korunacak daha fazla yol ve sınır da oluşturur.
## Çizimi genişletmeden önce efekti seçin
| Tasarım ihtiyacı | Yararlı başlangıç | İnceleme maliyeti |
| --------------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------- |
| Renk sayfa yönünü izler | Tek koordinat gradyanı | Uç nokta konumları ve kaynak sınırları |
| Bu rota çevresinde sabit ilerleme | Bilinçli renkli bölümler | Bölüm renkleri, teğet birleşimler ve dikişler |
| Rastgele eğri boyunca pürüzsüz ilerleme | Ayrı tasarlanmış yaklaşım veya başka teslim yöntemi | Örnekleme, kesişimler, düzenlenebilir geometri ve hedefte işleme |
Doğrusal gradyanı döndürmek yönünü değiştirir. Tekrarlamak renklerinin nasıl uzandığını değiştirir. İki işlem de onu bu geri dönen merkez çizgisiyle sürekli döndürmez. Radyal gradyan dairesel kompozisyona uyabilir, ancak genel rota mesafesi çözümü yerine kendi boyama geometrisidir.
Eğriyi daha sonra ayarlarsanız bölümleri birlikte güncelleyin. Amaçlanan rotayı karşılaştırmak için düz ana dosyayı saklayın ve renk efekti kopyasını ayrı koruyun. [Göreli yol kılavuzumuz](https://perfectvector.com/tr/blog/svg-relative-path-commands), alttaki yol komutlarını okurken veya taşırken yardımcı olabilir.
Başlangıç çiziminiz PNG veya JPG ise ve düzenlenebilir konturlar gerekiyorsa [kaynağı PerfectVector ile dönüştürün](https://perfectvector.com/tr/image-to-vector), geri kazanılan şekli ve açık alanları inceleyin, temiz SVG ana dosyası koruyun. Geometriyi kontrol ettikten sonra renk efektini seçin veya yeniden oluşturun. Vektörleştirme, sürekli gölgelemeyi tam geri kazanmayı garanti etmez veya yerleşik yol boyunca gradyan özelliği icat etmez. Mevcut temiz SVG doğrudan boyama ve geometri düzenlemesi gerektirir; [görüntü vektörleştirme kılavuzu](https://perfectvector.com/tr/blog/what-is-image-vectorization), raster dönüşümünün ne zaman yardımcı olduğunu açıklar.
## Sık sorulan sorular
**linearGradient'ın her kıvrımlı konturu izlemesini sağlayabilir miyim?**
Normal linearGradient tanımı yol mesafesi ayarı sağlamaz. Boyamayı koordinat vektörü yönetir. Basamaklı örnek ayrı rota bölümlerine ayrı renkler atar.
**Daha çok gradyan durağı geri dönen renkleri düzeltir mi?**
Daha çok durak, gradyan vektörü boyunca renk geçişlerini iyileştirebilir. Bu vektör üzerinde aynı konumdaki noktalar hâlâ aynı koordinat tabanlı boyamayı paylaşır.
**Bantlı dosya raster görsel içeriyor mu?**
Hayır. Özgün örneğimiz sekiz path öğesi içerir ve image öğesi içermez. Sürekli yol mesafesi gradyanı yerine görünür renk adımları da içerir.
**Her gradyanı ayrı yollarla değiştirmeli miyim?**
Tasarıma uyuyorsa daha basit koordinat gradyanını kullanın. Ayrı bölümler, ilerleme biçimi ve düzenleme maliyetleri kabul edilebilirse yararlıdır; teslimden önce dikişleri ve hedefte işlemeyi inceleyin.
## Kaynaklar
1. [W3C — SVG2 boyama sunucuları](https://www.w3.org/TR/SVG2/pservers.html) — Gradyan vektörleri, duraklar ve koordinat tabanlı boyama.
2. [MDN — SVG'de gradyanlar](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) — Doğrusal ve radyal gradyan oluşturma.
3. [MDN — gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Kullanıcı uzayı ve sınırlama kutusu koordinat sistemleri.
4. [MDN — path](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) — İncelenebilir yol öğeleri ve yol verileri.
5. [MDN — stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) — Düz ve yuvarlak uç davranışı.
## Explore
- [Read the HTML article](https://perfectvector.com/tr/blog/svg-gradient-curved-stroke)
- [Dolgulu Şekli Değiştirerek SVG Yol Köşelerini Yuvarlayın](https://perfectvector.com/tr/blog/round-svg-path-corners.md)
- [SVG Metin Kaydırma: tspan ile Ölçülmüş Satırlar Oluşturun](https://perfectvector.com/tr/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)