ストレッチSVG背景イメージ？

Question

これは、PNG形式の背景画像をストレッチするのは簡単です：

.stretched-logo-bg { 
    background: url("../img/curve.svg") center center no-repeat; 
    background-size: 100% 100%; 
} 

は、それが伸び得ることはありませんけれども、これはSVGの背景では動作しません

.stretched-logo-bg { 
    background: url("../img/curve.png") center center no-repeat; 
    background-size: 100% 100%; 
} 

、それはその縦横比を維持し、ちょうどますセンター。

は、少なくともクロム52

Answer 1

あなたは、あなたがその例を行うためにSVG fragment identifierを使用することができます表示されているSVGのpreserveAspectRatioをオーバーライドする必要がある場合

.stretched-logo-bg { 
    background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") center center no-repeat; 
    background-size: 100% 100%; 
} 

Answer 2

で私はあなたがPNGファイルでできるように歪ませるSVGを作ることができることを信じていません。

しかし、最新のブラウザをほとんどサポートしている場合は、preserveAspectRatio="none"属性をSVGタグに追加できます。例えば

：

<svg version="1.1" preserveAspectRatio="none" .. etc`