当字体大小低于 1px 时，SVG 文本路径点击半径太高

SVG textpath click radius too high when font-size below 1px

我在 D3.js 中创建了一些 河流 并希望它们 可点击 。所以我创建了一个示例 jsfiddle.net/kwoxer/5uc17jwr/19/.

你可以看到河流的鼠标悬停总体上很好。但问题是当字体大小低于 1px（例如 River 9 和 River 10）时，它就不再正确了。不知何故，鼠标悬停有问题，半径太高了。

所以低于字体大小 1px 你实际上可以将鼠标从文本上移开，河流文本仍然突出显示。

我想知道为什么它会在 1px 以下出现故障以及我该如何解决这个问题。如果有的话，也许可以禁用 outerRadius？

问题示例

  1. 我希望红色和蓝色标记与活动有关。红色的应突出显示 River 11，蓝色的应突出显示 River 19：

  1. 这几乎是同一个问题，但又是另外一个案例。因此，当河流的字体太小时，蓝色区域也会切换高亮显示。我想禁用该行为：

而不是

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

我现在用

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

我使用

无需手动编辑每个尺寸即可重新采样尺寸 
.attr("font-size", function(d) { return d.properties.size * 11; })

在 Firefox 中，一切都是完美的。只是 Chrome 在文本不是水平的时候仍然有问题。然后边界框比文本大得多，正如您从问题图片 #2 中看到的那样。但我认为这是 Chrome.

的错误