Html SVG在Firefox中使用<；img>；标签_Html_Firefox_Svg

Html SVG在Firefox中使用<；img>；标签

html firefox svg

Html SVG在Firefox中使用<；img>；标签,html,firefox,svg,Html,Firefox,Svg,我有以下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

我有以下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中查看该文件，它看起来很好：

如果我使用

我想做的是，黑色背景的比例，以涵盖整个宽度，而文字仍然是未征服。我尝试了我能想到的

viewBox

和

preserveSpectratio

的所有排列，但它们似乎都没有达到预期效果。Chrome似乎显示得很好。

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

在Firefox for

中，宽度和高度值总是会导致其内容的缩放不均匀，无法保留纵横比，即使对于通常根据

PreserveSpectratio

规则适合自己在视口中的SVG内容也是如此

我认为有两种方法可以解决这个问题；两者都需要明确设置高度。请注意，我已经通过使用浏览器缩放功能在常规屏幕上进行了测试。我希望它在高DPI屏幕上也能起到同样的作用

使用包含SVG

元素的内联

标记将SVG图像嵌入HTML页面：

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

将SVG用作背景图像：

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

如果使用

px

单位而不是

pt

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

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