В WordPress настроить предварительный просмотр не работает SVG использовать [Chrome]

Question

У меня есть символ спрайта SVG после того, как тело в моей WordPress темы:

<svg style="display:none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol viewBox="0 0 104 64" id="icon1">...</symbol> <symbol viewBox="0 0 64 64" id="icon2">...</symbol> </svg>

и блок с XLink использованием

<div> <a href="#" target="_blank"><svg><use xlink:href="#icon1"></use></svg></a> <a href="#" target="_blank"><svg><use xlink:href="#icon2"></use></svg></a> </div>

It работайте на обычных страницах, но эти значки не отображаются в Chrome (49.0.2623.112 Mac [64-бит]), когда активен WordPress для предварительного просмотра (загрузка страницы в iframe). В Safari работают повсюду. Это хром ошибка, или я могу это исправить? Благодарю.

Answer 1

Это, кажется, ошибка в WordPress с встроенным SVG из-за того, что страница загружается через AJAX в Настройщике.

Если вы используете внешний файл СВГ с полной URL работает:

<use xlink:href="/img/some-sprite.svg#icon1"></use> 

Вот соответствующий ПРОФ вопрос, который я взял этот пример из: https://core.trac.wordpress.org/ticket/35824

Но следует помнить, что, используя внешний источник может привести к проблемам с IE. См. Здесь для получения дополнительной информации по этому вопросу: https://css-tricks.com/svg-use-external-source/

Вы также можете использовать функцию WP is_customize_preview(), чтобы проверить, находимся ли мы в Настройщике и используем только внешний SVG. Что-то вроде этого:

<use xlink:href="<?php echo is_customize_preview()?'/img/some-sprite.svg':''; ?>#icon1"></use>