SVG pointer-events: dopasuj obszary kliknięcia do swojej grafiki

Właściwość SVG pointer-events określa, które części grafiki mogą stać się celem zdarzenia wskaźnika. Wypełniony kształt, cienki obrys i pusty otwór mogą reagować inaczej, nawet gdy należą do tej samej ilustracji. Dopasuj obszar trafienia do działania, którego oczekuje czytelnik, a następnie testuj puste przestrzenie równie dokładnie jak te wypełnione kolorem.

Ten poradnik dotyczy grafiki używanej w interfejsie internetowym: diagramu z możliwością zaznaczania elementów, klikalnego emblematu lub ikony wewnątrz przycisku. Jeśli SVG zawiera już ścieżki nadające się do użycia, popraw bezpośrednio kod jego interakcji. Wektoryzacja pojawia się w tym procesie dopiero wtedy, gdy edytowalna geometria nadal jest uwięziona w pliku PNG lub JPG.

Zacznij od elementu, który odbiera kliknięcie

W SVG domyślna wartość auto działa jak visiblePainted. Widoczny kształt może stać się celem zdarzenia w obszarze wypełnienia, gdy fill ma wartość inną niż none, lub w obszarze obrysu, gdy stroke ma wartość inną niż none. Specyfikacja interaktywności SVG definiuje te reguły wykrywania trafień.

To wyjaśnia zachowanie ikony, która pozornie nie działa: jej funkcja nasłuchująca może reagować na kontur, ale pomijać pusty środek. Przeglądarka sprawdza trafienie w kształt, zamiast zakładać, że każdy punkt wewnątrz otaczającego go prostokąta oznacza to samo.

Oto przydatne wartości w tym procesie:

all nie oznacza „każdego punktu w obszarze widoku SVG”. Nadal odnosi się do geometrii elementu. Jeśli chcesz, aby reagował określony prostokąt wokół delikatnego rysunku, utwórz ten prostokąt świadomie.

Rozróżniaj też przezroczyste wypełnienie lub obrys i brak wypełnienia lub obrysu. fill="transparent" nadal jest wartością wypełnienia; fill="none" usuwa wypełnienie. Samo ustawienie krycia nie jest niezawodnym sposobem na to, aby nakładka ignorowała kliknięcia.

Przetestuj wypełnienie, otwór i otwarty obrys

Zbudowaliśmy małe środowisko testowe z SVG osadzonym bezpośrednio w HTML i oryginalnymi, ręcznie utworzonymi kształtami. Zawiera ono niebieską złożoną ścieżkę z prostokątnym otworem, pomarańczowy otwarty obrys oraz kopię tego obrysu nad osobnym przezroczystym obszarem trafienia. To przykłady edukacyjne, a nie wyniki konwersji w PerfectVector.

W teście w przeglądarce po kliknięciu niebieskiego pasa rejestrowano ring. Po kliknięciu jego pustego środka rejestrowano ring-stage, czyli zawierający go element SVG. Kliknięcie pomarańczowej linii powodowało zarejestrowanie trail, natomiast kliknięcie przestrzeni pod jej wierzchołkiem — stroke-stage. W trzecim panelu kliknięcia w obu miejscach powodowały zarejestrowanie hit.

Niebieska ścieżka używa dwóch prostokątnych podścieżek i fill-rule="evenodd":

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

Zgodnie z regułą wypełnienia even-odd wewnętrzny prostokąt znajduje się poza wypełnionym obszarem. Jest rzeczywistym otworem. Biały prostokąt nałożony na wierzch byłby kolejnym namalowanym kształtem z własnym zachowaniem przy wykrywaniu trafień. Jeśli błędna jest sama geometria, skorzystaj z poradnika naprawiania otworów w SVG, zanim zmienisz reguły zdarzeń.

Oto otwarty obrys z drugiego panelu:

<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>

Aby wykonać szybki test, umieść dowolny z tych fragmentów w pliku HTML, a za nim poniższy kod rejestrujący zdarzenia. Nadaj SVG widoczny rozmiar, na przykład width="360" height="270".

<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>

