Question

我有两个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中？

像How can I pass ONLY clicks through a SVG with pointer-events?这样的解决方案非常适合将点击事件传递到红色方块，但前提是您可以放弃绿色方块上的所有活动。

Answer 1

只需将指针事件无添加到svg标记即可。在svg内的其他所有内容中添加指针 - 事件自动。只使svg中的元素可单击，而不是父svg标记。

使用chrome。

html,
body {
  height: 100%;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events:none;
}
svg *{
  pointer-events:auto;
}

<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>

Answer 2

用另一个svg元素包装你的svg元素。请参阅here为什么会这样：如果<svg>元素不在最外层，则它不能成为指针事件的目标。最外层是HTML上下文的一部分，因此它的作用类似于<div>。

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%">
    <svg width="100%" height="100%">
      <rect x=0 y=0 width=50 height=50 fill='#ff0000' onclick="console.log(1)"></rect>
    </svg>
    <svg width="100%" height="100%">
      <rect x=40 y=40 width=50 height=50 fill='#00ff00' onclick="console.log(2)"></rect>
    </svg>
  </svg>
</body>

通过SVG背景传递鼠标事件

2 个答案: