質問編集履歴
3
SVGコードをHTML読み込み部分とIDを統一しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -50,37 +50,17 @@
|
|
|
50
50
|
|
|
51
51
|
<defs>
|
|
52
52
|
|
|
53
|
-
<symbol id="
|
|
53
|
+
<symbol id="home-svg" viewBox="0 0 512 512">
|
|
54
54
|
|
|
55
55
|
<g>
|
|
56
56
|
|
|
57
|
-
<p
|
|
57
|
+
<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
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
256.089,104.142 474.071,322.123 512,284.219 "></polygon>
|
|
60
60
|
|
|
61
|
-
c-
|
|
61
|
+
<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
|
|
62
62
|
|
|
63
|
-
c44.1-39.6,5.9-64.8,5.9-64.8c-36.5-13.5-38.7,14.9-38.7,14.9c34.7-6.3,23,14,23,14c-19.4,14-35.5-13.5-35.5-13.5L127.7,17.1
|
|
64
|
-
|
|
65
|
-
c-18.2-37.4-93.4-8.6-72.9,38.3c5,11.3,204,439.9,204,439.9c12.2,22.3,46.2,22.3,55.8,0c7.2-16.7,142.5-302.6,141.4-302.6
|
|
66
|
-
|
|
67
|
-
C468.2,165.6,454.9,153.1,438.8,153.1z M298.1,185.7c0,0-45.2-9.7,0-18.2C298.1,167.5,288.7,175.6,298.1,185.7z M303.6,185.7
|
|
68
|
-
|
|
69
|
-
|
|
63
|
+
433.198,483.676 433.198,312.083 256.089,134.959 "></polygon>
|
|
70
|
-
|
|
71
|
-
</g>
|
|
72
|
-
|
|
73
|
-
<g>
|
|
74
|
-
|
|
75
|
-
<path class="logo-svg-item" d="M223,145.5V79.6h-20.3V63.9h58.9v15.7h-20.3v65.9H223z"/>
|
|
76
|
-
|
|
77
|
-
<path class="logo-svg-item" d="M318.2,141.7h-15.9L284.7,86l-1.8,59.5h-17.3l4.3-81.6H294l16.9,54.7l16.3-54.7h25l4.3,81.6H338L335.6,86
|
|
78
|
-
|
|
79
|
-
L318.2,141.7z"/>
|
|
80
|
-
|
|
81
|
-
<path class="logo-svg-item" d="M391.1,63.9h16.8l31.2,81.6h-20.1l-6.4-18h-28.3l-6.2,18h-18.4L391.1,63.9z M408.8,113.5l-9.9-29.8l-10,29.8
|
|
82
|
-
|
|
83
|
-
H408.8z"/>
|
|
84
64
|
|
|
85
65
|
</g>
|
|
86
66
|
|
2
一部ソースが足りなかった部分を追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -118,6 +118,6 @@
|
|
|
118
118
|
|
|
119
119
|
```
|
|
120
120
|
|
|
121
|
-
<span class="icon"><svg class="home-svg"><use xlink:href="#home-svg"/></svg></span>
|
|
121
|
+
<span class="icon"><svg class="home-svg"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#home-svg"></use></svg></span>
|
|
122
122
|
|
|
123
123
|
```
|
1
該当部分のコードを追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
現在、SVGコードのみを記述したファイルをjQueryのloadで
|
|
1
|
+
現在、SVGコードのみを記述したファイルをjQueryのloadでHTMLに読み込み、
|
|
2
2
|
|
|
3
3
|
アイコン表示部分からは各SVGのIDを指定して表示しています。
|
|
4
4
|
|
|
@@ -24,10 +24,100 @@
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
SVGコードの
|
|
27
|
+
SVGコードのHTMLへの読み込みは問題なく完了しています。
|
|
28
28
|
|
|
29
29
|
なにか、考えられる原因がございましたら、ご教示いただけるとありがたいです。
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
よろしくお願いいたします。
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
すみません、以下追記します。
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
###読み込んでいるSVGファイル（.txt）
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
<svg id="svg-none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
50
|
+
|
|
51
|
+
<defs>
|
|
52
|
+
|
|
53
|
+
<symbol id="logo-svg" viewBox="0 0 512 512">
|
|
54
|
+
|
|
55
|
+
<g>
|
|
56
|
+
|
|
57
|
+
<path class="logo-svg-item" d="M438.8,153.1c-12.6-0.2-227.4,0-227.4,0l27,57.6l97.7,0.5c10.1-0.2,6.8,9.9,0.5,9.9c-4.3,0-95,0.9-95,0.9
|
|
58
|
+
|
|
59
|
+
c59.9,42.3,114.4,4.5,114.4,4.5c14-12.4,32.6-1.8,26.6,15.3c-2.9,6.1-85.1,181.9-85.1,181.9c-6.1,12.8-25.2,12.8-31.4-0.5
|
|
60
|
+
|
|
61
|
+
c-2.8-6.3-164.5-356.1-164.5-356.1c-8.1-20.7,10.4-24.5,17.6-9.9c4.5,9.2,122.7,264.6,124.3,269.2c18.5,41,59.4,19.4,59.4,19.4
|
|
62
|
+
|
|
63
|
+
c44.1-39.6,5.9-64.8,5.9-64.8c-36.5-13.5-38.7,14.9-38.7,14.9c34.7-6.3,23,14,23,14c-19.4,14-35.5-13.5-35.5-13.5L127.7,17.1
|
|
64
|
+
|
|
65
|
+
c-18.2-37.4-93.4-8.6-72.9,38.3c5,11.3,204,439.9,204,439.9c12.2,22.3,46.2,22.3,55.8,0c7.2-16.7,142.5-302.6,141.4-302.6
|
|
66
|
+
|
|
67
|
+
C468.2,165.6,454.9,153.1,438.8,153.1z M298.1,185.7c0,0-45.2-9.7,0-18.2C298.1,167.5,288.7,175.6,298.1,185.7z M303.6,185.7
|
|
68
|
+
|
|
69
|
+
c9.5-10.1,0-18.2,0-18.2C348.9,176.1,303.6,185.7,303.6,185.7z"/>
|
|
70
|
+
|
|
71
|
+
</g>
|
|
72
|
+
|
|
73
|
+
<g>
|
|
74
|
+
|
|
75
|
+
<path class="logo-svg-item" d="M223,145.5V79.6h-20.3V63.9h58.9v15.7h-20.3v65.9H223z"/>
|
|
76
|
+
|
|
77
|
+
<path class="logo-svg-item" d="M318.2,141.7h-15.9L284.7,86l-1.8,59.5h-17.3l4.3-81.6H294l16.9,54.7l16.3-54.7h25l4.3,81.6H338L335.6,86
|
|
78
|
+
|
|
79
|
+
L318.2,141.7z"/>
|
|
80
|
+
|
|
81
|
+
<path class="logo-svg-item" d="M391.1,63.9h16.8l31.2,81.6h-20.1l-6.4-18h-28.3l-6.2,18h-18.4L391.1,63.9z M408.8,113.5l-9.9-29.8l-10,29.8
|
|
82
|
+
|
|
83
|
+
H408.8z"/>
|
|
84
|
+
|
|
85
|
+
</g>
|
|
86
|
+
|
|
87
|
+
</symbol>
|
|
88
|
+
|
|
89
|
+
以下、各アイコンのコードが続きます。
|
|
90
|
+
|
|
91
|
+
</defs>
|
|
92
|
+
|
|
93
|
+
</svg>
|
|
94
|
+
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
###jQueryでHTMLへ読み込み
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
$(function() {
|
|
104
|
+
|
|
105
|
+
$('#svg-load').load('http://localhost/inc/svg.txt');
|
|
106
|
+
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
<div id="svg-load"></div> 内にコードが書き込まれます。
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
###アイコン表示部分のHTML
|
|
118
|
+
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
<span class="icon"><svg class="home-svg"><use xlink:href="#home-svg"/></svg></span>
|
|
122
|
+
|
|
123
|
+
```
|