SVG Radyal Gradyanları: fx ve fy ile Parlaklığı Taşıyın

Çizimi taşımadan SVG radyal gradyan parlaklığını taşımak için <radialGradient> üzerinde fx ve fy ayarlayın. cx, cy, r ve yolu değiştirmeyin. fr="0" ile odak noktası renk geçişini başlatır; bitiş çemberi dış kapsamını yönetmeye devam eder. Parlaklık gerilmiş görünüyorsa konturu düzenlemeden önce gradientUnits ve şeklin sınırlama kutusunu kontrol edin.

Bu anlatım, açıklığı olan özgün geniş altıgen amblem kullanır. Merkezde ve kaydırılmış parlaklıkları, ardından seçilen iki boyama tanımını karşılaştırıyoruz: nesneye göreli elips ve kullanıcı uzayında daire. SVG doğrudan kod olarak oluşturulmuştur. Örneği bir izleme hizmeti veya düzenleyici üretmedi.

Odağı bitiş çemberinden ayırın

Radyal gradyanın başlangıç ve bitiş çemberleri vardır. Bu başlangıçta fr="0", başlangıç çemberini noktaya indirger. fx ve fy bu noktayı konumlandırır; cx, cy ve r bitiş çemberini tanımlar. Odak koordinatları ayarlanmazsa varsayılan olarak karşılık gelen merkez koordinatlarını alır. MDN radialGradient başvurusu bu öznitelikleri ve varsayılanları belgeler.

İki düzenlemeyi farklı işler olarak düşünün:

Yatay odak koordinatı fx, dikey olan fy değeridir. İkisini değiştirmek başlangıç noktasını çapraz taşır. Yolun noktalarını değiştirmez veya açıklığını taşımaz.

Kaydırılmış parlaklık içeren eksiksiz SVG'yi kopyalayın

Bunu emblem.svg olarak kaydedip tarayıcıda açın. Harici görsel veya stil sayfası bağımlılığı yoktur.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="-20 0 200 120">
  <defs>
    <radialGradient id="highlight" gradientUnits="objectBoundingBox"
                    cx=".5" cy=".5" r=".6" fx=".22" fy=".18" fr="0" spreadMethod="pad">
      <stop offset="0" stop-color="#fff1d8"/>
      <stop offset=".45" stop-color="#ed805f"/>
      <stop offset="1" stop-color="#6f284c"/>
    </radialGradient>
  </defs>
  <path d="M20 20 H140 L160 60 L140 100 H20 L0 60 Z M50 38 H110 L130 60 L110 82 H50 L30 60 Z" fill="url(#highlight)" fill-rule="evenodd"/>
</svg>

Merkezli kontrolü oluşturmak için yalnızca fx=".22" fy=".18" değerlerini fx=".5" fy=".5" yapın. Diğer öznitelikleri ve d içindeki iki konturu değiştirmeyin.

Dış kontur x=0 ile 160, y=20 ile 100 arasında uzanır. İkinci kontur açıklığı tanımlar. fill-rule="evenodd" bu açıklığı boyanmamış tutar; gradyanı taşımak açıklığı doldurmaz. MDN fill-rule başvurusu, bu bileşik yolun kullandığı kesişim kuralını açıklar.

Merkezli odak açıklıkta bulunduğundan en parlak noktanın kendisi görünmez. Halkada çevresindeki renk geçişini görmeye devam edersiniz. Kaydırılmış odak sol üstteki dolu banda gelir ve en açık durak görünür olur. Koordinat düzenlemesi pek etkili görünmüyorsa bu ayrım yardımcı olur: odak, işaretin saydam kısmının arkasında olabilir.

Geniş amblem neden eliptik geçiş alır?

gradientUnits="objectBoundingBox" ile koordinatlar boyanan nesnenin sınırlarını tanımlar. SVG tuvali 200 × 120 olsa da amblemimizin sınırları 160 × 80'dir. Normalleştirilmiş çember bu kare olmayan kutudan geçerek elipse eşlenir. MDN gradientUnits başvurusu bu eşlemeyi açıklar.

Burada cx=".5" cy=".5", (80, 60) noktasına eşlenir. .6 yarıçapı yatay ve dikeyde 96 ve 48 yarıçaplarına eşlenir. Kaydırılmış odak şöyle eşlenir:

x = 0 + .22 × 160 = 35.2
y = 20 + .18 × 80 = 34.4

Bu dönüştürülmemiş SVG'de dairesel bitiş bölgesi için gradyanın koordinat özniteliklerini şunlarla değiştirin:

gradientUnits="userSpaceOnUse"
cx="80" cy="60" r="64"
fx="35.2" fy="34.4" fr="0" spreadMethod="pad"

Merkezli kontrolü fx="80" fy="60" kullanır. Yarıçap artık iki yönde de 64 kullanıcı birimidir. Bu, 96 × 48 elipsinden farklı seçilmiş bir bitiş bölgesidir. Koordinat tanımını ve fiziksel yarıçapı değiştirdik; bu karşılaştırma yalnızca birim seçeneğini yalıtmaz. Her merkezli/kaydırılmış çift içinde yalnızca odak koordinatları değişir.

Geçiş her şeklin oranlarını izleyecekse nesneye göreli boyama kullanın. Konumu ve dairesel kapsamı çizimin koordinatlarına aitse açık kullanıcı uzayı sayıları kullanın. Ayrı logo yollarına ortak geçiş için SVG gradyan birimlerine bakın.

Özgün tarayıcı karşılaştırması ne gösterdi?

Dört özgün SVG'nin tamamını Chrome'da açıp her birini 100 × 60 ve 300 × 180 CSS pikselinde gösterdik. Büyük sürüm sol üst parlaklığı incelemeyi kolaylaştırdı. Aynı kayma küçük boyutta da görünür kaldı ve açıklık her örnekte saydamdı.

Tarayıcının kaynak raporu, dört dosyanın tamamında bir yol, sıfır image öğesi, özdeş d değerleri ve aynı 160 × 80 yol sınırları buldu. Kaynak tuvali boyutunda ayrı piksel geri okumaları değişen boyamayı doğruladı:

Sol üst örnek çizim koordinatı (35, 30), açıklık örneği ise (80, 60) konumundadır. Bu gözlemler bu kaynağı ve tarayıcı oturumunu tanımlar. Başka işleyicinin çıktısını veya düzenleyicinin içe aktarma davranışını kanıtlamaz.

Odak ve boyama sınırları

İşareti ayarlarken odağı içeride tutun

İç odak ve fr="0" ile başlayın. Normalleştirilmiş koordinatlarda kaydırılmış odağın merkeze uzaklığı yaklaşık .425 olup .6 yarıçapımızın altındadır. Kullanıcı uzayı sürümünde uzaklık yaklaşık 51.6 olup 64'ün altındadır. İki seçim de başlangıç noktasını, çemberin tanımlandığı koordinat sisteminde bitiş çemberinin içinde tutar.

Eski açıklamalar dış odağın her zaman bitiş çemberine sıkıştırıldığını söyleyebilir. SVG 2, başlangıç çemberinin dışarıda olmasına izin verir ve gradyan konisinin dışında boyanmamış bölgeler dâhil farklı davranış tanımlar. SVG 2 radyal gradyan belirtimi bu değişikliği açıklar. Bu başlangıç iç noktalar kullanır; dış odak işlemesini tarayıcılar arasında sınamadık.

Konumu kontrol ederken spreadMethod="pad" ayarını koruyun. Gradyanın kapsamı dışında pad son durağın rengini kullanır; repeat ve reflect, odak karşılaştırmasını belirsizleştirebilecek yinelemeli davranış ekler. MDN spreadMethod başvurusu bu seçenekleri tanımlar.

Teslimden önce SVG'yi gösterecek ortamda üç şeyi kontrol edin:

1. Parlaklık, gerçek görüntüleme boyutunda amaçlanan dolu bantta duruyor.
2. Açıklık saydam kalıyor ve yol verileri ana dosyayla hâlâ eşleşiyor.
3. Seçilen çember veya elips işaretin oranlarına uyuyor.

Dışa aktardıktan sonra renkler kayıyorsa SVG renkleri dışa aktarma sonrası neden değişir yazısıyla boyamayı ve teslim bağlamını inceleyin. Odak noktasını taşımak konum düzenlemesidir; aynı anda durak renklerini değiştirmek karşılaştırmayı okumayı zorlaştırır.

Geometri geri kazanımını boyama tasarımından ayrı tutun

Aynı yolu düz dolguyla kullanıp açıklığını koruyarak bu amblemin düz ana dosyasını saklayın. Gradyan sürümünü, ona ihtiyaç duyan web çizimi için ayrı kaydedin. Gradyan kontura atanmış boyamadır; bu odak koordinatları ek kesim yolları tanımlamaz.

Başlangıç logonuz yalnızca PNG veya JPG olarak mevcutsa PerfectVector logo vektörleştiricisi, bu boyamayı yeniden oluşturmadan önce incelemek üzere vektör geometrisini geri kazanabilir. Dış konturu ve açıklığı kontrol edin, ardından SVG iş akışınızda gradyan koordinatlarını ayarlayın. Raster parlaklık, özgün fx, fy veya yarıçapını geri kazanılabilir tasarım parametreleri olarak korumaz. Temiz vektör konturlarınız zaten varsa gradyanlarını doğrudan düzenleyin. Gradyan vektörleştirme kılavuzu rasterden vektöre geçiş kararını ele alır.

Sık sorulan sorular

SVG radyal gradyan parlaklığını nasıl taşırım? radialGradient üzerinde açık fx ve fy koordinatları ayarlayın. Değişikliği karşılaştırırken cx, cy, r, duraklar ve yolu sabit tutun. fr sıfırken bu odak koordinatları renk geçişinin başlangıç noktasını konumlandırır.

SVG'mde radyal gradyan neden eliptik görünüyor? objectBoundingBox birimleriyle normalleştirilmiş çember, boyanan nesnenin sınırlarına eşlenir. Kare olmayan sınırlar elips üretir. Dönüştürülmemiş SVG'de açık userSpaceOnUse koordinatları çizim birimlerinde dairesel bölge tanımlayabilir.

Odak noktasını taşımak logonun açıklığını doldurur mu? Hayır. Açıklığı bileşik yol ve dolgu kuralı belirler. Bu örnek evenodd kullanır ve her örnekte aynı yolu korur; odak taşındığında açıklığı saydam kalır.

Vektörleştirme özgün gradyanın odak koordinatlarını geri kazanabilir mi? Raster görüntü özgün SVG gradyan parametrelerini korumaz. Gerekirse konturları geri kazanıp inceleyin, ardından boyamayı yeniden kurun ve parlaklığı hedef görüntüleme ortamında kontrol edin.

Kaynaklar

1. MDN radialGradient — Başlangıç/bitiş çemberi öznitelikleri ve varsayılanları.
2. MDN fx — Yatay odak koordinatının anlamı.
3. MDN fy — Dikey odak koordinatının anlamı.
4. MDN fill-rule — Açıklık için çift-tek dolgu davranışı.
5. MDN gradientUnits — Nesne sınırları, kullanıcı uzayı ve eliptik eşleme.
6. SVG 2 radyal gradyanları — Başlangıç çemberi geometrisi ve dış odak belirtim değişikliği.
7. MDN spreadMethod — Pad, repeat ve reflect davranışı.