如何缩放 SVG同时保持整个像素？
我有一个像素艺术风格的图像，打算使用 SVG 缩放到 4 倍大小。但是，以下代码模糊了图像的像素：
<image x="0" y="0" width="1024" height="1024"
image-rendering="optimizeSpeed"
xlink:href="pixelart.bmp" />
是否有某些属性可以解决此问题？
I have a pixelart-style image which intend to scale to 4x size with SVG. However, the following code blurs the pixels of the image:
<image x="0" y="0" width="1024" height="1024"
image-rendering="optimizeSpeed"
xlink:href="pixelart.bmp" />
Is there some attribute which will resolve this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为
image-rendering="optimizeSpeed"是您可以获得的最接近的结果。正如该属性的规范所述，它“应该使用一种实现快速渲染目标的重采样算法，要求重采样算法至少与最近邻重采样一样好。”因为这是规范中唯一提到“最近邻”的部分，我认为你没有其他选择。我能找到的唯一相关的东西是 IE9 属性 <代码>-ms-interpolation-mode:最近邻。这是（当然）IE 特定的，并被列为 CSS 属性（因此可能仅适用于 HTML）。
哪个操作系统/浏览器/版本为您提供了插值像素，作为使用该属性进行放大的结果？
另请注意，您可以结合使用 HTML5 Canvas 和 SVG，通过每个像素一个 SVG
http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml
I think that
image-rendering="optimizeSpeed"is the closest you can get. As the specs for that property state, it "should use a resampling algorithm which achieves the goal of fast rendering, with the requirement that the resampling algorithm shall be at least as good as nearest neighbor resampling." As this is the only section of the spec that mentions "nearest neighbor", I don't think you have any other option.The only other related thing I can find is the IE9 property
-ms-interpolation-mode:nearest-neighbor. This is (of course) IE specific, and is listed as a CSS property (so possibly only applicable to HTML).Which OS/browser/version is giving you interpolated pixels as a result of upsizing with that attribute?
Also, note that you can use a combination of HTML5 Canvas and SVG to perfectly recreate your image with one SVG
<rect>per pixel:http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml
CSS 值图像渲染：像素化；所以：
这是通过阅读上面“已接受”答案中的答案链接得出的。截至撰写本文时，它还不是官方的，仍然是 CSS4 的“建议”，但 Chrome 似乎已经支持了。
CSS value image-rendering:pixelated; so:
This is from reading through the answer link above, in the "accepted" answer. It is not official as of time of writing, still "Proposed" for CSS4, but appears to be supported by Chrome already.