SVG gölgesi kesiliyor mu? Filtre ve görüntüleme alanı

Kesilen bir SVG gölgesi iki farklı sınıra takılabilir. Filtre bölgesi, efektin hesaplandığı alanı sınırlar; SVG görüntüleme alanı veya bir üst kapsayıcı da ardından çizilmiş sonucu kırpabilir. Önce filtrenin bölgesini genişletin. Gölge hâlâ görselin kenarında bitiyorsa görüntüleme alanını ve kırpma kurallarını inceleyin.

Yolları zaten sağlam olan bir SVG'yi yeniden vektörleştirmeniz gerekmez. Bu rehber, özgün silüeti koruyarak efektin çalışma alanını ve görünür tuvali değiştirir.

İki sınır, değişmeyen tek yol

Elle küçük bir silüet çizdik ve üç sürümünü bir tarayıcıda açtık. Her biri aynı yolu ve feDropShadow ayarlarını kullanıyor: dx="22", dy="18" ve stdDeviation="12". Aşağıdaki ekran görüntüsü, PerfectVector dönüşümünü değil, tarayıcıdaki gerçek çizim sonucunu gösteriyor.

İlk sürümde filtre bölgesi (50, 50) ile (210, 180) arasında uzanıyor. Bu, gölgenin sağ ve alt kenarlarında keskin bir kesilme bırakıyor. İkincisinde bölge, (-20, -20) ile (300, 280) arasını kapsayacak şekilde büyüyor; ancak SVG hâlâ yalnızca 0 0 240 220 alanını gösteriyor. Gölgenin sağ kenarı artık görüntüleme alanının çerçevesine ulaşıyor ve orada kırpılıyor.

Üçüncü sürüm, daha büyük filtre bölgesini koruyor ve viewBox değerini -20 -20 320 300 olarak değiştiriyor. width ve height değerleri de 320 ve 300 oluyor; böylece üç gösterimde de bir SVG birimi bir CSS pikseline karşılık gelmeye devam ediyor. Eklenen alan, yolun boyutunu değiştirmeden görünür gölgeyi içine alıyor.

Filtre bölgesini doğru koordinat sisteminde genişletin

<filter> öğesinin x, y, width ve height öznitelikleri filtre bölgesini tanımlar. Varsayılan değerleri -10%, -10%, 120% ve 120% şeklindedir: zaten bir miktar kenar boşluğu vardır, ancak belirli bir kaydırma ve bulanıklık için yetersiz kalabilir. MDN bu varsayılan değerleri belgeliyor.

Sayıları değiştirmeden önce filterUnits değerini kontrol edin:

• Varsayılan değer olan objectBoundingBox, bölgeyi filtre uygulanan öğenin sınırlayıcı kutusuna göre yorumlar. Yüzde cinsinden bir kenar boşluğu, şeklin boyutlarına bağlıdır.
• userSpaceOnUse, bölgeyi filtreye başvuran öğenin geçerli kullanıcı koordinat sisteminde tanımlamanızı sağlar. Çizimin koordinatlarını bildiğinizde kullanışlıdır.

filterUnits başvurusunda açıklandığı gibi, bu kurallar bölge için geçerlidir. Gölgenin kaydırma veya bulanıklık birimlerini kendiliğinden değiştirmezler.

primitiveUnits, filtre temel işlemlerinin içindeki uzunluk değerlerini kontrol eder. Varsayılanı userSpaceOnUse değeridir; örnekte 22, 18 ve 12 değerlerinin bu anlamı koruması için bunu açıkça belirtiyoruz. objectBoundingBox olarak değiştirmek, bu değerlerin yorumlanma biçimini değiştirir. MDN, temel işlem birimlerini filtre bölgesi birimlerinden ayırıyor.

Kendi dosyanızda, filtre uygulanan nesnenin veya grubun sınırlarını inceleyin; ardından gölgenin uzandığı yönlerde yeterince alan ekleyin. Aşağıdaki sayılar bu gösterime uygundur. Her gölge için geçerli bir kenar boşluğu değildir. Bulanıklığı artırırsanız, gölgeyi taşırsanız veya filtre uygulanan gruba bir dönüşüm uygularsanız sonucu yeniden kontrol edin.

