Dans WordPress Personnaliser preview fonctionne pas utiliser SVG [Chrome]

Question

Je symbole sprite SVG après corps dans mon thème 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>

et bloquer l'utilisation 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>

Il travailler sur des pages normales, mais ces icônes ne sont pas affichées dans Chrome (49.0.2623.112 Mac [64-bit]) lorsque WordPress active l'aperçu personnaliser (chargement de la page dans iframe). Dans le travail de Safari partout. Il bug chrome ou je peux le réparer? Merci.

Answer 1

Cela semble être un bug dans WordPress avec SVG inline en raison du fait que la page est chargée via AJAX dans le Customizer.

Si vous utilisez un fichier svg externe avec une URL complète, il fonctionne:

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

est ici la question de trac correspondant, je pris cet exemple de: https://core.trac.wordpress.org/ticket/35824

Mais s'il vous plaît noter que l'utilisation d'un externe source peut entraîner des problèmes avec IE. Voir ici pour plus d'informations sur ce problème: https://css-tricks.com/svg-use-external-source/

Vous pouvez également utiliser la fonction WP is_customize_preview() pour tester si nous sommes dans le Customizer et n'utiliser que SVG externe dans ce cas. Quelque chose comme ceci:

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