Kliknij namalowany obszar, puste wnętrze i narożnik poza rysunkiem. Rejestrowanie event.target pozwala odróżnić trafienie w ścieżkę od kliknięcia, które dotarło jedynie do kontenera SVG. Te przykłady testują wybór celu zdarzenia; nie są gotowymi interaktywnymi elementami sterującymi.

Dodaj obszar trafienia bez pogrubiania grafiki

Załóżmy, że cały obszar wokół pomarańczowej ścieżki powinien ją zaznaczać. Zwiększenie grubości jej widocznego obrysu zmieniłoby ilustrację. Osobny obszar trafienia pozwala nadać obszarowi interakcji własną geometrię:

<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>

Prostokąt znajduje się za grafiką. Pomarańczowa ścieżka nie uczestniczy w wyborze celu zdarzenia wskaźnika, więc prostokąt może odbierać kliknięcia przez nią. Jego współrzędne jednoznacznie definiują zamierzony obszar trafienia; dane widocznej ścieżki pozostają identyczne jak w drugim panelu.

Przydaje się to w przypadku obszaru diagramu lub cienkiej linii, w którą trudno trafić wskaźnikiem. Zadbaj, aby obszary trafienia nie nakładały się na niepowiązane elementy sterujące, i zdecyduj, co powinno się dziać w miejscach styku dwóch obszarów. Większy niewidoczny kształt może przechwytywać kliknięcia sąsiedniego elementu równie łatwo jak widoczny kształt.

W przypadku prostej ikony wykonującej jedno działanie natywny przycisk HTML często zapewnia potrzebny obszar trafienia bez dodawania prostokąta SVG.

Zachowaj aktywację z klawiatury w elemencie sterującym

Wyznaczanie celu zdarzenia wskaźnika nie zapewnia etykiety, aktywacji z klawiatury ani semantyki przycisku. Umieść ikonę wykonującą jedno działanie wewnątrz przycisku HTML z nazwą, a grafikę pozostaw dekoracyjną:

<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>

Natywny element button zapewnia zachowanie elementu sterującego; widoczny tekst nadaje mu nazwę. Zachowaj widoczny wskaźnik fokusu. Użyj prawdziwego linku, gdy działanie prowadzi do innej strony.

W naszym środowisku testowym klawisz Tab przenosił fokus na przycisk, a następnie Enter i spacja aktywowały go niezależnie. Przetestuj te klawisze także w swoim rzeczywistym interfejsie. Diagram z kilkoma niezależnymi działaniami wymaga odpowiednio zaprojektowanej obsługi tych działań z klawiatury; jeden otaczający przycisk nie może reprezentować ich wszystkich.

Ustawienie pointer-events: none również nie oznacza stanu wyłączenia. Nie usuwa z nawigacji klawiaturą elementu sterującego, który w innych okolicznościach może otrzymać fokus. MDN opisuje zarówno fokus klawiatury, jak i propagację zdarzeń: elementy potomne mogą ponownie włączyć możliwość stania się celem zdarzenia, a ich zdarzenia nadal mogą przechodzić przez funkcję nasłuchującą na elemencie nadrzędnym. Użyj natywnego atrybutu disabled, gdy przycisk musi być wyłączony.

Gdy grafika źródłowa jest plikiem PNG

Jeśli jedynym źródłem jest spłaszczony plik PNG lub JPG, a Twój interfejs wymaga kształtów, które można edytować niezależnie, proces konwersji obrazu na grafikę wektorową w PerfectVector może przygotować SVG do oceny. Porównaj go z oryginałem, sprawdź istotne otwory i obszary oraz zdecyduj, które części powinny otrzymać osobne obszary trafienia.

Obrysowywanie dostarcza geometrię. Twoja aplikacja nadal potrzebuje identyfikatorów o zrozumiałym znaczeniu, funkcji obsługi działań, nazw, obsługi fokusu i świadomie określonych obszarów trafienia. Kontur uzyskany przez obrysowywanie może być znacznie bardziej szczegółowy niż obszar, który użytkownik powinien klikać. W przypadku małej ikony interfejsu ręczne przerysowanie lub istniejący wektorowy plik źródłowy mogą być łatwiejsze w utrzymaniu. Poradnik przygotowywania ikon PNG wyjaśnia, co sprawdzić przed wprowadzeniem odzyskanej grafiki do zestawu elementów interfejsu.

