illiatovpeko
@illiatovpeko
Занимаюсь самообразованием в области WebDev

Почему логотип Не отображается в IE и Edge?

Прошёлся по докам (и в caniuse глянул) на предмет НЕподдержки отдельными браузерами, но то, на что я грешил, поддерживается. Может быть я не там или не на то смотрю?!
В общем, логотип является ссылкой, со свойством background: url ...

<a class="logo" href="/"></a>

.logo {
    width: 194px;
    height: 60px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' …376 6.263 6.263 0 0 0 3.432 5.528c.097.046.191.093.287.137z'/%3E%3C/svg%3E) no-repeat;
    background-size: contain;
}
  • Вопрос задан
  • 101 просмотр
Пригласить эксперта
Ответы на вопрос 2
@sriver
js newbie
По-моему оно не должно отображаться и в нормальных браузерах, если не задать ему стиль display: block;
Ответ написан
sniggering_deus
@sniggering_deus
Mother is a god in the eyes of a child.
Ну раз так:


1 - работа НЕ моя: мне лишь нужно устранить проблемы. 2 - не буду давать линк на сайт, но в хроме у меня всё работает.


Тогда я дам инструкцию, делайте сами.

Открываете страницу сайта где у вас отображается это лого или что у вас там. Далее смотрите CSS свойства этого селектора через инструменты разработчика и видите похожую картину:

5e7d1ae4712c2974402640.png

Правым кликом по "ссылке на изображение" открывается контекстное меню:

5e7d1b0272ae9794326951.png

После открытия меню, второй по списку должна быть вкладка: Open in new tab. Нажимаете на неё и переходите на новую страницу, где отображается лого(изображение SVG). Копируете исходный код страницы, там код SVG должен быть, примерно выглядит так:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.06 241.06'><defs/><path fill='#030104' d='M239.531 90.719V43.456h-22.894v12.88h-8.313V32.701C208.324 14.714 195.347 0 179.485 0H60.46C44.598 0 31.621 14.714 31.621 32.701V56.336h-7.198v-12.88H1.529v47.263h22.895v-12.41h7.198v18.188c-9.046 3.689-15.419 12.618-15.419 23.02 0 10.41 6.374 19.337 15.419 23.025v24.299c.886 15.988 5.751 23.338 13.385 23.904H55.99l-.021.99v25.463c0 13.129 9.468 23.862 21.047 23.862h88.835c11.58 0 21.047-10.733 21.047-23.862v-25.463l-.021-.99h9.204c7.551-.102 11.51-4.809 12.043-22.858v-26.714c9.046-3.69 15.42-12.618 15.42-23.027 0-10.402-6.374-19.33-15.42-23.019V78.31h8.514v12.41l22.893-.001zM31.62 132.313c-4.983-.713-8.858-6.167-8.858-12.796 0-6.624 3.875-12.084 8.858-12.791v25.587zm43.623-31.511c-15.427-1.938-18.182-11.806-18.265-12.098 1.294 1.654 37.629 4.229 37.629 4.229s-3.702 9.814-19.364 7.869zm84.019 112.803c-6.437 5.62-14.908.484-21.545-2.865-1.612-.81-3.129-1.516-4.471-1.945-6.887-2.173-26.764 1.634-36.176 6.839-14.728 8.146-21.462-1.164-19.434-5.959 0 0 2.159-7.074 19.42-9.198.754-.097 1.543-.18 2.354-.264 19.434-1.729 35.717-24.125 35.717-24.125s15.988-12.659 22.252 3.045c2.166 5.433 4.021 10.409 5.169 14.88l-6.283-.18-2.451-8.402-1.571.18-.705 8.561h-2.969l-1.57-8.208-1.752-.705h-.015v.214l-.013.166v.098l-.014.228v.118l-.008.124v.152l-.014.132v.166l-.014.159v.167h-.014v.172l-.015.181v.173h-.01v.187h-.014v.193l-.015.188v.206h-.015v.201h-.013v.2h-.015v.208h-.014v.201h-.014v.2h-.014v.221h-.014v.201h-.015v.201h-.013v.223h-.015l-.015.2-.014.2-.014.207-.014.201h-.014v.207h-.008l-.013.201-.015.188-.014.193h-.014l-.014.188-.014.18-.015.172h-.013l-.015.182-.015.158h-.013l-.015.166-.014.159-.027.139-.014.146-.027.125-.015.117h-.015l-.014.125-.027.111-.007.089-.027.083-.028.082-.014.07-.027.049-.027.041-.014.028-.029.026h-6.506l.182 2.982 15.225-.69 2.457 5.599 2.264-.707.174-5.065h4.727l.18-.015.002.001c1.564 7.341.914 13.176-3.827 17.328zm4.049-113.316c-15.663 1.945-19.365-7.868-19.365-7.868s36.335-2.575 37.629-4.229c-.084.291-2.838 10.16-18.264 12.097zm53.672 17.856c0 6.631-3.877 12.084-8.859 12.797v-25.586c4.982.705 8.859 6.167 8.859 12.789z'/></svg>


Затем идёте на этот сайт, находите окошко: Вставьте код SVG и вставляете в это окошко скопированное ранее SVG и забираете из окошка: CSS для фона - готовый код для вставки. Выглядит примерно вот так:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.06 241.06'%3E%3Cdefs/%3E%3Cpath fill='%23030104' d='M239.531 90.719V43.456h-22.894v12.88h-8.313V32.701C208.324 14.714 195.347 0 179.485 0H60.46C44.598 0 31.621 14.714 31.621 32.701V56.336h-7.198v-12.88H1.529v47.263h22.895v-12.41h7.198v18.188c-9.046 3.689-15.419 12.618-15.419 23.02 0 10.41 6.374 19.337 15.419 23.025v24.299c.886 15.988 5.751 23.338 13.385 23.904H55.99l-.021.99v25.463c0 13.129 9.468 23.862 21.047 23.862h88.835c11.58 0 21.047-10.733 21.047-23.862v-25.463l-.021-.99h9.204c7.551-.102 11.51-4.809 12.043-22.858v-26.714c9.046-3.69 15.42-12.618 15.42-23.027 0-10.402-6.374-19.33-15.42-23.019V78.31h8.514v12.41l22.893-.001zM31.62 132.313c-4.983-.713-8.858-6.167-8.858-12.796 0-6.624 3.875-12.084 8.858-12.791v25.587zm43.623-31.511c-15.427-1.938-18.182-11.806-18.265-12.098 1.294 1.654 37.629 4.229 37.629 4.229s-3.702 9.814-19.364 7.869zm84.019 112.803c-6.437 5.62-14.908.484-21.545-2.865-1.612-.81-3.129-1.516-4.471-1.945-6.887-2.173-26.764 1.634-36.176 6.839-14.728 8.146-21.462-1.164-19.434-5.959 0 0 2.159-7.074 19.42-9.198.754-.097 1.543-.18 2.354-.264 19.434-1.729 35.717-24.125 35.717-24.125s15.988-12.659 22.252 3.045c2.166 5.433 4.021 10.409 5.169 14.88l-6.283-.18-2.451-8.402-1.571.18-.705 8.561h-2.969l-1.57-8.208-1.752-.705h-.015v.214l-.013.166v.098l-.014.228v.118l-.008.124v.152l-.014.132v.166l-.014.159v.167h-.014v.172l-.015.181v.173h-.01v.187h-.014v.193l-.015.188v.206h-.015v.201h-.013v.2h-.015v.208h-.014v.201h-.014v.2h-.014v.221h-.014v.201h-.015v.201h-.013v.223h-.015l-.015.2-.014.2-.014.207-.014.201h-.014v.207h-.008l-.013.201-.015.188-.014.193h-.014l-.014.188-.014.18-.015.172h-.013l-.015.182-.015.158h-.013l-.015.166-.014.159-.027.139-.014.146-.027.125-.015.117h-.015l-.014.125-.027.111-.007.089-.027.083-.028.082-.014.07-.027.049-.027.041-.014.028-.029.026h-6.506l.182 2.982 15.225-.69 2.457 5.599 2.264-.707.174-5.065h4.727l.18-.015.002.001c1.564 7.341.914 13.176-3.827 17.328zm4.049-113.316c-15.663 1.945-19.365-7.868-19.365-7.868s36.335-2.575 37.629-4.229c-.084.291-2.838 10.16-18.264 12.097zm53.672 17.856c0 6.631-3.877 12.084-8.859 12.797v-25.586c4.982.705 8.859 6.167 8.859 12.789z'/%3E%3C/svg%3E");


Затем вставляете полученный код вот сюда:

.logo {
       width: 194px;
       height: 60px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      display: block;
      /*  ВОТ СЮДА ВСТАВЛЯЕТЕ КОД */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
}


Пример:

.logo {
    width: 194px;
    height: 60px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      display: block;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.06 241.06'%3E%3Cdefs/%3E%3Cpath fill='%23030104' d='M239.531 90.719V43.456h-22.894v12.88h-8.313V32.701C208.324 14.714 195.347 0 179.485 0H60.46C44.598 0 31.621 14.714 31.621 32.701V56.336h-7.198v-12.88H1.529v47.263h22.895v-12.41h7.198v18.188c-9.046 3.689-15.419 12.618-15.419 23.02 0 10.41 6.374 19.337 15.419 23.025v24.299c.886 15.988 5.751 23.338 13.385 23.904H55.99l-.021.99v25.463c0 13.129 9.468 23.862 21.047 23.862h88.835c11.58 0 21.047-10.733 21.047-23.862v-25.463l-.021-.99h9.204c7.551-.102 11.51-4.809 12.043-22.858v-26.714c9.046-3.69 15.42-12.618 15.42-23.027 0-10.402-6.374-19.33-15.42-23.019V78.31h8.514v12.41l22.893-.001zM31.62 132.313c-4.983-.713-8.858-6.167-8.858-12.796 0-6.624 3.875-12.084 8.858-12.791v25.587zm43.623-31.511c-15.427-1.938-18.182-11.806-18.265-12.098 1.294 1.654 37.629 4.229 37.629 4.229s-3.702 9.814-19.364 7.869zm84.019 112.803c-6.437 5.62-14.908.484-21.545-2.865-1.612-.81-3.129-1.516-4.471-1.945-6.887-2.173-26.764 1.634-36.176 6.839-14.728 8.146-21.462-1.164-19.434-5.959 0 0 2.159-7.074 19.42-9.198.754-.097 1.543-.18 2.354-.264 19.434-1.729 35.717-24.125 35.717-24.125s15.988-12.659 22.252 3.045c2.166 5.433 4.021 10.409 5.169 14.88l-6.283-.18-2.451-8.402-1.571.18-.705 8.561h-2.969l-1.57-8.208-1.752-.705h-.015v.214l-.013.166v.098l-.014.228v.118l-.008.124v.152l-.014.132v.166l-.014.159v.167h-.014v.172l-.015.181v.173h-.01v.187h-.014v.193l-.015.188v.206h-.015v.201h-.013v.2h-.015v.208h-.014v.201h-.014v.2h-.014v.221h-.014v.201h-.015v.201h-.013v.223h-.015l-.015.2-.014.2-.014.207-.014.201h-.014v.207h-.008l-.013.201-.015.188-.014.193h-.014l-.014.188-.014.18-.015.172h-.013l-.015.182-.015.158h-.013l-.015.166-.014.159-.027.139-.014.146-.027.125-.015.117h-.015l-.014.125-.027.111-.007.089-.027.083-.028.082-.014.07-.027.049-.027.041-.014.028-.029.026h-6.506l.182 2.982 15.225-.69 2.457 5.599 2.264-.707.174-5.065h4.727l.18-.015.002.001c1.564 7.341.914 13.176-3.827 17.328zm4.049-113.316c-15.663 1.945-19.365-7.868-19.365-7.868s36.335-2.575 37.629-4.229c-.084.291-2.838 10.16-18.264 12.097zm53.672 17.856c0 6.631-3.877 12.084-8.859 12.797v-25.586c4.982.705 8.859 6.167 8.859 12.789z'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
}


И всё будет шикарно отображаться и работать. А ещё, запомните на будущее. Если вы хотите получить помощь, не нужно писать такое:


Не буду давать линк на сайт, но в хроме у меня всё работает.


Тут нет и не было экстрасенсов, и без живого кода, нельзя дать адекватный ответ, способный решить поставленную задачу.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы