6

SVGで4倍のサイズにスケーリングするピクセルアートスタイルの画像があります。ただし、次のコードは画像のピクセルをぼかします。

<image x="0" y="0" width="1024" height="1024"
    image-rendering="optimizeSpeed"
    xlink:href="pixelart.bmp" />

これを解決する属性はありますか？

4

2 に答える 2

6

image-rendering="optimizeSpeed"それが一番近道だと思います。そのプロパティ状態の仕様として、 「高速レンダリングの目標を達成するリサンプリング アルゴリズムを使用する必要があります。ただし、リサンプリング アルゴリズムは少なくとも最近傍リサンプリングと同程度である必要があります」。これは「最近傍」に言及している仕様の唯一のセクションであるため、他に選択肢はないと思います。

私が見つけることができる唯一の他の関連するものはIE9 プロパティ-ms-interpolation-mode:nearest-neighborです。これは (もちろん) IE 固有のものであり、CSS プロパティとしてリストされています (したがって、HTML にのみ適用される可能性があります)。

その属性でアップサイジングした結果、補間ピクセルが表示されるのは、どの OS/ブラウザー/バージョンですか?

また、HTML5 Canvas と SVG の組み合わせを使用して、ピクセルごとに 1 つの SVG で画像を完全に再作成できることに注意してください: http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml<rect>

于 2011-01-04T20:47:52.397 に答える