Geek asks and answers

Change font size in Chrome after zooming

Another question about SVG style transitions ... :)

This time I'm trying to move the font size to a text element. It works fine until I zoom in on the page in Chrome. As soon as I do this, it seems that at the beginning of the transition, it sets the size to the original size of the scaling before moving on to the correct size of the result. As a result, I see that the font size is a fraction of a second smaller before it grows.

With default scaling, the transition looks smooth. Other browsers do not seem to have this problem.

I wonder if I can try my luck again with a style trick that will work more reliably in browsers ...

+3
source share
2

, D3 getComputedStyle . . . 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.:)

+4

​​ SVG. CSS, - * { zoom: 1; }, . JavaScript, , .

+1

More articles:


All Articles