3

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

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

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

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

4

2 回答 2

4

这是因为 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())。

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

于 2012-04-13T17:10:20.407 回答
1

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

于 2012-04-13T17:02:04.467 回答