SVG z-index çalışmıyor mu? Yol sırasını düzeltin

CSS z-index değerini yükseltmenize rağmen bir SVG yolu başka bir şeklin arkasında kalıyorsa SVG'deki öğelerin sırasını inceleyin. SVG’de olağan çizim sırasına göre önce gelen şekil ilk olarak boyanır ve sonraki şekiller onu örter. Bir yolu öne getirmek için örtmesi gereken şekillerden sonra yerleştirin. SVG görüntüleme modeli bu sırayı tanımlar.

Önce örtüşmenin nerede gerçekleştiğini belirleyin. SVG'nin tamamının sayfa başlığının arkasında kalması bir HTML yerleşim sorunudur; aynı SVG içindeki iki şeklin örtüşmesi ise çizimin sıralama sorunudur. Aşağıdaki çözüm ikinci durumu ele alır.

Farkı tek bir amblem üzerinde görün

Üç parçalı özgün bir amblem çizdik: turuncu bir yıldız, mavi bir disk ve yeşil bir şerit. Soldaki panelde yıldız SVG'de ilk sıradadır ve CSS position: relative ile z-index: 999 değerlerine sahiptir. Tarayıcı bu z-index değerini hesaplar, ancak daha sonra gelen disk ve şerit yıldızı yine de örter. Sağdaki panelde yalnızca öğe sırası değişir: aynı yıldız son sıradadır ve önde görünür.

Testte HeadlessChrome 141 kullanıldı ve 1200 × 680 boyutunda bir ekran görüntüsü alındı. Bildirilen alt öğe sırası solda yıldız, disk, şerit; sağda ise disk, şerit, yıldız şeklindeydi. Bu, sıradan örtüşen SVG alt öğelerine yönelik sınırlı bir testtir; her görüntüleyici, iç içe grup veya efekt için bir garanti değildir.

SVG dosyasındaki sırayı düzeltin

SVG kaynağını bir metin düzenleyicide açın veya nesnelerini bir vektör düzenleyicide inceleyin. Örtüşen şekilleri bulun ve dosyada yukarıdan aşağıya doğru okuyun. Önce gelen kardeş öğeler ilk olarak boyanır. Önde görünmesi gereken nesneyi dosya sırasında örtmesi gereken nesnelerden sonra gelecek şekilde taşıyın ve ardından bir kopya kaydedin.

Örneğin bu sadeleştirilmiş çizim yıldızı son sıraya koyar:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <circle cx="120" cy="80" r="55" fill="#4f86df"/>
  <path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
        fill="#22a79a"/>
  <path id="star" d="M120 20 L135 60 175 62 145 88 155 130
           120 108 85 130 95 88 65 62 105 60Z"
        fill="#ff8c64"/>
</svg>

Bu düzeltme için yol verilerinin ve dolgu renklerinin değişmesi gerekmez. Tasarım uygulamasında Bring to Front komutu varsa onu kullandıktan sonra SVG'yi dışa aktarın ve kaydedilen işaretlemeyi inceleyin veya dosyayı yeniden açın. Düzenleyicinin görünür katman paneli yararlıdır, ancak sonraki görüntüleyicinin okuduğu şey teslim edilen dosyadır.

Etkileşimli bir SVG'de JavaScript, mevcut bir alt öğeyi bulunduğu üst öğenin sonuna taşıyabilir:

const star = document.querySelector("#star");
star.parentNode.appendChild(star);

MDN'nin appendChild referansı, mevcut bir düğümü sona eklemenin ikinci bir kopya oluşturmak yerine onu taşıdığını doğrular. Bunu yalnızca DOM'u değiştirmek uygulamanın bir parçası olduğunda kullanın. Statik bir logo dosyasında amaçlanan sırayı doğrudan SVG'ye yazmak genellikle daha anlaşılırdır.

Grupları, delikleri ve diğer sıra türlerini kontrol edin

Yıldız bir gruba aitse onu o grubun içinde sona taşımak, grubun tamamını daha sonra gelen kardeş grubun arkasında bırakabilir. Üst öğe yapısını inceleyin. Gruplanmış çizimin tamamı öne gelmeliyse ilgili grubu taşıyın; yalnızca grup içindeki parçalar örtüşüyorsa alt öğeleri yeniden sıralayın. Bir alt öğeyi grubundan çıkarırken dikkatli olun: grup dönüşümler, kırpma, opaklık veya maske taşıyabilir. SVG görüntüleme modelinin gruplar bölümü, gruplanmış içeriğin neden birlikte görüntülendiğini açıklar.

Nesne sırasını düzeltmek, yol geometrisindeki gerçek bir deliği veya boşluğu da onaramaz. Dışa aktardıktan sonra bir harfin veya amblemin ortası doluyorsa şekilleri ve hedef dosyayı inceleyin. Daha sonra gelen opak bir nesne yalnızca açıklığı örtüyor olabilir. SVG delikleri rehberi, bu durumu dolgu kuralı veya kontur sorunlarından ayırmanıza yardımcı olur. Bunun yerine komşu şekiller arasında ince beyaz bir çizgi görünüyorsa yığını değiştirmeden önce boşluk teşhisini kullanın.

