3

SVGスタイルの遷移に関する別の質問...:)

今回は、テキスト要素のフォントサイズを変更しようとしています。Chromeでページズームを大きくするまでは問題なく動作します。これを行うと、トランジションの開始時に、正しい結果サイズにトランジションする前に、サイズが元のズームサイズに設定されているように見えます。その結果、大きくなる前に、フォントサイズのフリックが一瞬小さくなります。

デフォルトのズームでは、遷移はスムーズに見えます。他のブラウザではこの問題は発生していないようです。

ブラウザ間でより確実に機能するスタイル設定のトリックを使って、もう一度運を試すことができるかどうか疑問に思っています...

4

2 に答える 2

4

これは、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()

ここでも、ワード クラウドの経験が役立ちました。:)

于 2012-04-13T17:10:20.407 に答える
1

ブラウザーのページのズームは、SVG と組み合わせて使用​​するとバグがあります。のような CSS でズーム レベルを修正できますが* { zoom: 1; }、それはユーザーにとって別の不都合を引き起こします。JavaScript でバグの回避を試みることもできますが、それは大変な作業になると思います。

于 2012-04-13T17:02:04.467 に答える