Ich habe ein Pixelart-Bild, das mit SVG auf 4x Größe skalieren soll. Der folgende Code verwischt jedoch die Pixel des Bilds:Wie kann ich ein SVG <image> skalieren, während ganze Pixel beibehalten werden?
<image x="0" y="0" width="1024" height="1024"
image-rendering="optimizeSpeed"
xlink:href="pixelart.bmp" />
Gibt es ein Attribut, das das auflösen wird?
Ich denke, dass image-rendering="optimizeSpeed" ist die nächste, die Sie bekommen können. Als the specs for that property State, es "sollte einen Resampling-Algorithmus verwenden, der das Ziel des schnellen Rendering erreicht, mit der Anforderung, dass der Resampling-Algorithmus mindestens so gut sein soll wie das Nearest-Neighbor-Resampling." Da dies der einzige Abschnitt der Spezifikation ist, der "nächster Nachbar" erwähnt, glaube ich nicht, dass Sie eine andere Option haben. Die einzige andere verwandte Sache, die ich finden kann, ist die IE9 property -ms-interpolation-mode:nearest-neighbor. Dies ist (natürlich) IE-spezifisch und wird als CSS-Eigenschaft aufgelistet (möglicherweise nur für HTML).
Welche OS/Browser/Version gibt Ihnen interpolierte Pixel als Ergebnis der Upsizing mit diesem Attribut?
Beachten Sie auch, dass Sie eine Kombination aus HTML5 Canvas und SVG perfekt verwenden können, um Ihr Bild mit einem SVG <rect> pro Pixel neu erstellen:
http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml
ich es auf Google Chrome bin erleben, mit und ohne dieses Attribut. Momentan hacke ich es, indem ich mein Bild vorher in Farbe skaliere – Eric
Ooh, sieht aus wie 'image-rendering: -moz-crisp-edges;' würde auch den Trick machen. Wo ist die Eigenschaft von Chrome? – Eric
Hier ist die [stackoverflow-Antwort] (http://stackoverflow.com/questions/3900436/image-scaling-by-css-is-there-a-webkit-alternative-for-moz-crisp-edges) über ein Äquivalent für WebKit (zum Zeitpunkt der Antwort gab es kein Äquivalent). – Phrogz