svg - 放大后在 Chrome 上转换字体大小

Question

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

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

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

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

score 4 · Accepted Answer

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

事实上， after .style("font-size", A)，检索 via.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()）。

再次，我的词云经验派上了用场。:)

score 1 · Accepted Answer

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

2 回答 2