HTML5/SVG：preserveAspectRatio「なし」はFirefoxの

Question

で作業していないではない私は、背景画像のHTMLのdiv要素としてSVG画像を使用したいと思います。 SVGは埋め込まれたdivに応じて伸びるはずです。これはGoogle Chromeでもうまくいきますが、Firefoxではサイズ変更時にSVGが幅と高さの比率に固執して伸びません。私はpreserverAspectRatio = "none"を使用しています。

SVGは、次のようになりますせずに伸ばします、私はdiv要素やSVG画像の幅/高さを変更することができますChromeの場合

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

：

<?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は次のようになります元の幅/高さの比率を考慮します。この動作は意図されています。 Firefoxでは、サイズが変更され、元の比率が保持されます。私はこれをどう変えることができるか知っていますか？おかげ

Answer 1

は（それは私のために動作します）あなたの「スタイル」divにbackground-size: 100% 100%;を追加してみてください。