放大后在Chrome上转换字体大小 [英] Transition font-size on Chrome after zoom in

问题描述

关于SVG风格转换的另一个问题...：）

Another question about SVG style transitions... :)

这次我试图转换文本元素上的字体大小。它工作正常，直到我增加Chrome页面缩放。一旦我这样做，它似乎在转换开始时，将大小下降到原始缩放大小，然后转换到正确的结果大小。结果是，在增大之前，我看到字体大小轻弹变小了。

This time I'm trying to transition the font-size on a text element. It works fine until I increase the page zoom in Chrome. Once I do that it appears that at the start of the transition it sets the size down to the original zoom size before transitioning to the correct outcome size. The result is that I see the font-size flick smaller for a split second before growing larger.

使用默认缩放，转换看起来平滑。其他浏览器似乎没有这个问题。

With the default zoom the transition looks smooth. Other browsers don't seem to have this issue.

想知道如果我可以尝试我的运气一些风格设置的技巧，将更可靠地在浏览器工作...

Wondering if I can try my luck again with some style-setting trick that will work more reliably across browsers...

推荐答案

这是因为D3的样式转换使用 getComputedStyle 要内插的起始值。有关详细信息，请参见此处。当使用WebKit的整页缩放时，这将为转换返回不同的起始值。这种差异限于某些情况，包括 font-size ，这就是为什么你可能不会在其他地方看到它。

This is happening because D3's style transitions use getComputedStyle to retrieve the starting value to be interpolated. See here for more information. When WebKit's full-page zoom is being used, this will return different starting values for the transition. This disparity is limited to certain cases including font-size, which is why you probably won't see it elsewhere.

.style（font-size，A），通过 .style（font-size）检索不保证返回在使用全页缩放时设置的值 A 。

我在过去使用了以下解决方法：

I have used the following workaround for this in the past:

.styleTween("font-size", function(d) {
  return d3.interpolate(
    this.style.getPropertyValue("font-size"),
    d.size + "px"
  );
});

这将覆盖D3对 getComputedStyle 的使用，直接当前 font-size 样式（并假定已经设置了 font-size $ c> .enter（）选择）。

This overrides D3's use of getComputedStyle and retrieves the current font-size style directly (and assumes there is a font-size already set e.g. in your .enter() selection).

再次，我的文字云经验派上用场。 ：）

Again, my word cloud experience came in handy. :)

这篇关于放大后在Chrome上转换字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！