bugo_aneo
@bugo_aneo
Верстальщик по жизни, буддист, кофеман

Почему не отображаются иконки с градиентом из SVG спрайта?

Коллеги, добрый день.

Прошу вас помогите решить вопрос об отображении иконки из спрайта с градиентом.

САБЖ: Есть сайт, где часть иконок вызывается из файла спрайта, а часть инлайнится, т.к. я не могу заставить их нормально отрисовываться из спрайта. Сайт

Есть собственно файл спрайта, где все иконки залиты однообразно через symbol. Sprite file

В нем есть иконка с id=star, у нее есть градиент.

ПРОБЛЕМА: при ее вызове в разметке я вижу, что иконка отрисовалась, но ее заливка - нет. Т.е. она просто не видна на странице ни в одном браузере. Это при том, что еще более сложные иконки спокойно отрисовалсиь и видны.

Как я вызываю иконку:

<svg viewBox="0 0 100 100">
      <use xlink:href="/img/icon/sprite.svg#star"></use>
</svg>


Ее код в спрайте

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" fill="none">
<symbol viewBox="0 0 100 100" id="star">
<path d="M100 50c0 27.614-22.386 50-50 50S0 77.614 0 50 22.386 0 50 0s50 22.386 50 50z" fill="url(#0_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.794 21.773l7.195 20.687h20.084l-16.36 12.724 7.288 21.865-18.207-13.656-18.208 13.656 7.288-21.865-16.36-12.724h20.084l7.196-20.687zm0 7.248L45.29 44.84H30.454l12.212 9.498-5.41 16.231 13.538-10.153L64.332 70.57l-5.41-16.23 12.212-9.499H56.296l-5.503-15.82z" fill="url(#1_linear)"/>
<defs>
<linearGradient id="0_linear" x1="47.246" y1="112.859" x2="124.114" y2="17.489" gradientUnits="userSpaceOnUse"><stop stop-color="#EEE8FF"/>
<stop offset="0" stop-color="#EEE8FF"/>
<stop offset="1" stop-color="#FFF5FF"/>
</linearGradient>
<linearGradient id="1_linear" x1="49.291" y1="84.156" x2="91.895" y2="31.984" gradientUnits="userSpaceOnUse">
<stop stop-color="#A046FF"/><stop offset="1" stop-color="#FF00FB"/>
</linearGradient>
</defs>
</symbol>
</svg>


Прошу коллег указать мне, что я делаю не так. Заранее благодарю!!!
  • Вопрос задан
  • 316 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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