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

Question

[unlik]

Есть файл 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>

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

Как сделать что бы заработал второй вариант?

Comments

[Рома Зварич]

Есть файл cat20.svg

Если указываю /sprite.svg

Что-то не очень понятно, почему Вы указываете ссылку на файл "sprite.svg", если у Вас есть файл "cat20.svg"

Просьба уточнить описание проблемы и загрузить куда-то оба файла, чтобы их можно было пощупать

[Rustam Bainazarov]

Да, это не будет работать, ибо через #use можно ссылаться только ID внутри SVG-файла, но не сам файл.

[unlik]

Рустам Байназаров, А как поправить, что бы работало?

Answer 1

[Рома Зварич]

Описание элемента "use" на MDN

Элемент <use> берёт теги из SVG-документа и дублирует их где-то еще

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

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

UPD: применению стилей мешали атрибуты внутри SVG

Comments

[unlik]

Я интегрирую на CMS
И загружаю svg через админку, нет возможности добавлять тег #cat
Через object не помогает, так как придется стили переделывать. Верстальщик для ховер и тд задал стили для svg

[Рома Зварич]

Верстальщик для ховер и тд задал стили для svg

Тогда может стоит встроить код SVG прямо в вёрстку? Это можно сделать?

[unlik]

Рома Зварич, Да, вот как раз при помощи php загрузил содержимое svg. Но почему-то не применяются стили для него.

[Рома Зварич]

unlik, сложно что-то сказать, вообще не видя код. Дайте хотя бы скриншоты вёрстки и стилей, которые должны примениться

[unlik]

Рома Зварич, размеры сейчас поправил убрав их из самого svg. Так же прописал именно класс стиля в сам файл svg.
Но толщина рамки другая, изменения цвета при ховер не срабатывает.

[unlik]

Рома Зварич, Выше написал в чем проблема.

Посмотрите на исходной верстке
Там толщина границ другая, и срабатывает ховер.

[Рома Зварич]

unlik, вот это не даёт меняться цвету

[Рома Зварич]

unlik,

Там толщина границ другая

Речь о толщине линий?
Тогда вот здесь нужно заменить на 1

P.S. Смотрю, Вы уже сами это поняли

[unlik]

Рома Зварич, Спасибо. С толщиной границы тоже разобрался.
Просто интересно почему в исходном варианте сразу по-другому.

Тут только каждый svg вручную править? Или как-то можно это перезадать автоматически на сайте?

[Рома Зварич]

unlik, атрибуты специфичнее (значимее) внешних стилей. Придётся вручную удалять.

[unlik]

Рома Зварич, ну это понял. Просто почему в исходной верстке было все ок, хотя svg файлы такие же.