我有两个 SVG 元素，每个元素都覆盖整个屏幕。
html,
body {
height: 100%;
}
svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<rect x=0 y=0 width=50 height=50 fill='#ff0000' onclick="console.log(1)"></rect>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<rect x=40 y=40 width=50 height=50 fill='#00ff00' onclick="console.log(2)"></rect>
</svg>
</body>即使方块不重叠，点击事件也永远不会传递到红色方块，因为带有绿色方块的 SVG 覆盖整个屏幕并捕获任何点击事件。有没有办法在这两个方块上都有点击事件，而它们不在同一个 SVG 中？
像如何通过带有指针事件的 SVG 仅传递点击的解决方案？非常适合将点击事件传递到红色方块，但前提是您可以丢弃绿色方块上的所有事件。
基本上,我有几个.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
我不知道问题出在哪里.
