jQuery 点击不是在 SVG <g> 上触发，而是在子元素上触发

Question

我有一个 SVG，我试图通过使用 jQuerys 单击事件将其用作某种导航。

SVG 有几个组，其中包含各种路径和文本。当直接单击行/路径/文本时，会触发事件，但是当单击透明区域时，尽管仍然是组，但不会触发事件。关于如何定位整个区域有什么建议吗？

示例小提琴：如果您在正方形内或直接在线条上单击它会触发，但如果您在正方形和线条之间单击它不会

https://jsfiddle.net/benhnoou/96q1beu8/2/

jQuery：

$( "#diag-diagnosis" ).click(function() { 
    alert('diagnosis');
});

SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240.5 200">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-2 {
        fill: none;
        stroke: #000;
        stroke-miterlimit: 10;
        stroke-width: 4px;
      }
    </style>
  </defs>
  <title>Asset 1</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <g id="diag-diagnosis">
        <g>
          <rect class="cls-1" x="0.5" y="0.5" width="201" height="199"/>
          <path d="M201,1V199H1V1H201m1-1H0V200H202V0Z"/>
        </g>
        <line class="cls-2" x1="238.5" y1="16.5" x2="238.5" y2="167.5"/>
      </g>
    </g>
  </g>
</svg>

Answer 1

您可能想查看来自 SVG2 的 pointer-events。 pointer-events 的 bounding-box 属性适用于组和形状。所以这应该使两个对象之间的透明区域可点击。

$("#diag-diagnosis").click(function() {
  alert('diagnosis');
});

#diag-diagnosis {
  pointer-events: bounding-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240.5 200">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-2 {
        fill: none;
        stroke: #000;
        stroke-miterlimit: 10;
        stroke-width: 4px;
      }
    </style>
  </defs>
  <title>Asset 1</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <g id="diag-diagnosis">
        <g>
          <rect class="cls-1" x="0.5" y="0.5" width="201" height="199"/>
          <path d="M201,1V199H1V1H201m1-1H0V200H202V0Z"/>
        </g>
        <line class="cls-2" x1="238.5" y1="16.5" x2="238.5" y2="167.5"/>
      </g>
    </g>
  </g>
</svg>

Answer 2

尝试用标签包裹它

jsfiddle example

<a><svg></svg></a>