> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG Radyal Gradyanları: fx ve fy ile Parlaklığı Taşıyın > SVG radyal gradyan parlaklığını fx ve fy ile taşıyın, dairesel ve eliptik boyamayı karşılaştırın, amblemin dış hattını ve saydam açıklığını değiştirmeden koruyun. Source: https://perfectvector.com/tr/blog/svg-radial-gradient-focus Language: tr Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 Çizimi taşımadan SVG radyal gradyan parlaklığını taşımak için `` ü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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) bu öznitelikleri ve varsayılanları belgeler. İki düzenlemeyi farklı işler olarak düşünün: | İstenen değişiklik | Düzenlenecek öğe | Karşılaştırmada sabit tutulacaklar | | ----------------------------------------------- | -------------------------------------------------- | ----------------------------------------------- | | En açık alanı sol üste taşımak | `fx` ve `fy` | Bitiş çemberi koordinatları, duraklar ve yol | | Boyama bölgesinin tamamını taşımak | Açık odak koordinatlarını inceleyerek `cx` ve `cy` | Yol | | Boyamanın erişimini değiştirmek | `r` | Merkez, odak ve yol | | Geniş şekilde dairesel boyama bölgesini korumak | Kullanıcı uzayı koordinatlarını seçmek | Tüm koordinat değerlerini ve yarıçapı incelemek | Yatay odak koordinatı [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx), dikey olan [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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 ``` 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule), 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) 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: ```text 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: ```svg 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](https://perfectvector.com/tr/blog/svg-gradient-units) 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ı: | Boyama tanımı | Odak | Sol üst RGBA örneği | Açıklık alfası | | ----------------------------- | ----------- | -------------------- | -------------- | | Nesne sınırları, yarıçap `.6` | Merkezli | `164, 77, 84, 255` | `0` | | Nesne sınırları, yarıçap `.6` | Kaydırılmış | `246, 184, 155, 255` | `0` | | Kullanıcı uzayı, yarıçap `64` | Merkezli | `149, 67, 82, 255` | `0` | | Kullanıcı uzayı, yarıçap `64` | Kaydırılmış | `248, 196, 168, 255` | `0` | 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ı** ![Amblemlerdeki parlaklık konumlarını karşılaştıran ve boyama sınırı kılavuzlarını gösteren kavramsal illüstrasyon.](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp) *İllüstrasyon: parlaklık, değişmeyen kontur içinde hareket edebilir. Kılavuzlar boyama geometrisini açıklar; bu tarayıcı örneği veya izleme sonucu değildir.* ## İş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](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) 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](https://perfectvector.com/tr/blog/why-svg-colors-change-after-export) 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](https://perfectvector.com/tr/vectorize-logo), 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](https://perfectvector.com/tr/blog/vectorize-gradients) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) — Başlangıç/bitiş çemberi öznitelikleri ve varsayılanları. 2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) — Yatay odak koordinatının anlamı. 3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) — Dikey odak koordinatının anlamı. 4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Açıklık için çift-tek dolgu davranışı. 5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Nesne sınırları, kullanıcı uzayı ve eliptik eşleme. 6. [SVG 2 radyal gradyanları](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) — Başlangıç çemberi geometrisi ve dış odak belirtim değişikliği. 7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) — Pad, repeat ve reflect davranışı. ## Explore - [Read the HTML article](https://perfectvector.com/tr/blog/svg-radial-gradient-focus) - [Yol Boyunca SVG Gradyanı: Dönüşteki Rengi Kontrol Edin](https://perfectvector.com/tr/blog/svg-gradient-curved-stroke.md) - [SVG feColorMatrix: Dolguları değiştirmeden renklendirin](https://perfectvector.com/tr/blog/svg-fecolormatrix.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)