In WordPress customize preview not work SVG use on Chrome

1 Views

I have an SVG sprite symbol after my body in my WordPress theme: 

<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>

and block with xlink use

Read More
<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 works on normal pages, but these icons are not displayed in Chrome (49.0.2623.112 Mac[64-bit]) when active WordPress customize preview (page load in iframe). In Safari it works everywhere. Is this a Chrome bug or can I fix it?

Post Views: 1

Related posts

1 comment

  1. This seems to be a bug in WordPress with inlined SVG due to the fact that the page is loaded via AJAX in the Customizer.

    If you use an external svg file with a full url it works:

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

    Here is the corresponding trac issue I took this example from: https://core.trac.wordpress.org/ticket/35824

    But please be aware that using an external source may result in problems with IE. See here for more information on that issue: https://css-tricks.com/svg-use-external-source/

    You could also use the WP function is_customize_preview() to test if we are in the Customizer and only use external SVG in that case. Something like this:

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

Comments are closed.