SVG görüntüleme alanına da yer açın

Bu eksiksiz örneği shadow.svg olarak kaydedin ve bir tarayıcıda açın. Üçüncü durum için kullanılan SVG tam olarak budur; bağımsız bir dosya olarak da kontrol edilmiştir:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

viewBox dört değerden oluşur: en küçük x, en küçük y, genişlik ve yükseklik. Kullanıcı koordinatlarındaki bu dikdörtgeni SVG görüntüleme alanına eşler. Görüntülenen genişlik ve yükseklik aynı kalırken onun boyutlarını artırmak, çizimin daha küçük görünmesine neden olur; öğenin dışında ek yerleşim alanı oluşturmaz. MDN, viewBox eşlemesini açıklıyor.

İki hatayı yeniden oluşturmak için örneğin bir kopyasında yalnızca şu değerleri değiştirin:

1. Ortadaki durum için filtreyi değiştirmeyin; ancak kök öğeyi width="240", height="220" ve viewBox="0 0 240 220" olarak ayarlayın.
2. İlk durum için bu daha küçük görüntüleme alanını koruyun ve filtreyi de x="50", y="50", width="160" ve height="130" olarak ayarlayın.
3. Tam örneğe geri dönün ve sağ ve alt kenarları karşılaştırın. Yol verileri hiç değişmez.

Çizimin tamamı tuvalin dışındaysa daha kapsamlı boş SVG kontrollerini izleyin. Çizim görünüyorsa ancak içe aktarılırken boyutları değişiyorsa geometriyi ayarlamadan önce SVG birimleri ile boyut arasındaki ilişkiyi inceleyin.

overflow neden satır içi SVG'de işe yarayıp dosyayı düzeltmeyebilir?

Örnek, görüntüleme alanının sınırını yeniden üretilebilir kılmak için açıkça overflow="hidden" ayarını kullanır. Satır içi bir SVG'de overflow="visible", görüntüleme alanındaki bu kırpmayı kaldırabilir. Filtre bölgesinde zaten atılmış pikselleri geri getiremez; ayrıca kendi kırpma kuralına sahip bir üst öğe sonucu yine gizleyebilir. CSS de SVG sunum özniteliğini geçersiz kılabilir. SVG overflow başvurusu bu kırpma kurallarını açıklıyor.

Gerçek gömme biçimini inceleyin. Geniş bir sayfadaki satır içi SVG, bağımsız bir SVG ve HTML görsel öğesi üzerinden yüklenen bir SVG aynı çevresel yerleşim alanını sunmaz. Üç durumlu ekran görüntümüz görsel öğelerini kullanır ve düzeltilmiş dosyaya yeterli iç tuval alanı verir. SVG'nin bağımsız bir görsel olarak taşınması gerektiğinde bu yaklaşımı kullanın: efekti amaçlanan sınırların içine alın, ardından aynı dosyayı hedef ortamında yeniden açın.

Tek başına doğru görünmesine rağmen bir kartın içinde kesiliyorsa kartın overflow, kırpma ve maskeleme ayarlarını kontrol edin. Yalnızca belirli bir düzenleyicide veya dışa aktarıcıda hata veriyorsa sadeleştirilmiş bir kopyayı karşılaştırın ve o uygulamanın filtre desteğini inceleyin. SVG görünüm değişikliği rehberi, içe aktarıcıdan kaynaklanan bu ayrı sorunu ele alır.

Geometriyi koruyun ve efekti ayrı olarak yeniden oluşturun

Çizilen bir gölge, yola bir görünüm ekler; bulanıklığı başka bir düzenlenebilir kontura dönüştürmez. Özgün geometriyi içeren bir ana SVG dosyası saklayın. Kesim iş akışında yol ana hatlarını ayrı olarak inceleyin: görünür gölge ek bir kesim çizgisi değildir.

