Question

我想使用SVG图像作为背景图像html div元素。 SVG应相应于它所嵌入的div进行拉伸。这在谷歌浏览器中很有用，但在Firefox中，SVG在调整大小时会坚持其宽高比，并且不会拉伸。我正在使用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图像会在不考虑原始宽高比的情况下进行拉伸。此行为是有意的。在Firefox中，它只是调整大小并保持其原始比例。你知道我怎么能改变这个吗？感谢

Answer 1

尝试将background-size: 100% 100%;添加到您的“风格”div（它适用于我）。

HTML5 / SVG：preserveAspectRatio“none”在Firefox中不起作用

1 个答案: