सभी क्षेत्रों को बनाए रखने के दौरान अनियमित आकार के एसवीजी ओवरलैप कैसे करें?

Question

मैंने 4 एसवीजी (सभी समान आकार) बनाए हैं जो बाईं ओर तैरते हैं। मैंने उन्हें ओवरलैप करने की कोशिश की है (जैसा कि यह उस तरह से अच्छा दिखता है) लेकिन समस्या यह है कि चूंकि उनके आकार अनियमित हैं, कुछ क्षेत्र अन-क्लिक करने योग्य बन जाते हैं।

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

यह समस्या की पूरी codepen डेमो है: http://codepen.io/aguerrero/pen/pgvJoa

कैसे इतना है कि मैं के किसी भी क्षेत्र पर क्लिक कर सकते हैं मैं ठीक से सीएसएस कोड है

मैं सीएसएस कोड के रूप में इस्तेमाल व्यक्तिगत तीर? मैं क्लिक करने योग्य क्षेत्र के रूप में <svg> के अंदर <image> का उपयोग कर रहा हूं।

Answer 1

आपको सीधे अपने एसवीजी पर सीएसएस कक्षाएं लागू करने की आवश्यकता है।

एसवीजी टैग बहनों होने की जरूरत देखें

उदाहरण:

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

उदाहरण देखें: http://codepen.io/anon/pen/dGMmaY