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

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图像,所以通常没有内容,我使用以下选项导出它:

(抱歉这是德语版) SVG设置图片http://s14.directupload.net/images/140318/reurfvoo.png

我不知道问题出在哪里.

Answer 1

我已成功内联SVG,将指针事件设置为无SVG元素,然后设置SVG中路径元素的指针事件来填充.这是CodePen示例.

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

path {
  pointer-events: fill;
}

Answer 2

问题是您正在使用<img>标签。即使数据是 SVG，它们也像栅格一样工作，即各个项目并不真正存在，它只是一张图片，您可以完全点击也可以不点击。

如果您希望绘图具有交互性，则需要使用<object>或<iframe>标签，然后可以使用指针事件属性使各个形状可单击或不可单击。

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