SVG pointer-events: tıklama alanlarını ayarlayın

SVG'deki pointer-events, grafiğin hangi kısımlarının bir işaretçi olayının hedefi olabileceğini belirler. Dolgulu bir şekil, ince bir kontur çizgisi ve boş bir delik, aynı illüstrasyona ait olsalar bile farklı tepki verebilir. Tıklama alanını okuyucunun beklediği eyleme göre ayarlayın; ardından boş alanları da renkli alanlar kadar dikkatle test edin.

Bu rehber, web arayüzünde kullanılan çizimler içindir: seçilebilir bir diyagram, tıklanabilir bir amblem veya düğme içindeki bir simge. SVG zaten kullanılabilir yollar içeriyorsa etkileşim kodunu doğrudan düzeltin. Vektörleştirme, yalnızca düzenlenebilir geometri hâlâ PNG veya JPG içinde sıkışıp kaldığında iş akışına girer.

Tıklamayı alan öğeyle başlayın

SVG'de varsayılan auto değeri, visiblePainted gibi davranır. Görünür bir şekil, fill değeri none değilse dolgusu üzerinde; stroke değeri none değilse kontur çizgisi üzerinde hedef olabilir. SVG etkileşim belirtimi, bu hedef alanı sınama kurallarını tanımlar.

Bu, bozuk gibi görünen bir simgeyi açıklar: olay dinleyicisi dış çizgide çalışırken boş merkezde çalışmayabilir. Tarayıcı, çevreleyen dikdörtgenin içindeki her noktanın aynı anlama geldiğini varsaymak yerine şekli sınar.

Bu iş akışı için yararlı seçenekler şunlardır:

all, “SVG görünüm alanındaki her nokta” anlamına gelmez. Yine öğenin geometrisini ifade eder. İnce ayrıntılı bir çizimin çevresindeki belirli bir dikdörtgenin tepki vermesini istiyorsanız o dikdörtgeni bilinçli olarak oluşturun.

Ayrıca saydam boya ile boya olmamasını ayırt edin. fill="transparent" hâlâ bir dolgu değeridir; fill="none" dolguyu kaldırır. Tek başına opaklık, üstteki bir öğenin tıklamaları yok saymasını sağlamak için güvenilir bir yöntem değildir.

Dolguyu, deliği ve açık kontur çizgisini test edin

Elle yazılmış özgün şekillerle küçük bir satır içi SVG deneme ortamı oluşturduk. Dikdörtgen bir deliği olan mavi bileşik yol, turuncu açık kontur çizgisi ve bu çizginin ayrı bir saydam hedef üzerindeki kopyasını içerir. Bunlar öğretici örneklerdir; PerfectVector dönüşüm sonuçları değildir.

Tarayıcı testinde mavi şeride tıklamak ring kaydını oluşturdu. Boş merkezine tıklamak ise onu içeren SVG olan ring-stage kaydını oluşturdu. Turuncu çizgi trail kaydını oluştururken tepesinin altındaki boşluk stroke-stage kaydını oluşturdu. Üçüncü panelde her iki konum da hit kaydını oluşturdu.

Mavi yol, iki dikdörtgen alt yol ve fill-rule="evenodd" kullanır:

<svg id="ring-stage" viewBox="0 0 240 180">
  <path id="ring" fill="#2874c8" fill-rule="evenodd"
    d="M30 20H210V160H30Z M85 60H155V120H85Z" />
</svg>

İçteki dikdörtgen, tek-çift dolgu kuralına göre dolgulu bölgenin dışındadır. Gerçek bir deliktir. Üste yerleştirilen beyaz bir dikdörtgen, kendi tıklama davranışına sahip başka bir boyalı şekil olurdu. Geometrinin kendisi yanlışsa olay kurallarını değiştirmeden önce SVG deliklerini onarma rehberini kullanın.

İkinci paneldeki açık kontur çizgisi şöyle tanımlanır:

<svg id="stroke-stage" viewBox="0 0 240 180">
  <path id="trail" d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="stroke" />
</svg>

Hızlı bir test için iki kod parçasından birini HTML dosyasına yerleştirin ve arkasına şu olay kaydediciyi ekleyin. SVG'ye width="360" height="270" gibi görünür bir boyut verin.

<output id="result" aria-live="polite">Click the artwork.</output>
<script>
  const stage = document.querySelector('svg');
  const result = document.querySelector('#result');
  stage.addEventListener('click', (event) => {
    result.textContent = `Target: ${event.target.id}`;
  });
</script>

