HTML5/SVG : preserveAspectRatio "none" not working in Firefox

Question

我想使用 SVG 图像作为背景图像 html div 元素。 SVG 应该根据它嵌入的 div 进行拉伸(stretch)。这在 Google Chrome 中运行良好，但在 Firefox 中，SVG 在调整大小时保持其宽度/高度比并且不会被拉伸(stretch)。我正在使用 preserverAspectRatio = "none"。

SVG 看起来像这样:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1" preserveAspectRatio="none" viewBox="0 0 180 95">
<g
 id="layer1">
<path
   d="m 1.0714286,31.469326 140.0000014,0 0,-30.0000009 30,40.0000009 -30,40 0,-30 -140.0000014,0 z"
   id="path3015"
   style="fill:#4f81bd; fill-opacity:1; stroke:#385d8a; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1" />
</g>
</svg>

HTML 看起来像这样:

<div style="
      width: 250px; 
      height: 200px; 
      background-image:url(file.svg); 
      background-repeat:no-repeat;">
          test
 </div>

在 Chrome 中，我可以更改 div 元素的宽度/高度，并且 SVG 图像会在不考虑原始宽度/高度比的情况下被拉伸(stretch)。此行为是有意的。在 Firefox 中，它只是调整大小并保持其原始比例。你知道我怎么能改变这个吗？谢谢

Answer 1

尝试将 background-size: 100% 100%; 添加到您的“样式”div(对我有用)。