@Moon_Lait

Как правильно добавить svg файл через sprite.svg в html код?

Всем привет! В общем я пытался добавить svg файл через sprite.svg, но это не получилось. Сам файл спокойно отображается в браузерах и при добавлении прямо в html код. Другие svg файлы нормально работают через sprite и причину по которой именно этот файл не работает я нашёл. В этом файле элемент path ссылается с помощью "fill=id" к элементу defs. И вот здесь как раз таки загвоздка. Если убрать этот id и вместо него указать какой-нибудь цвет, то всё работает. Как решить данную проблему? Этот файл с нужным мне линейным градиентом, экспортивал из макета в программе figma. В html коде это выглядит так, в принципе вроде как ничего необычного:
<svg class="icon">
          <use xlink:href="img/sprite.svg#logo-txt"></use>
      </svg>

Код в sprite.svg (P.S. для удобства чтения я сократил код path, если будет нужно, скину файл):
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 182 17" id="logo-txt">
        <path d="M8.134 13.035H4.645c-1.228-.017-2.16-.32-2.8-.905-.635-.586-.962-1.46-.98-2" 
        fill="url(#a)"></path>
        <defs>
        <linearGradient id="a" x1="0" y1="-3" x2="323.622" y2="202.908" gradientUnits="userSpaceOnUse">
            <stop stop-color="#0CF"></stop>
            <stop offset="1" stop-color="#6FC"></stop>
        </linearGradient>
        </defs>
    </symbol>
  • Вопрос задан
  • 182 просмотра
Пригласить эксперта
Ответы на вопрос 1
adsvlad
@adsvlad
Разработка сайтов frontend && baсkand
Были и у меня проблемы со спрайтами, одно что помогло перед експортированием когда выделял все обводки ctl+shift+o

P.S. но от этого корявые иконки могут поломаться (ctr+z в помошь :))
Ответ написан
Ваш ответ на вопрос

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

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