How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

Question

I have created 4 SVGs (all same shapes) that are floated to the left. I have tried to make them overlap (as it looks nicer that way) but the problem is that since their shapes are irregular, some areas become un-clickable.

I used this as the CSS code:

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

This is the complete codepen demo of the problem: http://codepen.io/aguerrero/pen/pgvJoa

How do I properly code the CSS so that I can click on any area of the individual arrows? I'm using <image> inside the <svg> as the clickable area.

Answer 1

You need to apply CSS classes directly to your SVG.

See the SVG tags need to be sisters

Example:

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

See the example: http://codepen.io/anon/pen/dGMmaY