Jak uczynić element tekstowy SVG "zdolnym do kliknięcia"?

Question

Mam mapę z elementami tekstowymi SVG, aby nazwać lokalizacje. Chcę, aby lokalizacje (kształty) były klikalne i są, ale ponieważ elementy tekstowe znajdują się na nich, jeśli ktoś unosi się nad elementem tekstowym i klika, to nic się nie dzieje, ponieważ kształt nie został kliknięty: element tekstowy był . Jak mogę to zrobić, aby po kliknięciu elementu tekstowego kliknięcie przechodziło "przez" i do kształtu?

Answer 1

Mozilla wprowadziła właściwości CSS w tym celu o nazwie pointer-events. Pierwotnie był on ograniczony do kształtów SVG, ale teraz jest obsługiwana w większości elementów DOM w nowoczesnych przeglądarek:

span.label { pointer-events: none; } 

• https://developer.mozilla.org/en-US/docs/CSS/pointer-events
• http://caniuse.com/pointer-events

Odpowiedź na to pytanie ma kilka dobrych informacji na uzyskując taki sam wynik w starym IE:

css 'pointer-events' property alternative for IE

Answer 2

dodać css do tekstu:

pointer-events: none; 

Answer 3

Jeśli istnieje możliwość pogrupowania kształtów mapy z tekstem wewnątrz elementu "<g>", można dołączyć kliknięcie do grupy, a nie do kształtu. Takie postępowanie daje dodatkową korzyść, że transformacje zastosowane w grupie będą miały zastosowanie zarówno do kształtu, jak i tekstu. Jeśli grupowanie nie jest możliwe, to zgadzam się, że poprzednia odpowiedź jest zdecydowanie najlepsza. Zasadniczo to, co się dzieje, jest następujące: większość ludzi wizualizuje kliknięcie przenikające w dół przez twój indeks Z, ale nie działa w ten sposób. Kliknięcie przechodzi przez DOM, więc jeśli tekst nie obsługuje kliknięcia, pęcznieje do następnego elementu DOM, który jest grupą nadrzędną lub kontenerem. Trwa to w górę, dopóki nie osiągnie najwyższego elementu DOM.