javascript - SVG 元素边界框覆盖元素

Question

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

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

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

如果您不想检查 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

可以在容器上设置pointer-events: none，在内部元素中重新设置

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