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

Question

[Moon_Lait]

Всем привет! В общем я пытался добавить 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>

Comments

[iBird Rose]

для самого тега svg width и height прописываешь?

[Ankhena]

https://codepen.io/AnnaSummer/pen/KKyEJZK

Думаю, вам пора делать свою песочницу или ссылку.

[Moon_Lait]

iBird Rose, Да прописывал. Хз, так и так пробовал)

[Moon_Lait]

iBird Rose, Да и тем более, как я уже говорил, если убрать fill="url("#a")" и вместо этого сделать так fill="red" . Вот тогда всё работает.

[Moon_Lait]

Ankhena, добавил в песочницу, всё работает) Вот только на сайте почему-то не работает. https://codepen.io/moonlait/pen/GROaNgE

[Moon_Lait]

Вот я записал короткое видео, чтобы было понятно в чём проблема - https://disk.yandex.ru/i/kc2VUwJzUR6e8A

Answer 1

[Владислав Кречун]

Были и у меня проблемы со спрайтами, одно что помогло перед експортированием когда выделял все обводки ctl+shift+o

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

Comments

[Moon_Lait]

Пробовал тоже) Но как то не особо помогло, думаю просто коряво выводится из макета иконки.