如何使不规则形状的SVG重叠,同时保持所有区域可点击？

Question

我已经创建了4个浮动到左侧的SVG(所有相同的形状).我试图让它们重叠(因为它看起来更好)但问题是,由于它们的形状是不规则的,一些区域变得不可点击.

我用它作为CSS代码:

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

这是问题的完整codepen演示:http://codepen.io/aguerrero/pen/pgvJoa

如何正确编码CSS以便我可以单击各个箭头的任何区域？我在<image>里面<svg>用作可点击区域.

Answer 1

您需要将CSS类直接应用于SVG.

看SVG标签需要是姐妹

例:

<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