@righto

Как получить svg-изображение через svg-спрайт?

Здравствуйте. Никак не получается вывести иконку из svg-спрайта. Вот она:
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="8.51465" width="12" height="12" rx="2" transform="rotate(-45 0 8.51465)" fill="url(#paint0_angular_12623_309)"/>
<defs>
<radialGradient id="paint0_angular_12623_309" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.3033 9.14377) rotate(135) scale(15.1875)">
<stop stop-color="#FFBB87"/>
<stop offset="1" stop-color="#FFA45E"/>
</radialGradient>
</defs>
</svg>


Если открыть ее в браузере, все гуд. Если код спрайта в том же файле, где вызов иконки - тоже все показывает. Но, если вызывать иконку вот так:
<svg class="icon">
  <use xlink:href="sprites.svg#t"></use>
</svg>

то ее не видно. В sprites.svg такой код:
<svg width="0" height="0" class="hidden">
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" id="t">
    <rect y="8.51465" width="12" height="12" rx="2" transform="rotate(-45 0 8.51465)" fill="url(#paint0_angular_12623_309)"></rect>
    <defs>
      <radialGradient id="paint0_angular_12623_309" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.3033 9.14377) rotate(135) scale(15.1875)">
        <stop stop-color="#FFBB87"></stop>
        <stop offset="1" stop-color="#FFA45E"></stop>
      </radialGradient>
    </defs>
  </symbol>
</svg>

В чем может быть причина ошибки?
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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