SVG 是否可以将事件"pssthru"到其后面的元素 - 但只能用于 SVG 的一半？

Question

我有两个类似的SVG标签：

<div style="position: relative; width: 700px; height: 300px">
<div id="cc1" style="width: 700px; height: 300px; position: absolute; top: 0; left: 0"><svg width="700" height="300" version="1.1"></svg></div>
<div id="cc2" style="width: 700px; height: 300px; position: absolute; top: 0; left: 0"><svg width="700" height="300" version="1.1"></svg></div>
</div>

如下所示(两个标签，每个标签嵌套在一个div中，所有标签嵌套在容器div中(：

<div>
<div>  <svg></svg>  </div>
<div>  <svg></svg>  </div>
</div>

我在顶部svg标签上画图表的上半部分，在底部svg标签(用不同的颜色(上画下半部分。它运行良好——除非涉及到事件。因为第一个svg标记在第二个svg标签后面，所以它不响应指针事件。

有没有办法让CSS指针事件属性只应用于元素的一半(在本例中是svg标记的一半(？或者用其他方法使我的svg标记的上半部分对指针事件"不可见"，以便将事件传递给后面的svg标签？

Answer 1

我在发布问题5分钟后根据StackOverflow帖子找到了答案。

包裹第二个，"；顶部"；(堆叠(，将SVG标记放在另一个div中，并将其定位为SVG标记的顶部为-150px，并将溢出设置为hidden:

<div style="position: relative; width: 700px; height: 300px">
<div id="cc1" style="width: 700px; height: 300px; position: absolute; top: 0; left: 0">  <svg></svg>  </div>

<!-- The second svg tag is positioned so that the top half is hidden -->
<div style="position: absolute; top: 150px; left: 0; width: 700px; height: 150px; overflow: hidden">
<div id="cc2" style="width: 700px; height: 300px; position: absolute; top: -150px; left: 0">  <svg></svg>   </div>
</div>
</div>