使用 Javascript 或 CSS 检测形状上的点击/悬停，而不是其框模型的矩形答案

【问题标题】：Detect click/hover on a shape, not its box-model's rectangle, with Javascript or CSS使用 Javascript 或 CSS 检测形状上的点击/悬停，而不是其框模型的矩形
【发布时间】：2016-03-21 17:22:29
【问题描述】：

我希望能够检测可能使用 CSS 点击/悬停在形状（带有 SVG 源文件的<img> 标记）上，但不能检测到它周围的盒子模型资产。在下图中，会监听点击/悬停的区域是浅蓝色区域，而“额外”区域为橙色。

在我的特殊情况下，我有两个圆圈，一个在另一个之上 - 下面的一个正在监听点击/悬停。因此，我希望浅蓝色的环只为他们听。然而，根据盒子模型，为了让底层圆圈检测到点击/悬停，用户必须在该橙色方形条纹上单击或悬停。

【问题讨论】：

不可能，除非您放弃使用 <img> 标签，因为当 SVG 用作图像时，它基本上可以像光栅一样工作。
我明白了，我不这么认为，因为使用filter: drop-shadow() CSS 属性，浏览器可以识别 SVG 文件的边缘。无论如何，如果不使用<img> 标签，我怎么能插入 SVG 图像？
在文本编辑器中打开 SVG，获取代码

标签： javascript html css svg event-handling

【解决方案1】：

我认为您需要将图像从 SVG 转换并使用图像映射多边形来指定 onclick 事件的区域。

https://developer.mozilla.org/en/docs/Web/HTML/Element/map

【讨论】：

【解决方案2】：

您也可以通过使用两个 div（一个环绕另一个）并将 cSS 边框半径和背景图像设置为您的图像来实现此目的。使用stopPropagation () 和cancelBubble，您可以将点击行为设置为您喜欢的。

HTML

<div class="big_cycle" onclick="alert ('clicked');">
    <div class="small_cycle" onclick="event.cancelBubble = true; event.stopPropagation ();"></div>
</div>

CSS

.big_cycle {
  width: 50px;
  height: 50px;
  position: relative;
  cursor: pointer;
  background-color: #f00;
  border: 1px solid #000;
  border-radius: 25px;
}

.small_cycle {
  width: 28px;
  height: 28px;
  position: absolute;
  left: 10px;
  top: 10px;
  cursor: default;
  background-color: #0f0;
  border: 1px solid #000;
  border-radius: 14px;
}

我做了一个简单的 Plunker 来证明：Click me

【讨论】：