JavaScript和SVG:如何增加onClick事件的可点击区域？

<svg width="200" height="200">
  <rect id="clickable-area" x="0" y="0" width="200" height="200" fill-opacity="0" />
  <circle id="clickable-element" cx="100" cy="100" r="50" fill="blue" />
</svg>

<script>
  var clickableArea = document.getElementById("clickable-area");
  var clickableElement = document.getElementById("clickable-element");

  clickableArea.addEventListener("click", function() {
    // 在这里编写点击矩形区域的事件处理逻辑
    console.log("点击了可点击区域");
  });

  clickableElement.addEventListener("click", function() {
    // 在这里编写点击图形元素的事件处理逻辑
    console.log("点击了图形元素");
  });
</script>