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

Question

我创建了 4 个向左浮动的 SVG（所有形状相同）。我试图让它们重叠（因为那样看起来更好）但问题是由于它们的形状不规则，某些区域变得不可点击。

我用这个作为 CSS 代码：

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

这是该问题的完整代码笔演示：http://codepen.io/aguerrero/pen/pgvJoa

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

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

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

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

html

css

svg

css-float