ワードプレスでSVGを使う動作しないプレビューをカスタマイズし、私は私のワードプレスのテーマで体後SVGスプライトシンボルを持って

Question

[クローム]：

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

それを通常のページで動作しますが、アクティブなWordPressでプレビューをカスタマイズすると、このアイコンはChrome（49.0.2623.112 Mac [64ビット]）に表示されません（iframeでのページ読み込み）。 Safariではどこでも使えます。それはクロムのバグか私はそれを修正することができますか？ありがとう。

Answer 1

これは、ページがAJAXを介してカスタマイザに読み込まれているため、インラインSVGのWordPressにバグがあるようです。

あなたは完全な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>