tyukavin_denis
@tyukavin_denis
web developer

Как исправить баг отображения SVG в фоксе?

Help me!

Сразу после открывающего тега body пишу такой код
<div style="display: none;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
            <symbol id="icon-home" viewBox="0 0 32 32">
              <path class="path1" d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path>
            </symbol>
            <symbol id="icon-email" viewBox="0 0 32 32">
              <path class="path1" d="M29 4h-26c-1.65 0-3 1.35-3 3v20c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-20c0-1.65-1.35-3-3-3zM12.461 17.199l-8.461 6.59v-15.676l8.461 9.086zM5.512 8h20.976l-10.488 7.875-10.488-7.875zM12.79 17.553l3.21 3.447 3.21-3.447 6.58 8.447h-19.579l6.58-8.447zM19.539 17.199l8.461-9.086v15.676l-8.461-6.59z"></path>
            </symbol>
            <symbol id="icon-phone" viewBox="0 0 32 32">
              <path class="path1" d="M23 0h-14c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h14c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM12 1.5h8v1h-8v-1zM16 30c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM24 24h-16v-20h16v20z"></path>
            </symbol>
</svg>
</div>


Ниже в коде странице вызываю нужную svg-шку тегом use
<svg class="svg-logo">
                  <use xlink:href="#icon-phone"></use>
                </svg>


Всё отлично работает, кроме любимого фокса.
Никто не встречался с подобной проблемой?
  • Вопрос задан
  • 669 просмотров
Решения вопроса 1
tyukavin_denis
@tyukavin_denis Автор вопроса
web developer
Не знаю какое это имеет отношение к моему случаю (я не делал ничего на ангуляр), но решение нашлось в этой статье: css.yoksel.ru/svg-angular-firefox

А именно: если добавить тегу SVG атрибут xml:base и в нем задать URL текущей страницы, иконки начинают работать вне зависимости от ссылки в base.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

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

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