Boyalı bölgeye, boş bir iç alana ve çizimin dışındaki bir köşeye tıklayın. event.target değerini kaydetmek, bir yolun hedeflendiği tıklamayı yalnızca SVG kapsayıcısına ulaşan tıklamadan ayırır. Bu örnekler hedef seçimini test eder; tamamlanmış etkileşimli kontroller değildir.

Çizimi kalınlaştırmadan bir tıklama hedefi ekleyin

Turuncu patikanın çevresindeki tüm alanın o patikayı seçmesi gerektiğini varsayalım. Görünür kontur çizgisini kalınlaştırmak illüstrasyonu değiştirirdi. Ayrı bir hedef, etkileşim alanının kendi geometrisine sahip olmasını sağlar:

<svg id="hit-stage" viewBox="0 0 240 180">
  <rect id="hit" x="20" y="20" width="200" height="140"
    fill="transparent" pointer-events="all" />
  <path d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="none" />
</svg>

Dikdörtgen, çizimin arkasında durur. Turuncu yol, işaretçi hedeflemesini yok sayar; böylece dikdörtgen onun üzerinden gelen tıklamaları alabilir. Koordinatları, amaçlanan hedefi açıkça tanımlar; görünür yol verisi ikinci paneldekiyle aynı kalır.

Bu, bir diyagram bölgesi veya işaretçiyle hedeflemesi zor ince bir çizgi için yararlıdır. Hedeflerin ilgisiz kontrollerle örtüşmesini önleyin ve iki bölgenin birleştiği yerde ne olacağına karar verin. Daha büyük görünmez bir şekil, görünür bir şekil kadar kolay biçimde komşu öğenin tıklamalarını yakalayabilir.

Tek bir eylem gerçekleştiren basit bir simgede, standart HTML düğmesi çoğu zaman SVG dikdörtgeni eklemeye hiç gerek kalmadan ihtiyaç duyduğunuz hedefi sağlar.

Klavye ile etkinleştirmeyi kontrolde tutun

İşaretçi hedeflemesi; etiket, klavye ile etkinleştirme veya düğme semantiği sağlamaz. Tek eylemli bir simgeyi adı olan bir HTML düğmesine yerleştirin ve çizimi dekoratif tutun:

<button id="select-trail" type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24"
    width="24" height="24" style="pointer-events: none">
    <path d="M3 20L12 4L21 20" fill="none"
      stroke="currentColor" stroke-width="3" />
  </svg>
  Select trail
</button>
<output id="selection" aria-live="polite"></output>
<script>
  const button = document.querySelector('#select-trail');
  const selection = document.querySelector('#selection');
  button.addEventListener('click', () => {
    selection.textContent = 'Trail selected';
  });
</script>

Standart HTML button öğesi, kontrol davranışını sağlar; görünür metin ise adını sağlar. Görünür bir odak göstergesini koruyun. Eylem başka bir sayfaya götürüyorsa gerçek bir bağlantı kullanın.

Deneme ortamımızda Tab, düğmeye odaklandı; ardından Enter ve Space tuşları ayrı ayrı düğmeyi etkinleştirdi. Bu tuşları gerçek arayüzünüzde de test edin. Birkaç bağımsız eylemi olan bir diyagram, bu eylemler için uygun bir klavye etkileşim tasarımı gerektirir; çevresini saran tek bir düğme bunların tümünü temsil edemez.

pointer-events: none ayarı aynı zamanda devre dışı durum anlamına gelmez. Normalde odaklanabilen bir kontrolü klavye gezinmesinden kaldırmaz. MDN hem klavye odağını hem olay yayılımını belgeler: alt öğeler hedeflemeyi yeniden etkinleştirebilir ve olayları yine bir üst öğenin dinleyicisinden geçebilir. Bir düğmenin devre dışı bırakılması gerekiyorsa HTML’nin disabled özniteliğini kullanın.

Başlangıç çizimi PNG olduğunda

Tek kaynak düz bir PNG veya JPG ise ve arayüzünüz bağımsız düzenlenebilir şekiller gerektiriyorsa PerfectVector'ün görüntüden vektöre dönüştürme iş akışı, bir SVG aday dosyası hazırlayabilir. Bunu özgün dosyayla karşılaştırın, önemli delikleri ve bölgeleri inceleyin ve hangi parçaların ayrı etkileşim hedefleri gerektirdiğine karar verin.

Konturları izleyerek vektörleştirme geometri sağlar. Uygulamanızın yine anlamlı ID'lere, eylem işleyicilerine, adlara, odak davranışına ve bilinçli olarak tanımlanmış tıklama alanlarına ihtiyacı vardır. Vektörleştirilmiş görsel dış çizgi, kullanıcının tıklaması gereken bölgeden çok daha ayrıntılı olabilir. Küçük bir arayüz simgesinde elle yeniden çizim veya mevcut bir vektör ana dosyası daha kolay sürdürülebilir. PNG simge hazırlama rehberi, geri kazanılan çizimi bir UI kitine eklemeden önce neleri incelemeniz gerektiğini açıklar.

Simge bir kontrol içinde yalnızca dekoratifse CSS maskesiyle kullanılan bir simge, renklendirme davranışına uygun olabilir; eylem yine çevresindeki kontrolün sorumluluğundadır. Daha kapsamlı vektörleştirme rehberi, yolları geri kazanmanın öncelikle ne zaman yararlı olduğunu ele alır.

Yayına almadan önce amaçlanan alanı doğrulayın

Yalnızca büyük bir düzenleyici önizlemesini değil, gerçek görüntüleme boyutunu test edin:

1. Dolgulu bir bölgeye, kontur çizgisine, her deliğe ve boş köşelere tıklayın.
2. Yanlış eylem tetiklendiğinde olay hedefini inceleyin.
3. İşaretçiyi yakalayan saydam dikdörtgenler veya üstteki öğeler olup olmadığını kontrol edin.
4. Komşu hedeflerin beklenmedik biçimde örtüşmediğini doğrulayın.
5. Uygun yerlerde görünür odakla birlikte Tab, Enter ve Space tuşlarını kullanın.
6. Arayüzünüzün desteklediği cihazlarda dokunma etkileşimini test edin.

Deneme ortamı, bu belirli şekilleri tek bir tarayıcıda doğrular. Maskeler, kırpma, filtreler veya karmaşık içe aktarılmış çizimler için her tarayıcının davranışını ortaya koymaz. Tasarımınız bunları kullanıyorsa bu durumları kendi testinize ekleyin.

Düzenlenebilir geometri eksikse kaynak görüntünüzü PerfectVector'de deneyin, ardından konturlarını ve deliklerini inceleyin. Çizim doğru hâle geldiğinde etkileşim alanını ayrı olarak tanımlayıp test edin.

Sık sorulan sorular

SVG'm neden yalnızca dış çizgisine tıkladığımda tepki veriyor? Varsayılan SVG işaretçi davranışında, dolgusuz bir şekil yalnızca boyalı kontur çizgisi üzerinde hedeflenebilir. Dolgu değerini ve amaçlanan eylemi kontrol edin. Boş alanın da aynı eylemi etkinleştirmesi gerekiyorsa bilinçli olarak tanımlanmış bir tıklama hedefi veya çevresini saran standart HTML kontrolü kullanın.

pointer-events="all" tüm SVG'yi tıklanabilir yapar mı? Öğenin dolgu ve kontur çizgisi bölgelerini, boya veya görünürlük değerlerinden bağımsız olarak hedefler. SVG görünüm alanının tamamını otomatik olarak hedefe dönüştürmez. O alana ihtiyacınız varsa açıkça tanımlanmış bir şekil ekleyin veya çevresini saran bir kontrol kullanın.

Saydam bir dikdörtgen tıklamaları alabilir mi? Evet. Saydamlık, dikdörtgenin geometrisi veya dolgusu olmadığı anlamına gelmez. Uygun bir pointer-events değerine sahip saydam dikdörtgen, bilinçli olarak tanımlanmış bir tıklama hedefi işlevi görebilir; ancak tıklamaları yanlışlıkla da yakalayabilir.

Bir görüntüyü vektörleştirmek erişilebilir düğmeler oluşturur mu? Hayır. Vektörleştirme, raster çizimlerden düzenlenebilir geometri üretebilir. Adlar, klavye davranışı, eylem işleyicileri, odak ve etkileşim bölgeleri arayüzde uygulanmalı ve test edilmelidir.

Kaynaklar

1. W3C — SVG 2 Scripting and Interactivity — SVG işaretçi hedeflemesini ve pointer-events değerlerinin kullandığı geometriyi tanımlar.
2. W3C — SVG 2 Painting — Dolgu kurallarının bir yolun iç bölgesini ve deliklerini nasıl belirlediğini tanımlar.
3. MDN — pointer-events — Hedeflemeyi, yayılımı, kalıtımı ve klavye odağıyla ilgili sınırlamaları açıklar.
4. MDN — The button element — Standart HTML düğmesinin davranışını, adlandırmayı ve devre dışı durumu belgeler.