错误的事件。使用SVG旋转和指针事件的点击目标错误

Question

在SVG较小的环境中，当我使用SVG transform属性的rotate函数的第三参数和pointer-events CSS属性时，DOM捕获的目标是错误的。

例如，在SVG中有两个矩形，当单击它时，我有一个将其转换为红色的功能。我单击第二个矩形的左侧，但第一个矩形已转换。原因是浏览器捕获的event.target错误。

删除pointer-events CSS属性或旋转函数的第3个参数，即可解决问题。

我想知道哪种是这种行为的解释。

实时查看：

window.onload = function(){
  document.querySelectorAll('g > rect').forEach( function(element){
    element.addEventListener('click', function(e) {
      e.target.style.fill = "red";
    });
  });
};

div { 
  pointer-events: all;
}

<div>
<svg height=1000 width=1000>
  <g transform="scale(40)">
    <g>
      <g transform="rotate(180,1.18, 0.5)">
        <g>
          <rect width="1" height="1">
        </g>
        <g transform="translate(1.25, 0)">
          <rect width="1" height="1">
        </g>
      </g>
    </g>
  </g>
</svg>
</div>