SVG 在 Firefox 中使用 <img> 标签进行非均匀缩放答案

【问题标题】：SVG is scaled non-uniformly in Firefox using <img> tagSVG 在 Firefox 中使用 <img> 标签进行非均匀缩放
【发布时间】：2019-05-16 02:12:43
【问题描述】：

我有以下 SVG 文件：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100%" height="19">
    <rect x="0" y="0" width="100%" height="100%" fill="black" />
    <text font-size="13" font-family="monospace" x="3" y="13" fill="#b2b2b2">Hello world</text>
</svg>

如果我直接在 Firefox 中查看该文件，它看起来不错：

但是，如果我使用 <img> 标记将其包含在页面中，它会显得被压扁。

<html>
    <body>
        <img src="screenshot.svg" width="100%">
    </body>
</html>

我希望黑色背景缩放以覆盖整个宽度，同时文本保持未压扁。我已经尝试了我能想到的viewBox 和preserveAspectRatio 的所有排列，但它们似乎都没有达到预期的效果。 Chrome 似乎可以正常显示。

【问题讨论】：

如果您使用px 单位而不是pt 会发生什么？
@ccprog 好问题，但它似乎没有任何效果。我将所有内容都转换为像素以简化问题。
我无法重现该效果（在 Windows/63 和 Linux/60esr 上），但我可以看到 Windows 上的抗锯齿计算的差异很小，具体取决于所使用的字体。浏览器使用什么字体？
这里有一个有趣的观察：如果我使用 Ctrl + 来放大屏幕上的显示，宽度和高度之间的缩放是不均匀的。您是否使用了高密度屏幕，因此 px 值会被预乘？
不要忘记从 html 正文中删除边距。

标签： html firefox svg

【解决方案1】：

在我看来，这应该被标记为错误。似乎发生的情况是，无论是在使用浏览器缩放功能时，还是在由于高 DPI 屏幕导致的预定义缩放时，百分比或视口相关（vw，vh）值都保持在相同的计算像素大小，而 px和其他单位值乘以缩放值。到目前为止，一切顺利。

在 Firefox 中，<img> 宽度和高度值似乎总是导致其内容的缩放不均匀，不保留纵横比，即使对于根据@987654322 通常适合自身在视口中的 SVG 内容也是如此@ 规则。

我看到了两种解决方法；两者都需要明确设置高度。请注意，我已经使用浏览器缩放功能在常规屏幕上进行了测试。我希望它在您的高 DPI 屏幕上也能正常工作。

使用包含 SVG <image> 元素的内联 <svg> 标记将 SVG 图像嵌入 HTML 页面：

<html>
  <body style="margin:0">
    <svg width="100%" height="19px">
      <image width="100%" height="100%" href="screenshot.svg" />
    </svg>
  </body>
</html>

使用 SVG 作为背景图片：

<html>
  <body style="margin:0">
    <div style="background:url(screenshot.svg) left no-repeat;width:100%;height:19px;">
  </body>
</html>

【讨论】：