Use не отображает контент по ссылке, что делать?

Question

Егор Зузлов @londers

Full stack

SVG
Pug

Use не отображает контент по ссылке, что делать?

Здравствуйте, столкнулся с такой проблемой: я сделал отдельным файлом svg...

<svg class="d-none" aria-hidden="true">
    <symbol id="icon-logo" viewBox="0 0 512 512">
        <path d="*секрет*" />
    </symbol>
</svg>

...и вставил его через iframe...

iframe.js-iframeSvg(src="./assets/svg/icons.svg", onload="this.before(this.contentDocument.children[0]); this.remove();")

...в итоге перестал работать use...

svg(alt="*что-то*").d-block.p-centered.icon-4rem
   use(xlink:href="#icon-logo")

...и выглядит после сборки вот так:

<svg class="d-block p-centered icon-4rem" alt="*что-то*">
    <use xlink:href="#icon-logo">
        #shadow-root (closed)
    </use>
</svg>

Так и не понятно что происходит, и ещё прошу объяснить как работает use, спасибо)

Вопрос задан более трёх лет назад
1290 просмотров

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

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

Rustam Bainazarov @SmthTo

Если не нужна поддержка EDGE <=12 и IE11, то вставляйте ссылку на сам спрайт напрямую.
Вставка SVG-Sprite не затрагивая Dom?

Дайте ссылку, кстати. Вы смотрели, у вас в DOM вообще есть SVG-код после всех ваших манипуляций вне iframe? У меня большие сомнения, что ваш SVG-файл вообще встроился в документ.

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

Написано более трёх лет назад
Егор Зузлов @londers Автор вопроса

Рустам Байназаров, svg выводится из iframe, но use не работает

Написано более трёх лет назад
Rustam Bainazarov @SmthTo

Егор Зузлов, да, я понимаю, всё же попробуйте подключать символы через прямую ссылку, так у вас и кеширование будет работать. И скиньте ссылку на страницу, где это всё есть, в любом случае.

Написано более трёх лет назад
Егор Зузлов @londers Автор вопроса

Рустам Байназаров, у меня до этого было по прямой ссылке и всё работало, но понадобилось это сделать через iframe и ссылку я дать, к сожалению не могу

Написано более трёх лет назад
Rustam Bainazarov @SmthTo

Егор Зузлов, у вас была ссылка на спрайт или на ID символа из спрайта, который вы вставляли inline? Без ссылки, собственно, подсказать в данном случае лично мне сложно. Будем надеяться на догадки других пользователей.

Написано более трёх лет назад
RAX7 @RAX7

Егор Зузлов, страницу открываешь как файл или с локального сервера отдаешь?

Написано более трёх лет назад
Егор Зузлов @londers Автор вопроса

RAX7, локальный сервер

Написано более трёх лет назад

RAX7 @RAX7

Егор Зузлов, тогда смотри что pug дает на выхлопе.
Простеньки пример

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Iframe SVG sprite</title>
</head>
<body>
  <iframe src="sprite.svg" onload="this.before(this.contentDocument.children[0]);this.remove();"></iframe>
  <svg><use href="#icon-favorite"></use></svg>
  <svg><use href="#icon-face"></use></svg>
</body>
</html>

sprite.svg

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true">
  <symbol id="icon-face" viewBox="0 0 24 24">
    <path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/><path fill="none" d="M0 0h24v24H0z"/>
  </symbol>
  <symbol id="icon-favorite" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
  </symbol>
</svg>

в таком виде всё работает

Написано более трёх лет назад

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

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

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

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

JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
SVG

Средний
Существует SVG-библиотека для Си++ или Python?
- 1 подписчик
- 03 окт.
- 143 просмотра
1

ответ
HTML

+2 ещё

Простой
Как сделать градиент для flood-color?
- 1 подписчик
- 02 окт.
- 53 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать кривую линию между двумя блоками диаграммы?
- 5 подписчиков
- 07 сент.
- 508 просмотров
1

ответ
SVG

+1 ещё

Простой
Почему не отображается картинка в SVG на GitHub?
- 1 подписчик
- 31 авг.
- 81 просмотр
1

ответ
SVG

+1 ещё

Простой
Как выкачать панораму в формате SVG с сайта?
- 1 подписчик
- 27 авг.
- 74 просмотра
0

ответов
Pug

Простой
PUG mixins как создать mixin который бы прописывал путь к ссылке с разных по уровню страниц?
- 1 подписчик
- 26 авг.
- 30 просмотров
1

ответ
Pug

Простой
Как указать путь скомпилированных pug файлов в html в другую папку в терминале VS Code?
- 1 подписчик
- 18 авг.
- 43 просмотра
1

ответ
SVG

+4 ещё

Средний
Как провести реверс инжиниринг файлу типа png jpd svg?
- 1 подписчик
- 07 авг.
- 148 просмотров
1

ответ
React

+2 ещё

Средний
Как настроит config файл SVGR в NextJS?
- 1 подписчик
- 17 июл.
- 79 просмотров
0

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

Системный Аналитик 1С

Wanted. • Москва

До 260 000 ₽

Ведущий программист 1С

Автомакон

от 250 000 до 400 000 ₽

Системный аналитик

HR Prime

от 200 000 до 300 000 ₽

Поправить сайт (мобильная версия) на WordPress

24 нояб. 2024, в 04:16

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

Необходимо поменять пароль в WINDOWS

24 нояб. 2024, в 03:11

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

Требуется консультация по UX-дизайну казино

24 нояб. 2024, в 01:35

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

Если не нужна поддержка EDGE <=12 и IE11, то вставляйте ссылку на сам спрайт напрямую.
Вставка SVG-Sprite не затрагивая Dom?

Дайте ссылку, кстати. Вы смотрели, у вас в DOM вообще есть SVG-код после всех ваших манипуляций вне iframe? У меня большие сомнения, что ваш SVG-файл вообще встроился в документ.

Проблем может быть много, в т. ч. нерабочий скрипт, запрет смешанного активного содержимого и т. п.
Рустам Байназаров, svg выводится из iframe, но use не работает
Егор Зузлов, да, я понимаю, всё же попробуйте подключать символы через прямую ссылку, так у вас и кеширование будет работать. И скиньте ссылку на страницу, где это всё есть, в любом случае.
Рустам Байназаров, у меня до этого было по прямой ссылке и всё работало, но понадобилось это сделать через iframe и ссылку я дать, к сожалению не могу
Егор Зузлов, у вас была ссылка на спрайт или на ID символа из спрайта, который вы вставляли inline? Без ссылки, собственно, подсказать в данном случае лично мне сложно. Будем надеяться на догадки других пользователей.
Егор Зузлов, страницу открываешь как файл или с локального сервера отдаешь?
Егор Зузлов, тогда смотри что pug дает на выхлопе.
Простеньки пример
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Iframe SVG sprite</title> </head> <body> <iframe src="sprite.svg" onload="this.before(this.contentDocument.children[0]);this.remove();"></iframe> <svg><use href="#icon-favorite"></use></svg> <svg><use href="#icon-face"></use></svg> </body> </html>

sprite.svg
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true"> <symbol id="icon-face" viewBox="0 0 24 24"> <path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/><path fill="none" d="M0 0h24v24H0z"/> </symbol> <symbol id="icon-favorite" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </symbol> </svg>

в таком виде всё работает

Use не отображает контент по ссылке, что делать?

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

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

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