如何在保持整个像素的同时缩放SVG <image>？

Question

我有一个pixelart风格的图像,打算用SVG缩放到4倍大小.但是,以下代码模糊了图像的像素:

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

是否有一些属性可以解决这个问题？

Answer 1

我认为这image-rendering="optimizeSpeed"是你能得到的最接近的.作为该属性状态的规范,它"应该使用重新采样算法,该算法实现了快速渲染的目标,同时要求重采样算法至少应与最近邻居重采样一样好." 由于这是规范中提到"最近邻居"的唯一部分,我认为你没有任何其他选择.

我能找到的唯一其他相关的东西是IE9属性-ms-interpolation-mode:nearest-neighbor.这当然是IE特定的,并且被列为CSS属性(因此可能仅适用于HTML).

由于使用该属性进行升级,哪个操作系统/浏览器/版本为您提供了插值像素？

此外,请注意,您可以使用HTML5 Canvas和SVG的组合,以<rect>每个像素一个SVG完美地重新创建您的图像:http:
//phrogz.net/tmp/canvas_image_zoom_svg.xhtml