3

d3 と SVG を使用して一連の四角形を表示するチャート ライブラリに取り組んできました。データセットは、特定の領域に表示される四角形の数を管理します。ほとんどの場合、数学はきれいに機能しません。つまり、四角形が整数で開始および終了しないことを意味します。Firefox、Chrome、および Safari はすべて、長方形をアンチエイリアシングすることでこの不測の事態に対処しています。IE は、最も近いピクセル値に丸めているように見え、rect 要素のアンチエイリアスを拒否します。形状レンダリングなどを変更しようとしましたが、役に立ちませんでした。

以下は、IE10 と最新の Chrome リリースの同じデータを並べて比較したものです。

IE10:

ここに画像の説明を入力

クロム:

ここに画像の説明を入力

SVG マークアップの構造の変更を伴わない、これに対する修正を知っている人はいますか? 要素自体を変更するよりも、CSS プロパティまたはタグ属性を設定することをお勧めします。それを除けば、この決定の根拠を説明しているマイクロソフトのドキュメントを見た人はいますか? 今まで出番はありませんでした。

4

1 に答える 1

0

IE はシェイプ レンダリング プロパティを気にしていないようですが、小さな回転変換を指定することで、アンチエイリアス シェイプを強制できることがわかりました。

svg {
    transform: rotate(.00001deg); /* hack to force anti-aliasing in IE */
}

IE11でテスト済み。

于 2015-06-26T13:21:57.827 に答える