[Edge/IE11] error with svg use tag

[Aratramba]

consider this example:

<svg hidden style="display: none;">
  <defs>
    <circle id="Circle" style="fill: red" r="10"/>
  </defs>
</svg>

<button class="js-button">
  <svg width="100" height="100">
      <use x="10" y="10" xlink:href="#Circle" /> 
  </svg>
</button>

The first svg is used as a spritesheet, and the svg inside the button uses that spritesheet to show the circle.

delegate.bind(document, 'svg', 'click', function (e) {
    console.log(e.delegateTarget);
});

Expected behaviour:

When I click the red circle, I expect a console.log.

Actual behavior:

When I click the red circle, there is no console.log.

Possible fix:

This has probably to do with the shadow tree inside the svg.

when I change var target = e.target || e.srcElement; to var target = e.target.correspondingUseElement || e.target || e.srcElement; it works as expected.

Browsers

seen this at Edge / IE11. Works fine as is in Chrome / Firefox.

not working example: https://jsfiddle.net/35n6f17p/ working example: https://jsfiddle.net/szrpv7bn/