console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>SVG Click Detection Demo</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }
    svg {
      border: 1px solid #ccc;
      width: 400px;
      height: 300px;
    }
    path {
      fill: lightblue;
      stroke: #333;
      stroke-width: 2;
    }
  </style>
</head>
<body>

  <h2>点击SVG图形测试</h2>
  <p id="result">请点击SVG图形内部或外部</p>

  <svg id="mysvg" width="436" height="349" viewBox="0 0 436 349" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="mypath" d="M175.5 229.5L172.5 217.5L152.5 226.5V232.5L140 238.5L132 245L135.5 254L140 260.5V273L142 285V297L140 310L132 327.5V338.5L79 349V264L53 256.5H25L11.5 254L16.5 200.5H0V181.5V167V149L4 130.5L11.5 120.5L16.5 113L23.5 102L31 85L44.5 60.5L58.5 40L76 25.5L93.5 8.5L104.5 15L121.5 21L135.5 25.5L152.5 21H181.5L210 25.5L245 21L294 11L344.5 0L356 21L366.5 40L381 66L397 105.5L407 154.5L419.5 189L428 217.5L435 238.5L436 260.5L432 292L424.5 307L390 305L352 317.5H307L241 323L227.5 307L210 286.5L199 273L190.5 260.5L183.5 248.5L181.5 236.5L175.5 229.5Z" fill="#FFBF00" fill-opacity="0.6"/>
</svg>


  <script>
    const svg = document.getElementById('mysvg');
    const path = document.getElementById('mypath');
    const result = document.getElementById('result');

    // 方法一：使用 event.target 判断
    svg.addEventListener('click', (e) => {
      if (e.target === path) {
        result.textContent = '✅ 方法一：点击在 path 元素上';
      } else {
        result.textContent = '❌ 方法一：未点击在 path 元素上';
      }

      // 方法二：使用 isPointInFill 判断更精确
      const pt = svg.createSVGPoint();
      pt.x = e.clientX;
      pt.y = e.clientY;

      const svgPt = pt.matrixTransform(svg.getScreenCTM().inverse());

      if (path.isPointInFill(svgPt)) {
        result.textContent += '\n✅ 方法二：点击点在 path 的填充区域内部';
      } else {
        result.textContent += '\n❌ 方法二：点击点在 path 外部';
      }
    });
  </script>

</body>
</html>