How to make irregularly shaped SVGs matching while keeping all areas clickable?

Question

I created 4 SVGs (all the same shapes) that move left. I tried to make them overlap (which looks better), but the problem is that, because their shapes are irregular, some areas become sloppy.

I used this as CSS code:

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

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

How to code CSS correctly so that I can click on any area of ​​individual arrows? I use <image> inside <svg> as the area that can be clicked.

Answer 1

You need to apply CSS classes directly to your SVG.

See svg tags that should 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 an example: http://codepen.io/anon/pen/dGMmaY