SVG textpath click radius too high when font-size

问题:

I have created some rivers in D3.js and would like to have them clickable. So I created an example jsfiddle.net/kwoxer/5uc17jwr/19/.

There you can see that the mouseover of the rivers are overall fine. But the issue is when the font-size is getting below 1px (e.g. River 9 and River 10) it's not correct anymore. Somehow then the mouseover is buggy and the radius is way too high then.

So below font-size 1px you can actually move the mouse away from the text and the river text is still highlighted.

I would like to know why it's bugging below 1px and how I could fix that. Maybe with disabling the outerRadius if there is some?

Issue examples

1. I would like to have the red and blue marked are with the event. The red one shall highlight the River 11 and the blue one the River 19:

2. It's nearly the same issue but another case. So here the blue color area is also toggling the highlight when the font-size of the river is too low. I would like to disable that behaviour:

回答1:

Instead of

var projection = d3.geo.equirectangular().translate([80, 0]).scale(220000);

I now use

var projection = d3.geo.equirectangular().translate([80, 0]).scale(3000000);

and to resample the size without manually edit each size by hand I use

.attr("font-size", function(d) { return d.properties.size * 11; })

With that in Firefox everything is perfect. Just Chrome has still a problem when the text is not horizontal. Then the bounding box is much bigger then the text as you can see from issue picture #2. But I think this is a bug of Chrome.