两层svg的后一层没有收到点击事件

Question

我尝试在HTML中创建许多覆盖每个svg的svg。我想处理每层svg图像上的点击事件。有可能吗？

svg {
  position: absolute;
}

<div>
  <svg viewBox="0 0 400 400" onCLick="console.log('1')">
    <circle r="100" cx="100" cy="100" fill="#CCCCCC"></circle>
  </svg>
  <svg viewBox="0 0 400 400" onCLick="console.log('2')">
    <circle r="100" cx="200" cy="200" fill="#DDDDDD"></circle>
  </svg>
</div>

观看演示https://jsfiddle.net/etmy35y3/会更容易 我希望在两个svg元素上都收到一个click事件，并在控制台上写下1和2。

如何在两个元素上接收事件？

我的问题是关于HTML网页上的多个svg元素