Kann Svg Hintergrundbild nicht dehnen, wird das Seitenverhältnis beibehalten

Question

Ich benutze Svg als Hintergrundbild und ich möchte es auf 100% 100% gestreckt werden.

Es sieht jedoch so aus, als würden sowohl Chrome als auch firefox ihr bestes geben, um das Seitenverhältnis der svg beizubehalten und stattdessen in der anderen Breite zu verkleinern.

Normale Größe

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

Doppelte Breite

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

Doppel Höhe

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

Wie kann ich das svg gestreckt stattdessen haben?

svg Inhalt:

<?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

Sie

<svg preserveAspectRatio="none"> 

zu Ihrem SVG hinzufügen sollten.

MDN Reference Link

<none>

nicht mit Gewalt gleichmäßige Skalierung. Skalieren Sie den Grafikinhalt des gegebenen Elements ggf. ungleichmäßig, sodass die Bounding Box des Elements exakt mit dem Viewport-Rechteck übereinstimmt.

Answer 2

erkennen, dass dies eine alte Frage, aber ich war mit dieser Fragen hat, so wollte einige weitere Informationen, falls per Post jemand anderes ...

<svg preserveAspectRatio="none"> dieser nur Arbeiten hilft, wenn ein viewBox attr vorgesehen ist, zum Beispiel: <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 1152">

„. preserveAspectRatio gilt nur, wenn ein Wert für viewBox auf demselben Element vorgesehen ist für diese Elemente wird, wenn Attribut viewBox nicht zur Verfügung gestellt wird dann preserveAspectRatio ignoriert“ https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Hoffe das hilft jemand anderem!