Question

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

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

我正试图找到一种简单的方法来允许这些传递。我听说使用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

您可以使用clip-path：

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

<强> jsFiddle

Answer 2

您可以在容器上设置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>

Answer 3

您实际上可以为SVG中的各个元素分配ID - 只需在编辑器中打开SVG即可访问SVGs DOM并将id =“someelement”添加到您想要传递的任何元素，然后重新保存SVG。然后，您可以通过简单地定位ID来应用指针事件：none，只需要通过点击传递的特定元素。

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

SVG元素边界框覆盖元素

3 个答案: