Düzensiz şekilli SVG'ler, tüm alanları tıklanabilirken üst üste binmek için nasıl yapılır?

Question

Sola süzülen 4 SVG (tümü aynı şekil) oluşturdum. Onları üst üste getirmeye çalıştım (bu şekilde daha güzel gözüküyor) ama problem şu ki, şekilleri düzensiz olduğundan bazı alanlar tıklanamaz hale geliyor.

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

Bu sorunun tam codepen demo: http://codepen.io/aguerrero/pen/pgvJoa

Ben herhangi bir alanda tıklayabilir, böylece düzgün CSS kod nasıl

CSS kodu olarak kullandı bireysel oklar? <svg>'un içinde tıklanabilir alan olarak <image> kullanıyorum.

Answer 1

CSS sınıflarını doğrudan SVG'nize uygulamanız gerekir.

SVG etiketleri kardeş olması gerekiyor görün

Örnek:

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

örneğe bakın: http://codepen.io/anon/pen/dGMmaY