Son olarak, paint-order farklı bir ayardır. Tek bir öğenin dolgusunun, konturunun ve işaretçilerinin ne zaman boyandığını değiştirir; bu öğeyi komşu bir yolun üstüne koymaz. MDN paint-order referansı bu kapsamı tanımlar. paint-order rehberini, renkli bir logo parçası diğerini gizlediğinde değil, kalın bir kontur kendi dolgusunu gizlediğinde kullanın.

MDN'nin belgelediği gibi CSS z-index, konumlandırılmış HTML kutuları ve flex veya grid öğeleri için hâlâ önemlidir. Bu sayfa yerleşimi durumunu SVG'nin içinde saklanan yol sırasından ayrı değerlendirin.

PerfectVector ile bu süreç nasıl işler?

Elinizde özgün bir SVG ana dosyası varsa onu kullanın. Yeniden vektörleştirmek, katman kararını çözmeden yeni bir şekil kümesi oluşturur. Tek kaynak düzleştirilmiş bir PNG veya JPG logo ise PerfectVector iş akışının daha erken aşamasında yardımcı olabilir: görüntüyü bir SVG adayına dönüştürün, ardından ayrı parçaları ve örtüşmelerini bir düzenleyicide inceleyin. Teslimden önce geri elde edilen yolları istediğiniz sıraya taşıyın. Dönüşüm, tasarımınızın ön plandaki nesnelerini belirlemez veya küçük bir açıklığın kenarlar izlenerek vektörleştirme sırasında korunacağını garanti etmez.

Kaynak görüntüde bulanıklık, gölgeler veya küçük yazılar varsa bu ayrıntıları elle yeniden çizmek, kenarları izleyerek vektörleştirmekten daha güvenilir olabilir. Daha kapsamlı SVG düzenleme rehberi, dönüşüm sonrası yol temizliğini ele alır.

Teslim edeceğiniz dosyayı doğrulayın

1. Kaynak SVG'nin bir kopyasını kaydedin ve yalnızca amaçlanan nesneyi veya grubu yeniden sıralayın.
2. Kaydedilen dosyayı, örtüşmenin önemli olduğu boyutta bir tarayıcıda açın. Kaynak tasarımla karşılaştırın.
3. Dosyayı alacak düzenleyicide veya uygulamada yeniden açın. Aynı örtüşmeyi, ayrıca maskeleri, kırpılmış alanları ve delikleri kontrol edin.
4. SVG etkileşimliyse sıralamadan sonra işaretçi ve üzerine gelme davranışını test edin. Sıralama sonucunda en üste gelen şekil, daha önce başka bir şeklin aldığı etkileşimi alabilir.
5. Sonuç yalnızca tek bir yakınlaştırma veya dışa aktarma boyutunda yanlış görünüyorsa daha fazla nesneyi taşımadan önce örnekleme çizgilerini veya gerçek boşlukları inceleyin.

Yalnızca raster biçimindeki bir kaynak için PerfectVector ile bir SVG adayı oluşturun, ardından yol sırasını, açıklıklarını ve kaydedilen dosyanın görüntüsünü amaçlanan boyutta inceleyin. Dosya zaten doğru vektör şekillerini içeriyorsa yeniden sıralamayla başlayın.

Sık sorulan sorular

Bir SVG yolunu öne getirmek için CSS z-index kullanabilir miyim? Tek SVG içindeki sıradan kardeş şekiller için yolu SVG belge sırasının daha sonraki bir yerine taşıyın. Çevredeki sayfa kutularını etkileyen CSS z-index, bu alt şekilleri güvenilir biçimde yeniden sıralamaz.

paint-order hangi SVG nesnesinin üstte olduğunu değiştirir mi? Hayır. paint-order, tek bir şekil veya metin öğesinin içindeki dolgu, kontur ve işaretçi sırasını değiştirir. Hangisinin diğerini örttüğünü değiştirmek için ayrı nesneleri yeniden sıralayın.

Bir yolu grubunun sonuna taşıdıktan sonra neden hâlâ gizli kalıyor? Grubunun tamamı başka bir grubun arkasında olabilir. Alt öğeyi grubun dışına taşımadan önce üst grupları ve dönüşümleri, kırpmayı, maskeleri veya opaklığı inceleyin.

Kaynaklar

1. W3C — SVG 1.1 Rendering Model — SVG belgesindeki öğelerin boyama sırasını tanımlar.
2. MDN — Node.appendChild() — Mevcut bir DOM alt öğesinin sona eklendiğinde nasıl taşındığını belgeler.
3. MDN — SVG paint-order attribute — paint-order kapsamını bir şeklin dolgusu, konturu ve işaretçileriyle sınırlar.
4. MDN — CSS z-index property — Sayfa yığınındaki konumlandırılmış öğeler ve yerleşim öğeleri için z-index kullanımını açıklar.
5. W3C — SVG 2 Rendering Model — SVG yığın bağlamlarını, gruplamayı ve işaretçi hedeflemesini açıklar.