即使指针事件：可见/绘制，SVG仍然会收到点击

Question

基本上，我在HTML页面上的<img>标记中放了几张.svg图像，如下所示：

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

所有这些图像彼此重叠。它们具有相同的尺寸但内容不同 我现在只想使这些图像的内容可以点击 CSS中的pointer-events: visible;或pointer-events: painted;似乎是可能的，但我不能让它像那样工作。图像仍会在其中的每个点接收点击，而不仅仅是在内容部分。

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

我在Illustrator CC中使用透明背景创建了那些.svg图像，所以通常没有内容，我使用以下选项导出它：

（抱歉这是德语） picture of SVG settings http://s14.directupload.net/images/140318/reurfvoo.png

我不知道问题出在哪里。

Answer 1

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

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

path {
  pointer-events: fill;
}

Answer 2

问题是您使用的是<img>标记。即使数据是SVG，它们也像栅格一样工作，即单个项目确实不存在，它只是一张图片，你可以将其整体点击或不点击。

如果您希望图形具有交互性，则需要使用<object>或<iframe>标记，然后您可以使用pointer-events属性使各个形状可点击。 / p>

您还可以在html文件中包含内联的所有svg数据，但如果您这样做，则需要确保所有id属性都是唯一的。

Answer 3

这对我有用

svg {
  pointer-events:none;
}
svg *{
  pointer-events:auto;
}

不要犹豫添加 !important，以防它与您当前的风格冲突。