HTML5/SVG:preserveAspectRatio"none"在Firefox中不起作用

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(它适合我).