覆盖SVG元素的指针事件

Question

我有以下示例：

http://jsfiddle.net/klodoma/3m3dmdtw

我想显示＆＃34;光标：指针＆＃34;通过这些SVG文件中的某些元素，甚至可以添加单击事件。 SVG正在重叠。

如何在＆＃34;底层元素上添加鼠标悬停＆＃34; - 蓝色矩形？它甚至可能吗？

  <path fill="#000000" stroke="#000000" d="M338,293L338,293L164,230L164,230M338,293L934,307L733,59L164,230" stroke-width="30" stroke-opacity="0" fill-opacity="0" class="el-seq-7591 el-model-7591-76627 el-model-76627" transform="matrix(1,0,0,1,-76,79)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 0; fill-opacity: 0; cursor: pointer;"></path>

Answer 1

好的，我找到了解决方案。

答案在于＆＃34; 指针 - 事件：无; ＆＃34;你可以把它放在＆＃34;父母＆＃34;元件;这意味着来自子元素的所有指针事件都带有＆＃34; 指针事件：全部＆＃34;将被转发。

解决方案：

http://jsfiddle.net/klodoma/ox6pwjt2/

.stage-item {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  pointer-events: none;
}

.el-seq-7591 {
  pointer-events: all;
}