Yol Boyunca SVG Gradyanı: Dönüşteki Rengi Kontrol Edin

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, 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, 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

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 xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</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 ve gradyan koordinatı kılavuzumuza 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 xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
  <path d="M30 30 H75" stroke="#e36b2c"/>
  <path d="M75 30 H120" stroke="#d38d31"/>
  <path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
  <path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
  <path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
  <path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
  <path d="M120 130 H75" stroke="#5265b2"/>
  <path d="M75 130 H30" stroke="#704baa"/>
</g>
</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, öğ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" 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 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.

Ö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

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, 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, 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, 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ı — Gradyan vektörleri, duraklar ve koordinat tabanlı boyama.
2. MDN — SVG'de gradyanlar — Doğrusal ve radyal gradyan oluşturma.
3. MDN — gradientUnits — Kullanıcı uzayı ve sınırlama kutusu koordinat sistemleri.
4. MDN — path — İncelenebilir yol öğeleri ve yol verileri.
5. MDN — stroke-linecap — Düz ve yuvarlak uç davranışı.