Неправильный event.target при клике с поворотом SVG и указателем-событиями

Question

В среде с SVG smalls, когда я использую 3-й параметр функции rotate свойства SVG-преобразования и свойства CSS pointer-events, цель поймана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>