html - 停止SVGZ内部的自动图像平滑

我在HTML页面上使用SVGZ图像来调整大小。这些SVGZ图像包含PNG，这些PNG已以我想保留的特定方式（像素化及全部）进行了放大。 Firefox正确显示了这一点（我在Inkscape中设计的方式）：



当Chrome浏览器“有帮助”自动平滑所有内容时：



我正在教一门课程，并且试图显示如何在连续遍历中创建图像数据。我想要像素化，因为这就是数据。实际上，SVGZ中的PNG包含属性style="image-rendering:optimizeSpeed"。我希望Chrome能够认识到并尊重它。

（请注意，我已经尝试过CSS image-rendering: pixelated;技巧。如果直接显示PNG，我敢肯定那会很好用，但这不是我正在做的事情。）

最佳答案

在Chrome中为我工作：

<svg width="100" height="100">
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=" width="100px" height="100px"/>
</svg>


<svg width="100" height="100">
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=" width="100px" height="100px" style="image-rendering: pixelated"/>
</svg>

关于html - 停止SVGZ内部的自动图像平滑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50184674/