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

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

1 个答案: