Блог

Главная - Вопросы по программированию - svg-файл не отображается в элементе управления img

svg-файл не отображается в элементе управления img

#html #css #angular #twitter-bootstrap #svg

#HTML #css #угловой #twitter-bootstrap #svg

Вопрос:

Я пытаюсь показать SVG файл в img элементе управления, angular10 но он не отображается. Если я изменю файл, чтобы jpg он работал для того же элемента управления. У меня есть img контроль внутри nav панели.

Это мой код вместе с css 

 <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a style="padding-top: 0px;" class="navbar-brand" href="#"><img  class="img-responsive" width="90px" height="35px"  src="/assets/Plogo.svg"> </a>
  <button
    class="navbar-toggler"
    type="button"
    aria-label="Toggle navigation">
    
  <span class="navbar-toggler-icon"></span>
  </button>

  <div  class="collapse navbar-collapse" id="navbarCollapse">
  </div>
</nav>

.nav-link:hover {
  transition: all 0.4s;
}

.nav-link-collapse:after {
  float: right;
  content: 'f067';
  font-family: 'FontAwesome';
}

.nav-link-show:after {
  float: right;
  content: 'f068';
  font-family: 'FontAwesome';
}

.nav-item ul.nav-second-level {
  padding-left: 0;
}

.nav-item ul.nav-second-level > .nav-item {
  padding-left: 20px;
}

.navbar-expand-lg .sidenav {
  flex-direction: column;
}

Как Plogo.svg выглядит файл

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="439" viewBox="0 0 900 439">
  <image width="900" height="439" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAG3CAYAAADsP5sRAAAJwElEQVR4nO3XQQEAIACEsNP5ErkJggg=="/>
</svg>

Комментарии:

1. Какова разметка Plogo.svg?

2. @RobertLongson — в моем svg файле так много текста. Я только что добавил его уменьшенный образец. Пожалуйста, проверьте обновленный вопрос.

3. Попробуйте это с другим SVG-файлом и посмотрите, работает ли он.

4. @MoustafaZaki — Я пробовал с другим svg, он работает.

5. @DearComrade Итак, проблема в файле plogo.svg убедитесь, что файл является допустимым svg.

Ответ №1:

Мой svg файл был неправильным. Я использовал другой svg , и он работал.