Не отображается svg?

Есть файл cat20.svg
Если указываю так
<svg class="part__svg">
    <use xlink:href="/images/icons/sprite.svg#cat20"></use>
</svg>

То все работает
Если же
<svg class="part__svg">
    <use xlink:href="/images/icons/cat20.svg"></use>
</svg>

То не работает.

Как сделать что бы заработал второй вариант?
  • Вопрос задан
  • 2531 просмотр
Решения вопроса 1
Описание элемента "use" на MDN
Элемент <use> берёт теги из SVG-документа и дублирует их где-то еще


Следовательно, Вам следует внутри подключаемого SVG-файла указать для элемента ID и указать его при ссылке на данный SVG-файл

Пример
<svg class="part__svg">
<use xlink:href="/images/icons/cat20.svg#cat"></use>
</svg>

UPD: применению стилей мешали атрибуты внутри SVG
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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