SVG元素边界框覆盖元素

Question

我遇到了 SVG 的透明部分仍然覆盖其下方对象的鼠标事件的问题。 jsFiddle here 显示了一个非常简化的示例。起初我认为这是所有项目都是单独的 SVG 元素的问题，这些元素嵌入了 object 标记，但即使使用内联元素，这个问题似乎也会弹出，例如页面中的示例。

如果您将鼠标悬停在任一圆圈上，指针会根据需要更改，但如果您将鼠标悬停在红色圆圈的边界框重叠的蓝色圆圈上，您将失去指针交互。

我正在尝试找到一种简单的方法来让这些通过。我听说使用 css pointer-events 属性可以解决这个问题，但如果我将它放在任何更高的元素上，如 'none' 它似乎也会删除所有子事件。

这里是代码 sn-p，以防你不想检查 jsFiddle。

// Get all svgs
var svgElems = document.getElementsByTagName("svg");

// loop the list
for (let svgElem of svgElems) {
  // grab the first group element inside
  var gElem = svgElem.getElementsByTagName("g")[0];

  // set the style for the cursor to a pointer
  gElem.style.cursor = 'pointer';
}

svg {
  outline: 1px solid black;
}

<div class="interaction-spot" style="position: absolute; width: 50%; top: 5%; left:10%; z-index:5">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
    <defs>
      <style>.cls-1{fill:#030093;}</style>
    </defs>
    <title>blue</title>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Layer_1-2" data-name="Layer 1">
        <circle class="cls-1" cx="82" cy="82" r="82"/>
      </g>
    </g>
  </svg>
</div>

<div class="interaction-spot" style="position: absolute; width: 50%; top: 5%; left:25%; z-index:5">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
    <defs>
      <style>.cls-2{fill:#af0000;}</style>
    </defs>
    <title>red</title>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Layer_1-2" data-name="Layer 1">
        <circle class="cls-2" cx="82" cy="82" r="82"/>
      </g>
    </g>
  </svg>
</div>

Answer 1

您可以在容器上设置指针事件：无，并在内部元素中重置它

// Get all svgs
var svgElems = document.getElementsByTagName("svg");

// loop the list
for (let svgElem of svgElems) {
  // grab the first group element inside
  var gElem = svgElem.getElementsByTagName("g")[0];

  // set the style for the cursor to a pointer
  gElem.style.cursor = 'pointer';
}

svg {
  outline: 1px solid black;
}

.interaction-spot {
    pointer-events: none;
}


#Layer_1-2 {
    pointer-events: auto;
}

<div class="interaction-spot" style="position: absolute; width: 50%; top: 5%; left:10%; z-index:5">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
    <defs>
      <style>.cls-1{fill:#030093;}</style>
    </defs>
    <title>blue</title>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Layer_1-2" data-name="Layer 1">
        <circle class="cls-1" cx="82" cy="82" r="82"/>
      </g>
    </g>
  </svg>
</div>

<div id="red" class="interaction-spot" style="position: absolute; width: 50%; top: 5%; left:25%; z-index:5">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
    <defs>
      <style>.cls-2{fill:#af0000;}</style>
    </defs>
    <title>red</title>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Layer_1-2" data-name="Layer 1">
        <circle class="cls-2" cx="82" cy="82" r="82"/>
      </g>
    </g>
  </svg>
</div>

Answer 2

你可以使用clip-path:

.interaction-spot {
  clip-path: circle(50%);
}

jsFiddle

Answer 3

您实际上可以为 SVG 中的各个元素分配一个 ID —— 只需在编辑器中打开 SVG 以访问 SVG DOM 并将 id="someelement" 添加到您想要通过的任何元素，然后重新保存 SVG。然后，您可以将 pointer-events:none 应用到您希望通过点击传递的特定元素，只需定位 ID。

svg#someelement, svg#sometherelement, svg#yetanotherelement{
    pointer-events:none;
}