Nie można rozciągnąć obrazu w tle svg, proporcje zostaną zachowane

Question

Używam svg jako obrazu tła i chcę go rozciągnąć do 100% 100%.

Wygląda jednak na to, że zarówno Chrome, jak i Firefox robią wszystko, aby zachować proporcje svg, a zamiast tego zmniejszać je na drugiej szerokości.

normalny rozmiar

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

podwójnej szerokości

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

dwukrotnie wysokość

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

Jak mogę się że zamiast SVG rozciągnięta?

zawartość 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

należy dodać

<svg preserveAspectRatio="none"> 

do formatu SVG.

MDN Reference Link

<none>

Nie zmuszaj równomierne skalowanie. Skaluj zawartość graficzną danego elementu nierównomiernie, jeśli to konieczne, tak aby ramka prostokąta elementu dokładnie pasowała do prostokąta rzutni.

Answer 2

Doceń, że jest to stare pytanie, ale miałem problemy z tym tak chciał zakładać jakiś dodatkowych informacji w przypadku, gdy ktoś inny pomaga ...

<svg preserveAspectRatio="none"> tego tylko prac gdy atr viewBox jest, na przykład: <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 1152">

. „preserveaspectratio stosuje się tylko wtedy, gdy wartość została przewidziana viewBox tego samego elementu dla tych elementów, jeśli atrybut viewBox nie jest, wtedy preserveaspectratio jest ignorowany” https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Mam nadzieję, że to pomoże komuś innemu!