handles created as <use> tags not working on IE 10

[jonasgrilleres]

When I create handles with a <use> tag (.append("use")) there is an error on IE10 when I try to drag and drop the handle.

The error happens here (brush.js, 296):

type = event.target.__data__.type,

The object contained in event.target is slightly different on IE than on other browsers. It contains an extra level called correspondingUseElement This seems to be related to how IE and the other browsers implement SVG Elements.

This solves the problem, but I am not super satisfied with this solution:

type = typeof event.target.__data__ !== "undefined" ? event.target.__data__.type : event.target.correspondingUseElement.__data__.type,

Can someone explain me why there is this difference on IE and if is there another way to get it to work on IE?

Thanks

[jonasgrilleres]

I found a similar issue here

For each SVGUseElement, the SVG DOM maintains a shadow tree (the "instance tree") of objects of type SVGElementInstance. The SVGUseElement has an instanceRoot property that points to the SVGElementInstance at the root of the shadow tree. The SVGElementInstance has a a correspondingUseElement property that points back to the SVGUseElement. These two properties allow you to jump between the main DOM tree and the shadow tree.

I tested your example in both Internet Explorer and Chrome. In Chrome, the 'click' event is passed the SVGUseElement which jQuery then uses to walk up the main DOM tree to find the desired 'div' element. In Internet Exploer, the 'click' event is passed the SVGElementInstance which jQuery then uses to walk up the shadow tree. Since the shadow tree is not part of the main DOM tree, jQuery never finds the desired 'div' element.

You could work around this issue by checking the target. If target is a SVGElementInstance then pass target.correspondingUseElement to jQuery else pass target to jQuery. You could check for SVGELementInstance by testing for correspondingUseElement property or by testing toString() equals "[object SVGElementInstance]".

Solved my problem by not using <use> tag!