5

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

<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 设置的图片

我不知道问题可能出在哪里。

4

3 回答 3

9

我已成功内联 SVG，将 SVG 元素的指针事件设置为无，然后将 SVG 内的路径元素的指针事件设置为填充。这是一个 CodePen 示例。

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

path {
  pointer-events: fill;
}
于 2015-03-28T15:37:45.113 回答
2

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

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

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

于 2014-03-18T15:43:57.583 回答
0

这对我有用

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

!important如果它与您当前的样式冲突，请不要犹豫添加。

于 2021-02-12T23:22:10.113 回答