handles created as <use> tags not working on IE 10 about d3-brush

[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!