回答編集履歴

1

回答をうけて追記

2016/05/02 03:19

投稿

manabufukai
manabufukai

スコア700

test CHANGED
@@ -17,3 +17,69 @@
17
17
  - SVGスプライトのsymbol要素に対して設定されているviewboxサイズがやけに大きいですが、アイコン1つのの元サイズは512×512pxもあるのか
18
18
 
19
19
  - アイコンが表示されない時、リアルタイムでのアイコンのcssとサイズはどのようになっているか
20
+
21
+
22
+
23
+ ####追記:Step2
24
+
25
+ 一回Chromeで検証していただきたいのですが
26
+
27
+ 1. デベロッパーツールのsettingsの「Grneralタブ」から「Elements」項目の「show user agent shadow DOM」にチェックを入れて有効にする
28
+
29
+ ![イメージ説明](7f339a687834f3ed47b407e846ea4287.jpeg)
30
+
31
+ 2. その状態でもう一度デバッグ。アイコンが表示されていない状態時、use要素以下の#shadow-rootにsvg要素が入っているか確認。
32
+
33
+ ![イメージ説明](5df12004040b18b641caf1dd5c5c723d.jpeg)
34
+
35
+ ※画像の`use#volume`が正常に読み込まれているuse要素。
36
+
37
+  読み込みに失敗している場合は、画像下部の`use#skip`のように#shadow-root以下に要素が入っていません。
38
+
39
+ このいずれの状態になるかをまずご確認ください。
40
+
41
+
42
+
43
+ ---
44
+
45
+ **・ shadow-rootにsvg要素が内包れている**
46
+
47
+ cssの問題になります。
48
+
49
+ ```
50
+
51
+ .icon svg{
52
+
53
+ display:block;
54
+
55
+ width:表示したいサイズ(px);
56
+
57
+ height:表示したいサイズ(px)
58
+
59
+ }
60
+
61
+ ```
62
+
63
+ をcssに追加してみてください。
64
+
65
+
66
+
67
+ **・ shadow-rootが空**
68
+
69
+ svgスプライトが読み込まれる前にuse要素がレンダリングされているのではないかと思います。
70
+
71
+ ```
72
+
73
+ $(function() {
74
+
75
+ $('#svg-load').load('http://localhost/inc/svg.txt');
76
+
77
+ });
78
+
79
+ ```
80
+
81
+ を一度コメントアウトするか削除するなりして
82
+
83
+ bodyの一番はじめにスプライトファイルの記述をハードコーディングして試してみてください。
84
+
85
+ (念のため、.iconのcssもチェックしておいてください。)