html - SVG 仍然收到点击，即使指针事件 : visible/painted

Question

基本上，我将一些 .svg 图像放入 <img> 中像这样在我的 HTML 页面上标记:

<img src="images/corner.svg" alt="menu" class="menu" onClick="Fade();"/>

所有这些图像都相互重叠。它们具有相同的大小但内容不同。
我现在正在尝试仅使这些图像的内容可点击。
与 pointer-events: visible;或 pointer-events: painted;在 CSS 中这似乎是可能的，但我无法让它像那样工作。图像中的每个点仍然会收到点击，而不仅仅是在内容部分。

我试过了 pointer-events: none;在最上面的图片上，并且禁用了对最上面图片的点击，这听起来好像 HTML 或 CSS 代码没有错误。

我在 Illustrator CC 中创建了那些具有透明背景的 .svg 图像，因此通常不会有内容，我使用以下选项导出它:

(对不起，这是德语)

我不知道问题出在哪里。

Answer 1

我已成功内联 SVG，将 SVG 元素的指针事件设置为无，然后将 SVG 中路径元素的指针事件设置为填充。 Here's a CodePen example .

svg {
  cursor: pointer;
  pointer-events: none;
}

path {
  pointer-events: fill;
}