Jeśli ikona jest jedynie dekoracją wewnątrz elementu sterującego, ikona z maską CSS może odpowiadać potrzebom związanym z jej kolorystyką; za działanie nadal odpowiada otaczający element sterujący. Szerszy poradnik wektoryzacji omawia, kiedy odzyskiwanie ścieżek w ogóle jest przydatne.

Sprawdź zamierzony obszar przed wdrożeniem

Testuj przy rzeczywistym rozmiarze wyświetlania, a nie tylko na dużym podglądzie w edytorze:

1. Kliknij wypełniony obszar, obrys, każdy otwór i puste narożniki.
2. Sprawdź cel zdarzenia, gdy uruchamia się niewłaściwe działanie.
3. Sprawdź, czy przezroczyste prostokąty lub nakładki nie przechwytują zdarzeń wskaźnika.
4. Potwierdź, że sąsiednie obszary trafienia nie nakładają się w nieoczekiwany sposób.
5. Użyj klawiszy Tab, Enter i spacji tam, gdzie jest to odpowiednie, z widocznym fokusem.
6. Przetestuj interakcję dotykową na urządzeniach obsługiwanych przez Twój interfejs.

Środowisko testowe weryfikuje te konkretne kształty w jednej przeglądarce. Nie ustala zachowania wszystkich przeglądarek w przypadku masek, przycinania, filtrów ani złożonej importowanej grafiki. Dodaj te przypadki do własnych testów, jeśli Twój projekt ich używa.

Jeśli brakuje edytowalnej geometrii, wypróbuj swój obraz źródłowy w PerfectVector, a następnie sprawdź jego kontury i otwory. Gdy grafika będzie poprawna, osobno określ i przetestuj obszar interakcji.

Najczęściej zadawane pytania

Dlaczego moje SVG reaguje tylko wtedy, gdy klikam jego kontur? Przy domyślnym zachowaniu wskaźnika w SVG kształt bez wypełnienia może stawać się celem zdarzenia tylko w obszarze namalowanego obrysu. Sprawdź wartość wypełnienia i zamierzone działanie. Użyj świadomie określonego obszaru trafienia lub otaczającego natywnego elementu sterującego, gdy pusta przestrzeń powinna aktywować to samo działanie.

Czy pointer-events="all" sprawia, że całe SVG jest klikalne? Ustawia obszary wypełnienia i obrysu elementu jako cel zdarzenia niezależnie od wartości określających ich malowanie lub widoczność. Nie zamienia automatycznie całego obszaru widoku SVG w obszar trafienia. Dodaj jawnie zdefiniowany kształt lub użyj otaczającego elementu sterującego, gdy potrzebujesz tego obszaru.

Czy przezroczysty prostokąt może odbierać kliknięcia? Tak. Przezroczystość nie oznacza braku geometrii ani braku wypełnienia prostokąta. Przezroczysty prostokąt z odpowiednią wartością pointer-events może służyć jako świadomie określony obszar trafienia, ale może też przypadkowo przechwytywać kliknięcia.

Czy wektoryzacja obrazu tworzy dostępne przyciski? Nie. Wektoryzacja może utworzyć edytowalną geometrię z grafiki rastrowej. Nazwy, obsługę klawiatury, funkcje obsługi działań, fokus i obszary interakcji trzeba zaimplementować i przetestować w interfejsie.

Źródła

1. W3C — SVG 2 Scripting and Interactivity — Definiuje wybór celu zdarzenia wskaźnika w SVG i geometrię używaną przez wartości pointer-events.
2. W3C — SVG 2 Painting — Definiuje sposób, w jaki reguły wypełnienia wyznaczają wnętrze i otwory ścieżki.
3. MDN — pointer-events — Wyjaśnia wybór celu zdarzenia, propagację, dziedziczenie i ograniczenia związane z fokusem klawiatury.
4. MDN — The button element — Dokumentuje zachowanie natywnego przycisku, nadawanie mu nazwy i stan wyłączenia.