Firefox не показывает изображение SVG - PullRequest
Новая
       12

Firefox не показывает изображение SVG

0 голосов
/ 25 января 2020

У меня очень странная проблема с файлом SVG в Firefox. Речь идет о lo go в заголовке на этой странице: dyncheck.de

Отображается корректно во всех браузерах, кроме Firefox. Но только в заголовке страницы. В нижнем колонтитуле он есть даже в Firefox. Его также можно найти правильно в исходном коде, но инспектор говорит мне, что он имеет нулевой размер.

У кого-нибудь есть объяснение этому и, возможно, решение?

Заранее спасибо

1 Ответ

2 голосов
/ 26 января 2020

Как я уже прокомментировал: вам нужно задать ширину вашего изображения в CSS

В результате получается, что изображение заголовка находится в макете flexbox, а изображение svg свернуто до ширины 0 вот так: 

header,footer{border:1px solid; margin:1em;}
header{display:flex;}
<header>
  <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo"></div>
  <div>header</div>
</header>
<footer>
  <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo" style="width: 200px;"></div>
  <div>footer</div>
</footer>

Добавление ширины к изображению решает вашу проблему: 

    header,footer{border:1px solid; margin:1em;}
    header{display:flex;}

    img{width:200px;}
<header>
      <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo"></div>
      <div>header</div>
    </header>
    <footer>
      <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo" style="width: 200px;"></div>
      <div>footer</div>
    </footer>
...