放大后在 Chrome 上转换字体大小答案

【问题标题】：Transition font-size on Chrome after zoom in放大后在 Chrome 上转换字体大小
【发布时间】：2012-04-26 01:26:11
【问题描述】：

关于 SVG 样式转换的另一个问题... :)

这次我尝试在文本元素上转换字体大小。在我增加 Chrome 中的页面缩放之前，它工作正常。一旦我这样做，它似乎在过渡开始时将尺寸设置为原始缩放尺寸，然后再过渡到正确的结果尺寸。结果是我看到字体大小在变大之前瞬间变小了。

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

想知道我是否可以通过一些在浏览器中更可靠地工作的样式设置技巧再次尝试我的运气......

【问题讨论】：

【解决方案1】：

发生这种情况是因为 D3 的样式转换使用 getComputedStyle 来检索要插值的起始值。请参阅here 了解更多信息。当使用 WebKit 的整页缩放时，这将为过渡返回不同的起始值。这种差异仅限于某些情况，包括 font-size，这就是为什么您可能不会在其他地方看到它。

事实上，在.style("font-size", A) 之后，通过.style("font-size") 检索并不能保证返回使用整页缩放时设置的值A。

我过去曾为此使用过以下解决方法：

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

这会覆盖 D3 对 getComputedStyle 的使用并直接检索当前的 font-size 样式（并假设已经设置了 font-size，例如在您的 .enter() 选择中）。

我的word cloud 经验再次派上了用场。 :)

【讨论】：

【解决方案2】：

浏览器页面缩放与 SVG 结合使用时存在问题。您可以使用 CSS 修复缩放级别，例如 * { zoom: 1; }，但这会给用户带来其他不便。您可以尝试解决 JavaScript 中的错误，但我认为这将是很多工作。

【讨论】：