URLにパラメーターがつくと、SVG形式のアイコンが表示されない

Question

現在、SVGコードのみを記述したファイルをjQueryのloadでHTMLに読み込み、
アイコン表示部分からは各SVGのIDを指定して表示しています。

http://localhost/news/
のような形式のURLだと問題なく表示されるのですが、（以下図）

http://localhost/news?start=5
のようにURLにパラメーターがつくと表示されなくなります。（以下図）

SVGコードのHTMLへの読み込みは問題なく完了しています。
なにか、考えられる原因がございましたら、ご教示いただけるとありがたいです。

よろしくお願いいたします。

---

すみません、以下追記します。

###読み込んでいるSVGファイル（.txt）

<svg id="svg-none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<symbol id="home-svg" viewBox="0 0 512 512">
			<g>
				<polygon class="home-svg-img" points="433.198,205.502 363.908,136.267 308.912,81.341 256.089,28.324 0,284.219 37.928,322.123 
				256.089,104.142 474.071,322.123 512,284.219 	"></polygon>
				<polygon class="home-svg-img" points="78.801,312.098 78.801,483.676 213.994,483.676 213.994,368.231 298.006,368.231 298.006,483.676 
				433.198,483.676 433.198,312.083 256.089,134.959 	"></polygon>
			</g>
		</symbol>
		以下、各アイコンのコードが続きます。
	</defs>
</svg>

###jQueryでHTMLへ読み込み

$(function() {
	$('#svg-load').load('http://localhost/inc/svg.txt');
});

<div id="svg-load"></div> 内にコードが書き込まれます。

###アイコン表示部分のHTML

<span class="icon"><svg class="home-svg"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#home-svg"></use></svg></span>

Answer 1

SVGのデータはどういう形で取得しているのでしょうか？
HTMLにじか書きでしょうか？

該当部分のソースがないと回答しがたいかと思います。

Comments

[suke]

ありがとうございます、該当部分のソース等を質問本文へ追記いたしました。

[CodeLab]

問題なさそうな気はするんですが、キャッシュが効いてしまってからのデータがよみこまれてしまっているとか？

試しにキャッシュ無効(もしくはブラウザのキャッシュクリアしてみては？）

jQuery で html 読み込みすると、キャッシュされて困る　の巻
http://implus-jp.blogspot.jp/2012/03/jquery-html.html

[CodeLab]

ちなみに、表示されない時に、#svg-loadの要素はちゃんと書き換わっていますか？

[suke]

ご返答ありがとうございます。

> 問題なさそうな気はするんですが、キャッシュが効いてしまってからのデータがよみこまれてしまっているとか？
ブラウザからキャシュを削除してからページを読み込んでも、やはり表示されないままでした。

> 表示されない時に、#svg-loadの要素はちゃんと書き換わっていますか？
こちらは、書き換わっていることを確認しております。

Answer 2

ちょっと情報が少ないので、気になったところを列挙させていただきます。
このあたりが分かると原因がどこにあるか突き止められるのではないかな、と思います。

URLにクエリを渡して、表示させる内容をフィルタリングするなど、何かしらの処理をされているのだと思いますが

• URLにパラメーターがある状態ではhtmlにどのような変化があるのでしょう？（特にbodyや以下の子要素にidやclassの変化等は無いでしょうか？）
• load()を記述しているのはhead側か、body末尾か
• スプライトは非同期読み込みなのに対して、アイコン箇所のuse要素及びそのxlinkはhtmlにハードコーディングされている状態なのか
• （表示されない時）コンソールに何かエラーはでていないか
• SVGスプライトのsymbol要素に対して設定されているviewboxサイズがやけに大きいですが、アイコン1つのの元サイズは512×512pxもあるのか
• アイコンが表示されない時、リアルタイムでのアイコンのcssとサイズはどのようになっているか

####追記：Step2
一回Chromeで検証していただきたいのですが

1. デベロッパーツールのsettingsの「Grneralタブ」から「Elements」項目の「show user agent shadow DOM」にチェックを入れて有効にする

2. その状態でもう一度デバッグ。アイコンが表示されていない状態時、use要素以下の#shadow-rootにsvg要素が入っているか確認。

※画像のuse#volumeが正常に読み込まれているuse要素。
読み込みに失敗している場合は、画像下部のuse#skipのように#shadow-root以下に要素が入っていません。
このいずれの状態になるかをまずご確認ください。

---

・ shadow-rootにsvg要素が内包れている
cssの問題になります。

.icon svg{
  display:block;
  width:表示したいサイズ(px);
  height:表示したいサイズ(px)
}

をcssに追加してみてください。

・ shadow-rootが空
svgスプライトが読み込まれる前にuse要素がレンダリングされているのではないかと思います。

$(function() {
    $('#svg-load').load('http://localhost/inc/svg.txt');
});

を一度コメントアウトするか削除するなりして
bodyの一番はじめにスプライトファイルの記述をハードコーディングして試してみてください。
（念のため、.iconのcssもチェックしておいてください。）

Comments

[suke]

コメントありがとうございます。

> URLにクエリを渡して、表示させる内容をフィルタリングするなど、何かしらの処理をされているのだと思いますが
はい、そのとおりです。CMSのJoomla！を利用しています。

以下、挙げていただいた内容にお答えさせていただきます。

> URLにパラメーターがある状態ではhtmlにどのような変化があるのでしょう？（特にbodyや以下の子要素にidやclassの変化等は無いでしょうか？）
HTML側に変化はありません。
アイコンが表示される、されない関係なくHTMLは共通です。

> load()を記述しているのはhead側か、body末尾か
head側に記述しています。

> スプライトは非同期読み込みなのに対して、アイコン箇所のuse要素及びそのxlinkはhtmlにハードコーディングされている状態なのか
はい、直接コーディングしています。

> （表示されない時）コンソールに何かエラーはでていないか
エラーは表示されていませんでした。

> SVGスプライトのsymbol要素に対して設定されているviewboxサイズがやけに大きいですが、アイコン1つのの元サイズは512×512pxもあるのか
素材サイトで配布されているSVGファイルをそのまま利用させてもらっており、ダウンロードの基本サイズが512×512になっていました。

> アイコンが表示されない時、リアルタイムでのアイコンのcssとサイズはどのようになっているか
svg要素はCSSで指定したサイズが設定されていますが、子要素のuseは縦横共に0pxとなっています。

[manabufukai]

なるほど、ありがとうございます。
この回答へ追記をいたしましたのでご確認の上、試してみてください。

[suke]

お返事が遅くなってしまい、申し訳ございません。

追記いただいた内容を確認したところ、表示されないページは#shadow-rootになにも含まれていませんでした。
そこで、loadではなくハードコーディングに変更してみましたが、やはり同様に表示されず、DOMにも読み込まれていない状態となっていました。
もしかしたら、利用しているCMSの仕様と関係してくる部分なのかもしれません。

今回は、納期の関係もあり、必要なSVGは画像ファイルとして読み込むことにいたしましたが、やはりコードの場合はCSSで色を変更できたりと便利な部分が多いので、ひき続き原因を調べていこうと思います。

ご丁寧に調査方法、解決案をお教えいただき、本当にありがとうございました。
きちんとしたご報告ができず、申し訳ございません。