SVG textpath点击半径太高时，font-size低于1px [英] SVG textpath click radius too high when font-size below 1px

问题描述

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

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/.

在那里你可以看到河流的鼠标移动整体上很好。但问题是当字体大小低于 1px （例如河9和河10），它不再正确。

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.

因此，下面的字体大小 1px

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

我想知道为什么它下面的bug是 1px

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?

1. 我可以通过禁用外部半径想要有红色和蓝色标记的都是与事件。红色的应突出显示11号河和蓝色的19号河：

1. 几乎相同问题，但另一种情况。所以这里的蓝色区域也是翻转的高亮当河流的字体大小太低。我要停用此行为：

推荐答案

而不是

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

我现在使用

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; })

在Firefox中，一切都是完美的。当文本不是水平时，Chrome仍然有问题。然后边界框比文本大得多，你可以从问题图片＃2看到。但我认为这是Chrome的错误。

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.

这篇关于SVG textpath点击半径太高时，font-size低于1px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！