質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • jQuery

    6905questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4154questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • SVG

    101questions

    SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 934

suke

score 3

現在、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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/29 17:32 編集

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

    キャンセル

  • 2016/04/29 17:40

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

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

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

    キャンセル

  • 2016/04/29 17:42

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

    キャンセル

  • 2016/04/29 17:46

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

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

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

    キャンセル

0

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

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もチェックしておいてください。)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/02 09:41

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

    > 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となっています。

    キャンセル

  • 2016/05/02 12:20

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

    キャンセル

  • 2016/05/10 15:13

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6905questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4154questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • SVG

    101questions

    SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。