svgの背景画像を伸ばすことはできません。アスペクト比は保存されます

Question

私は背景画像としてsvgを使用しています。これを100％100％に伸ばしたいと思います。

しかし、ChromeとFirefoxの両方がsvgの縦横比を保持し、代わりに他の幅で縮小するように最善を尽くしているようです。

ノーマルサイズ

div 
{ 
    background: url(image.svg) no-repeat; 
    background-size: 100% 100%; 
    width: 14rem; 
    height: 4rem; 
} 

ダブル幅

div 
{ 
    background: url(image.svg) no-repeat; 
    background-size: 100% 100%; 
    width: 28rem; 
    height: 4rem; 
} 

ダブル高さ

div 
{ 
    background: url(image.svg) no-repeat; 
    background-size: 100% 100%; 
    width: 14rem; 
    height: 8rem; 
} 

は、どのように私は代わりにそのSVGは伸びていることができますか？

SVG内容：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 371.7 102.8" enable-background="new 0 0 371.7 102.8" xml:space="preserve"> 
<polygon fill="#EF9104" points="370.4,100.5 0,100.5 0,0 269.4,0 "/> 
</svg> 

Answer 1

あなたのSVGに

<svg preserveAspectRatio="none"> 

を追加する必要があります。

MDN Reference Link

<none>

均一なスケーリングを強制しないでください。要素の境界ボックスがビューポート矩形と正確に一致するように、必要に応じて、指定された要素のグラフィックコンテンツを不均一に拡大縮小します。

Answer 2

これは古い質問ですが、私はこれで問題を抱えていたが、そうするときビューボックスのattrそれは誰...

<svg preserveAspectRatio="none">こののみ作品を助けた場合にいくつかのより詳細な情報を投稿したかったことを理解します例えば、提供され <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 1152">

「値は同じ要素にビューボックスのために提供されている場合preserveAspectRatioにのみ適用される属性ビューボックスが用意されていない場合、これらの要素については、その後、preserveAspectRatioは無視されます。」 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

これは他の人に役立つことを願っています。