svg - 如何在保持整个像素的同时缩放 SVG ？

Question

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

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

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

Answer 1

我认为image-rendering="optimizeSpeed"是你能得到的最接近的。如 the specs for that property状态，它“应该使用重采样算法来实现快速渲染的目标，并要求重采样算法至少与最近邻重采样一样好”。由于这是规范中唯一提到“最近邻居”的部分，我认为您没有其他选择。

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

哪个操作系统/浏览器/版本由于使用该属性放大而为您提供插值像素？

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