FirefoxとInternet ExplorerでSVGをシャープにする方法

アイコンを表示するために<svg>を使用すると、Google Chromeでは完全に鮮明でシャープに見えます。しかし、FirefoxまたはInternet Explorerでsvgを開くとすぐに、アイコンがぼやけて見えます。FirefoxとInternet ExplorerでSVGをシャープにする方法

これらのブラウザは、アイコンを半ピクセルにレンダリングするようです。 Google Chromeだけがここでうまくやっています。

すべてのブラウザで鮮明なSVGのアイコンを取得するための最良の方法は何ですか？（fillを使用してアイコンを色付けしたい：...背景画像またはピクセルグラフィックスを使用してもオプションはありません）

これまでに試したこと： CSS属性shape-renderingを適用しました。しかし、これはあまりにも鮮明で鋭いです。

<svg width="16px" height="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> 
 
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path> 
 
</svg> 
 
<svg width="32px" height="32px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> 
 
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path> 
 
</svg> 
 

 
<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;"> 
 
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
 
\t <rect y="19" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="3" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="11" fill="#231F20" width="24" height="2"></rect> 
 
</svg> 
 
</i></button> 
 

 

 
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
 
\t <rect y="19" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="3" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="11" fill="#231F20" width="24" height="2"></rect> 
 
</svg>

出典

2016-02-23 Rebecca

各座標に0.5を加えてください。http://cairographics.org/FAQ/#sharp_lines –

あなたの質問に含まれているスニペットがあなたのスクリーンショットと一致しません。 –

@RobertLongsonスニペット*のこれらの "ファイル"アイコンは、ピクセルが正しく整列されているため、シャープである必要があります。 –

ハック：

svg { 
transform: translateZ(0); 
}

どうIEについて：SVGコンテナが（画素ライン上にない正確に）31.5のような座標に配置可能な理由、IEはこのコンテナでSVGを同じように描画されます、ピクセルラインオフビット。

出典

2016-03-03 08:13:46

ありがとうございます！この回避策は、魅力のように働いた – Rebecca

あなたは歓迎です）なぜ私は完全に理解している場合。私はそれがどのように動作するかを理解すれば、私は答えを明確にします –

使用幅と高さのための非常に大きな値。

現在、24 x 16ピクセルの画像を指定してフルスクリーンサイズに拡大しています。 SVGは無制限に拡張可能である必要があります。そのため一部のブラウザは一部のテレビのように、他のブラウザよりもピクセル補間が優れています。 Firefox用

出典

2016-02-27 04:12:19

など）。多くの例があります：www.irony-maiden.com/svg Arif –

FirefoxとInternet ExplorerでSVGをシャープにする方法

答えて

関連する問題