Aby to naprawić w ie9 i nie utknąć z tym. Nie wiem dlaczego, ale powinieneś ustawić width: 100% przez css-rule, ale nie w IMG-tag. Proporcje będą działać magicznie)) pomógł mi, mam nadzieję, że ten post pomoże innym.

Możesz też zajrzeć tutaj: https://gist.github.com/larrybotha/7881691 - jest to kontynuacja tej "historii".

Poprawiono SVG w znacznikach <img> nie skalując w IE9, IE10, IE11

IE9, IE10 i IE11 nie skalują poprawnie plików SVG dodanych ze znacznikami img, Gdy viewBox, width i height atrybuty są określone. Wyświetl ten kod w różnych przeglądarkach.

Wysokość obrazu nie będzie skalowana, gdy obrazy są w pojemnikach węższe niż szerokości obrazu. Można to rozwiązać na dwa sposoby.

Użyj sed w bash, aby usunąć atrybuty szerokości i wysokości w plikach SVG

Zgodnie z tą odpowiedzią na Stackoverflow problem można rozwiązać, usuwając tylko atrybuty width i height.

Ten mały skrypt przeszukuje rekurencyjnie bieżący katalog roboczy w poszukiwaniu plików SVG i usuwa atrybuty kompatybilności między przeglądarkami:

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'

Caveats

Usuwanie szerokości i wysokości atrybuty będą zmuszać obraz do zajmowania pełnej szerokości kontenera w przeglądarkach innych niż IE.

IE10 (inne przeglądarki wymagają testowania) skaluje obrazy do dowolnego rozmiaru - co oznacza, że będziesz musiał dodać width: 100% do CSS, aby te obrazy pasowały do ich kontenerów.

Target IE with CSS

Ponieważ powyższe rozwiązanie i tak wymaga CSS, równie dobrze możemy użyć hacka, aby zachować IE i nie martwić się o konieczność zarządzania każdym pojedynczym SVG plik.

Poniżej znajdują się wszystkie znaczniki img zawierające plik SVG, w IE6+ (tylko IE9+ obsługuje pliki SVG).

/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

Caveats

To celuje w każdy znacznik img zawierający ".svg " w IE9, IE10 i IE11-jeśli nie chcesz tego zachowania na konkretnym obrazku, musisz dodać klasę, aby nadpisać to zachowanie dla tego obrazu.

Spędziłem tygodnie próbując wszelkiego rodzaju rozwiązań, aby móc korzystać z SVG w witrynie, która dostosowuje się do rozmiaru, która działa dla głównych nowoczesnych przeglądarek.

SVG musi być skalowany przy użyciu procentów CSS i zawierać osadzone obrazy bitmapowe.

jedyne rozwiązanie, które znalazłem dla zmiany rozmiaru procentowego w IE, to osadzenie zewnętrznych plików SVG w znaczniku

Istnieją różne rozwiązania do zmiany rozmiaru SVG w IE do ścisłych rozmiarów pikseli, ale żadne z nich działa na rzecz zmiany rozmiaru procentowego.

Stworzyłem niewyczerpujący zestaw testów tutaj.

Jakoś ten scss naprawił mój problem.

ul {
  li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
    img {
      height: 20px;
      margin: 0 10px;
      display: inline-block;
    }
  }
}

Robiłem wyśrodkowaną listę logo dla stopki i miałem problemy z szerokością. Zwykle tworzę inline-block z elementem blokowym wewnątrz niego. Tworzenie elementu inline z elementem inline-block działało dla mnie. Jest to specyficzna implementacja, która pojawiła się u mnie i tak naprawdę nie rozwiązuje każdego błędu, ale mam nadzieję, że pomoże komuś to przeczytać.