Chrome textPath click and hover triggered outside

Question

I ran into a problem with Chrome and Safari regarding the textPath element.

If I assign a click or mouseover (or probably any other mouse event) to the textPath element, the event is being triggered outside of the rendered text.

JSFiddle here I'm using the D3 Library

var svg = d3.select('body')
  .append('svg').attr("id", "theSVG")
  .attr( "width" , "100%").attr( "height" , "100%" )
  .attr( "viewBox" , [0,0, window.innerWidth, window.innerHeight] )
  .attr("shape-rendering","geometricPrecision")
  .attr("text-rendering","geometricPrecision"); 

var testPath = svg.append('path').attr('d','M117.80446300769222,286.46257269243245H144.98419522723069Q244.6432133655384,286.46257269243245 344.3022315038461,190.7312863462162T543.6202677804615,94.99999999999994H571.8') 
  .attr('style', 'fill: none; stroke: red; stroke-width: 100')
  .attr('id', 'testPath');

var testText = svg.append('text')
  .append('textPath').attr('id', 'testText')
  .attr('xlink:href', '#testPath')
  .append('tspan').text('this is a test text and a test textpath thingy');

testText.node().addEventListener('mouseover', function (e) {e.target.style.fill = 'blue';});
testText.node().addEventListener('mouseout', function (e) { e.target.style.fill = 'black';});

I added a mouseover/out event to highlight the text when mouseover is triggered. If you hover over the text in Chrome, you can see that even if you go outside (upwards) of the text, it's still highlighted.

Using the Chrome Inspector, it seems the element is actually a rectangle with the text drawn inside it.

Is there a way to make the events only apply to the rendered text and NOT the whole element, as in Firefox/IE?

This works fine in Firefox and Internet Explorer. Thanks!