Почему не подключается спрайт SVG?

Question

denism300 @denism300

HTML

Почему не подключается спрайт SVG?

Переношу сайт с WP на Bitrix, возникла проблема со спрайтами SVG
На исходном сайте используется, к примеру, так:

<svg class="svg svg-icon-wa"><use xlink:href="/img/sprite.svg?13#icon-wa"></use></svg>

я скопировал sprite.svg в папку с картинками шаблона и подключаю так:

<svg class="svg svg-icon-wa"><use xlink:href="/bitrix/templates/basinn/images/sprite.svg?13#icon-wa"></use></svg>

стили все перенесены 1 в 1, но спрайт не подгружается.
В FF в инспекторе на исходном сайте отображается так:

А на перенесенном так:

Т.е., спрайт не подгружается.
Файл sprite.svg по указанному пути доступен - проверял
В чем может быть проблема?

Вопрос задан 16 апр.
77 просмотров

8 комментариев

Подписаться 1 Простой 8 комментариев

Максим @LenovoId

Может быть проблема вот здесь: "/bitrix/templates/basinn/images/sprite.svg?13#icon-wa а именно в знаке вопроса то есть
?13#icon-wa

Написано 16 апр.
denism300 @denism300 Автор вопроса
Максим,
я пробовал так:

<svg class="svg svg-icon-wa"><use xlink:href="/bitrix/templates/basinn/images/sprite.svg#icon-wa"></use></svg>

все равно не подгружается
Написано 16 апр.
Максим @LenovoId

denism300, на прямую в адресной строке вызовите этот спрайт и потом подставьте решётку с именем

Написано 16 апр.
Максим @LenovoId

denism300, а да, виддите разницу до переноса и после?у вас нету symbol в ктором дрлжен быть viewBox

Написано 16 апр.
Максим @LenovoId

denism300, ваще надо это проверить...я позже напишу...ближе к 18:00 по мск или позже

Написано 16 апр.
denism300 @denism300 Автор вопроса

Максим, да, symbol должен загружаться из спрайта. Я поэтому и вставил скрины, что на исходном сайте загружается, на перенесенном - нет
тут описание, как работает https://doka.guide/html/svg-sprite/

Написано 16 апр.
Максим @LenovoId
denism300, в общем, я поэксперементировал и подключал sprite из отдельного файла который находится рядом с index.html

как видно из снимка экрана что иконки выводятся и достаточно хорошо...
я подключал их обычным образом...то есть вот так:

<svg viewBox="0 155 780 870" width="200" class="heard"> <use xlink:href="sprite.svg#symbol9851" /> </svg> <svg viewBox="1203 677 400 408" width="200" class="ico"> <use xlink:href="sprite.svg#backlog"/> </svg>

как видно из кода что во viewBox итмеются левые циферки, это координаты иконки внутри спрайта и именно по ним я выводил сначала первую иконку а потом уже произвольную, откуда то с середины..
по идее надо спрайт собрать самому а не скачивать откуда то ...
не мог ответить раньше так как был занят
Написано 18 апр.
denism300 @denism300 Автор вопроса

Максим, спасибо за помощь, проблема была, действительно, в сохраненном спрайте - при скачивании туда первой строкой записалось
<!DOCTYPE html>
а уже дальше шел код svg

Написано 18 апр.

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 2 часа назад
- 39 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- 13 часов назад
- 31 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Почему нельзя нажать на кнопку третьего элемента в Splide JS?
- 1 подписчик
- 20 часов назад
- 72 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему не срабатывает анимация при исчезновение?
- 1 подписчик
- вчера
- 48 просмотров
1

ответ
HTML

+1 ещё

Средний
Как зафиксировать данные блоки, чтобы не было разрывов?
- 1 подписчик
- 28 апр.
- 69 просмотров
1

ответ
HTML

+3 ещё

Простой
Возникла поломка файлов для установки пакетов в редакторе Atom, есть ли решение данной проблемы?
- 1 подписчик
- 27 апр.
- 68 просмотров
1

ответ
HTML

Простой
Как выставить фото в select?
- 1 подписчик
- 27 апр.
- 72 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- 27 апр.
- 102 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 26 апр.
- 44 просмотра
1

ответ
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 26 апр.
- 66 просмотров
1

ответ
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Доработка интернет-магазина 1С bitrix

30 апр. 2024, в 14:11

40000 руб./за проект

Разработка web-приложения на React

30 апр. 2024, в 14:10

100000 руб./за проект

Доработки моб приложения на Flutter

30 апр. 2024, в 14:08

5000 руб./в час

Может быть проблема вот здесь: "/bitrix/templates/basinn/images/sprite.svg?13#icon-wa а именно в знаке вопроса то есть
?13#icon-wa
Максим,
я пробовал так:

<svg class="svg svg-icon-wa"><use xlink:href="/bitrix/templates/basinn/images/sprite.svg#icon-wa"></use></svg>

все равно не подгружается
denism300, на прямую в адресной строке вызовите этот спрайт и потом подставьте решётку с именем
denism300, а да, виддите разницу до переноса и после?у вас нету symbol в ктором дрлжен быть viewBox
denism300, ваще надо это проверить...я позже напишу...ближе к 18:00 по мск или позже
Максим, да, symbol должен загружаться из спрайта. Я поэтому и вставил скрины, что на исходном сайте загружается, на перенесенном - нет
тут описание, как работает https://doka.guide/html/svg-sprite/
denism300, в общем, я поэксперементировал и подключал sprite из отдельного файла который находится рядом с index.html

как видно из снимка экрана что иконки выводятся и достаточно хорошо...
я подключал их обычным образом...то есть вот так:

<svg viewBox="0 155 780 870" width="200" class="heard"> <use xlink:href="sprite.svg#symbol9851" /> </svg> <svg viewBox="1203 677 400 408" width="200" class="ico"> <use xlink:href="sprite.svg#backlog"/> </svg>

как видно из кода что во viewBox итмеются левые циферки, это координаты иконки внутри спрайта и именно по ним я выводил сначала первую иконку а потом уже произвольную, откуда то с середины..
по идее надо спрайт собрать самому а не скачивать откуда то ...
не мог ответить раньше так как был занят
Максим, спасибо за помощь, проблема была, действительно, в сохраненном спрайте - при скачивании туда первой строкой записалось
<!DOCTYPE html>
а уже дальше шел код svg

Почему не подключается спрайт SVG?

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

Минуточку внимания

Войдите на сайт