Kaynağınız yalnızca PNG veya JPG olarak mevcutsa PerfectVector, efekti eklemeden önce SVG geometrisini yeniden elde etmenize yardımcı olabilir. Gölgesiz çizimi vektöre dönüştürün, ardından bir düzenleyicide ana hattı, boşlukları ve istenmeyen arka plan şekillerini inceleyin. Gölgeyi orada ekleyin ve yukarıdaki kontrollerle sınırlarını test edin.

Varsa, bulanıklığın görüntüye kalıcı olarak işlenmediği bir kaynak kullanın. Düzleştirilmiş bir görüntüyü vektörleştirmek, özgün filtre ayarlarını geri getiremez veya tasarımcının temiz silüetin nerede bitmesini amaçladığını kanıtlayamaz. Temiz kaynağı olmayan basit bir işarette elle yeniden çizim daha kontrollü bir seçenek olabilir. Görüntü vektörleştirmeye genel bakış, vektörleştirmenin neleri yeniden oluşturduğunu açıklar.

Teslim edilen dosyayı kontrol edin

Yalnızca düzenleyici tuvalini değil, dışa aktarılan SVG dosyasının kendisini açın. Amaçlanan gölgenin son görüntüleme boyutunda alana sığdığını ve çıktının ihtiyaç duyduğunuz yolları hâlâ içerdiğini doğrulayın. Çevredeki bir kırpma kuralı veya desteklenmeyen filtre aynı belirtiyi yeniden ortaya çıkarabileceği için gerçek web sayfasını veya hedef uygulamayı da kontrol edin.

Varsayılan düzeltme olarak devasa bir filtre bölgesi bırakmaktan kaçının. Efektin ihtiyacının çok ötesine uzanan bir bölge, dosyayı anlamayı zorlaştırır; ayrıca dıştaki bir kırpma sınırını düzeltemez. Bilinçli bir kenar boşluğu kullanın, filtresiz kaynağı saklayın ve bulanıklığı ya da kaydırmayı değiştirdikten sonra yeniden kontrol edin.

Sık sorulan sorular

Filtre genişliğini artırdıktan sonra gölge neden hâlâ kesiliyor? SVG görüntüleme alanı, bir üst kapsayıcı, kırpma yolu veya maske başka bir sınır getirebilir. Filtrenin genişlik ve yüksekliğinin yanı sıra x ve y değerlerini de kontrol edin; ardından kalan kesilmenin hangi sınırla hizalandığını inceleyin.

filterUnits bulanıklık yarıçapını değiştirir mi? filterUnits, filtre bölgesinin koordinat sistemini kontrol eder. primitiveUnits ise gölgenin kaydırma ve bulanıklık ayarları dâhil, filtre temel işlemlerinin içindeki uzunluk değerlerini kontrol eder. Dosyanın sorununu araştırırken bunları ayrı tutun.

SVG'yi yeniden vektörleştirerek kesilmeyi düzeltebilir miyim? SVG zaten kullanılabilir yollar içeriyorsa bunun yerine filtre bölgesini veya görüntüleme alanını düzeltin. Vektörleştirme, kaynak bir raster görüntü olduğunda sürecin önceki aşamasına aittir; özgün gölge parametrelerini geri getirmez.

Kaynaklar

1. MDN: filter element — Filtre öğesini ve bölgesinin varsayılan kenar boşluğunu tanımlar.
2. MDN: filterUnits — Filtre bölgesi için sınırlayıcı kutu ve kullanıcı uzayı koordinatlarını açıklar.
3. MDN: primitiveUnits — Temel işlem uzunluklarını dış filtre bölgesinden ayırır.
4. MDN: viewBox — Kullanıcı koordinatlarının görünür SVG görüntüleme alanına nasıl eşlendiğini açıklar.
5. MDN: overflow — Görüntüleme alanında kırpmayı, satır içi SVG varsayılanlarını ve CSS önceliğini belgeler.

Silüetiniz yalnızca bir raster görüntü olarak mı mevcut? PerfectVector ile SVG yollarını hazırlayın, önce yeniden elde edilen ana hattı inceleyin, ardından gölgenizi ekleyin ve iki sınırı da kontrol etmek için son SVG'yi yeniden açın.