Jak nakładać się na siebie nieregularne kształty SVG, zachowując jednocześnie wszystkie obszary klikalne?

Stworzyłem 4 SVG (wszystkie te same kształty), które są unoszone w lewo. Starałem się, aby nakładały się na siebie (jak to wygląda ładniej w ten sposób), ale problem polega na tym, że ponieważ ich kształty są nieregularne, niektóre obszary stają się niewykrywalne.Jak nakładać się na siebie nieregularne kształty SVG, zachowując jednocześnie wszystkie obszary klikalne?

użyłem tego jako kod CSS:

.interact-arrow { 
    float: left; 
    margin-right: -100px; 
    width: 24%; 
    position: relative; 
}

Ta pełna codepen demo problemu: http://codepen.io/aguerrero/pen/pgvJoa

Jak prawidłowo kodować CSS, dzięki czemu mogę kliknąć na dowolnym obszarze poszczególne strzałki? Używam <image> wewnątrz <svg> jako obszaru klikalnego.

Źródło

2015-12-07 catandmouse

Możliwy duplikat [Jak stworzyć klikalny siatki trójkątów przy użyciu HTML, SVG? ] (http://stackoverflow.com/questions/34001691/how-to-create-a-clickable-grid-of-triangles-using-html-svg) –

Potrzebujesz, aby kliknięcie również nie pokrywało się z poprzednim obrazem? –

Sprawdź to ... http://codepen.io/anon/pen/qbZQWJ – yjs

Musisz zastosować klasy CSS bezpośrednio do SVG.

Zobacz tagi SVG muszą być siostrami

Przykład:

<div class="wrapper-interact-arrow"> 
    <svg class="interact-arrow button-reverse"> 
     ... 
    </svg> 

    <svg class="interact-arrow button-play"> 
     ... 
    </svg> 

    <svg class="interact-arrow button-pause"> 
     ... 
    </svg> 

    <svg class="interact-arrow button-arrow"> 
     ... 
    </svg>

Patrz przykład: http://codepen.io/anon/pen/dGMmaY

Źródło

2015-12-18 17:02:26

Jak nakładać się na siebie nieregularne kształty SVG, zachowując jednocześnie wszystkie obszary klikalne?

Odpowiedz

Powiązane problemy