在 WordPress 中自定义预览不起作用 SVG 在 Chrome 上使用

Question

我的 WordPress 主题 body 后有一个 SVG 精灵符号：

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

它适用于普通页面，但这些图标在 Chrome (49.0.2623.112 Mac[64 位]) 活动 WordPress 自定义预览（iframe 中的页面加载）时不显示。在 Safari 中它无处不在。这是 Chrome 错误还是我可以修复它？

Answer 1

这似乎是带有内联 SVG 的 WordPress 中的一个错误，因为该页面是通过定制器中的 AJAX 加载的。

如果您使用具有完整 url 的外部 svg 文件，它可以工作：

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

这是我从这个例子中得到的相应trac问题：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>

在 WordPress 中自定义预览不起作用 SVG 在 Chrome 上使用

In WordPress customize preview not work SVG use on Chrome

wordpress

customization

svg

google-chrome