質問編集履歴
8
参考サイトの追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
参考サイト：https://memo.appri.me/programming/efficient-svg-icon
|
|
2
|
-
|
|
2
|
+
|
|
3
|
-
|
|
3
|
+
のようにsvgをbodyタグ直下に記述し、画像をどこから呼び出せるような記述をしたいです。
|
|
4
|
-
|
|
4
|
+
|
|
5
|
-
|
|
5
|
+
defsタグやその他のタグが増えると、容易に呼び出しができなくてご質問させていただきました
|
|
6
|
+
|
|
7
|
+
。
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|
7
修正完了
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -54,10 +54,6 @@
|
|
|
54
54
|
|
|
55
55
|
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
57
|
```HTML
|
|
62
58
|
|
|
63
59
|
<body>
|
6
svgの追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -64,19 +64,7 @@
|
|
|
64
64
|
|
|
65
65
|
<svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" display="none">
|
|
66
66
|
|
|
67
|
-
<symbol id="logo">
|
|
68
|
-
|
|
69
|
-
<defs>
|
|
70
|
-
|
|
71
|
-
|
|
67
|
+
<symbol id="logo"><defs><symbol id="svg_10"><metadata></metadata><g><path/></g></symbol></defs><g><use xlink:href="#svg_10"/><g/></g></symbol>
|
|
72
|
-
|
|
73
|
-
</defs>
|
|
74
|
-
|
|
75
|
-
<g><use xlink:href="#svg_10"/><g/></g>
|
|
76
|
-
|
|
77
|
-
</symbol>
|
|
78
|
-
|
|
79
|
-
|
|
80
68
|
|
|
81
69
|
<symbol id="btn"><g><polygon/><ellipse/><line/><polygon/><polygon/><polygon/></g></symbol>
|
|
82
70
|
|
|
@@ -84,55 +72,97 @@
|
|
|
84
72
|
|
|
85
73
|
<symbol id="calender"><g><path/></g></symbol>
|
|
86
74
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<symbol id="line">
|
|
90
|
-
|
|
91
|
-
<defs>
|
|
92
|
-
|
|
93
|
-
<linearGradient></linearGradient>
|
|
94
|
-
|
|
95
|
-
<linearGradient/>
|
|
96
|
-
|
|
97
|
-
</defs>
|
|
98
|
-
|
|
99
|
-
|
|
75
|
+
<symbol id="line"><defs><linearGradient></linearGradient><linearGradient/></defs><g><g/><path/></g></symbol>
|
|
100
|
-
|
|
101
|
-
|
|
76
|
+
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
<symbol id="folder">
|
|
106
|
-
|
|
107
|
-
<defs>
|
|
108
|
-
|
|
109
|
-
<linearGradient>
|
|
110
|
-
|
|
111
|
-
<stop/>
|
|
112
|
-
|
|
113
|
-
<stop/>
|
|
114
|
-
|
|
115
|
-
</linearGradient>
|
|
116
|
-
|
|
117
|
-
<radialGradient>
|
|
118
|
-
|
|
119
|
-
<stop/>
|
|
120
|
-
|
|
121
|
-
<stop/>
|
|
122
|
-
|
|
123
|
-
</radialGradient>
|
|
124
|
-
|
|
125
|
-
</defs>
|
|
126
|
-
|
|
127
|
-
|
|
77
|
+
<symbol id="folder"><defs><linearGradient><stop/><stop/></linearGradient><radialGradient><stop/><stop/></radialGradient></defs><g><path/></g></symbol>
|
|
128
|
-
|
|
129
|
-
</symbol>
|
|
130
78
|
|
|
131
79
|
</svg>
|
|
132
80
|
|
|
133
|
-
|
|
81
|
+
<div class="outer">
|
|
82
|
+
|
|
134
|
-
|
|
83
|
+
<div id="folder1" class="container">
|
|
84
|
+
|
|
135
|
-
|
|
85
|
+
<svg><use xlink:href="#folder"/></svg> //ここが反映されなくなる☆
|
|
86
|
+
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div id="folder2" class="container">
|
|
90
|
+
|
|
91
|
+
<svg><use xlink:href="#folder"/></svg> //ここが反映されなくなる☆
|
|
92
|
+
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div id="folder3" class="container">
|
|
96
|
+
|
|
97
|
+
<svg><use xlink:href="#folder"/></svg> //ここが反映されなくなる☆
|
|
98
|
+
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<div class="main">
|
|
104
|
+
|
|
105
|
+
<article class="article">
|
|
106
|
+
|
|
107
|
+
<section class="section1">
|
|
108
|
+
|
|
109
|
+
<div class="set">
|
|
110
|
+
|
|
111
|
+
<h1>Title1</h1>
|
|
112
|
+
|
|
113
|
+
<ul>
|
|
114
|
+
|
|
115
|
+
<svg><use xlink:href="#calender"/></svg>
|
|
116
|
+
|
|
117
|
+
<li>date</li>
|
|
118
|
+
|
|
119
|
+
<svg><use xlink:href="#tag"/></svg>
|
|
120
|
+
|
|
121
|
+
<li>object</li>
|
|
122
|
+
|
|
123
|
+
</ul>
|
|
124
|
+
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<svg><use xlink:href="#line"/></svg> //ここが反映されなくなる☆
|
|
128
|
+
|
|
129
|
+
</section>
|
|
130
|
+
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
</article>
|
|
134
|
+
|
|
135
|
+
<article class="article">
|
|
136
|
+
|
|
137
|
+
<section class="section2">
|
|
138
|
+
|
|
139
|
+
<div class="set">
|
|
140
|
+
|
|
141
|
+
<h1>Title1</h1>
|
|
142
|
+
|
|
143
|
+
<ul>
|
|
144
|
+
|
|
145
|
+
<svg><use xlink:href="#calender"/></svg>
|
|
146
|
+
|
|
147
|
+
<li>date</li>
|
|
148
|
+
|
|
149
|
+
<svg><use xlink:href="#tag"/></svg>
|
|
150
|
+
|
|
151
|
+
<li>object</li>
|
|
152
|
+
|
|
153
|
+
</ul>
|
|
154
|
+
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<svg><use xlink:href="#line"/></svg> //ここが反映されなくなる☆
|
|
158
|
+
|
|
159
|
+
</section>
|
|
160
|
+
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
</article>
|
|
164
|
+
|
|
165
|
+
</div>
|
|
136
166
|
|
|
137
167
|
</body>
|
|
138
168
|
|
|
@@ -142,6 +172,22 @@
|
|
|
142
172
|
|
|
143
173
|
```
|
|
144
174
|
|
|
175
|
+
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓追記↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
|
176
|
+
|
|
177
|
+
```svg
|
|
178
|
+
|
|
179
|
+
申し訳ありません。
|
|
180
|
+
|
|
181
|
+
文字数が１７７７０文字になってしまったので、コードペンにsvgを記載しています。
|
|
182
|
+
|
|
183
|
+
https://codepen.io/89txtx/pen/XWNpEbG
|
|
184
|
+
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
145
191
|
|
|
146
192
|
|
|
147
193
|
#試したこと
|
5
試したこと追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -141,3 +141,45 @@
|
|
|
141
141
|
|
|
142
142
|
|
|
143
143
|
```
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
#試したこと
|
|
148
|
+
|
|
149
|
+
```html
|
|
150
|
+
|
|
151
|
+
<symbol id="line">
|
|
152
|
+
|
|
153
|
+
<defs
|
|
154
|
+
|
|
155
|
+
id="defs20">
|
|
156
|
+
|
|
157
|
+
<symbol>
|
|
158
|
+
|
|
159
|
+
<linearGradient">
|
|
160
|
+
|
|
161
|
+
<stop/>
|
|
162
|
+
|
|
163
|
+
<stop/>
|
|
164
|
+
|
|
165
|
+
</linearGradient>
|
|
166
|
+
|
|
167
|
+
</symbol>
|
|
168
|
+
|
|
169
|
+
</defs>
|
|
170
|
+
|
|
171
|
+
<g>
|
|
172
|
+
|
|
173
|
+
<use xlink:href="test">
|
|
174
|
+
|
|
175
|
+
<g/>
|
|
176
|
+
|
|
177
|
+
<path/>
|
|
178
|
+
|
|
179
|
+
</g>
|
|
180
|
+
|
|
181
|
+
</symbol>
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
```
|
4
状況説明追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
□ しかし、"#line,#folder"は、display属性値をnoneにしなければ、呼び出せますが、
|
|
22
22
|
|
|
23
23
|
反面、該当画像がページ先頭に表示されてしまいます。
|
|
24
|
+
|
|
25
|
+
（display:noneだと先頭の表示画像と一緒に呼び出し画像が消えてしまうような状況）
|
|
24
26
|
|
|
25
27
|
本件、CSSにてbackground-image指定のコーディングにて、妥協しているのですが
|
|
26
28
|
|
3
８行目＜g＞開始タグの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
|
|
71
71
|
</defs>
|
|
72
72
|
|
|
73
|
-
<g
|
|
73
|
+
<g><use xlink:href="#svg_10"/><g/></g>
|
|
74
74
|
|
|
75
75
|
</symbol>
|
|
76
76
|
|
2
誤字修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
□ "#logo,#btn,#tag,#calender"は、useタグとidを指定して呼び出しでき
|
|
9
|
+
□ "#logo,#btn,#tag,#calender"は、useタグとidを指定して呼び出しできました。
|
|
10
10
|
|
|
11
11
|
───────────────
|
|
12
12
|
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
───────────────
|
|
20
20
|
|
|
21
|
-
□ "#line,#folder"は、display属性値をnoneにしなければ、呼び出せますが、
|
|
21
|
+
□ しかし、"#line,#folder"は、display属性値をnoneにしなければ、呼び出せますが、
|
|
22
22
|
|
|
23
23
|
反面、該当画像がページ先頭に表示されてしまいます。
|
|
24
24
|
|
1
整理しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -66,11 +66,11 @@
|
|
|
66
66
|
|
|
67
67
|
<defs>
|
|
68
68
|
|
|
69
|
-
<symbol></metadata><g><path/></g></symbol>
|
|
69
|
+
<symbol id="svg_10"><metadata></metadata><g><path/></g></symbol>
|
|
70
70
|
|
|
71
71
|
</defs>
|
|
72
72
|
|
|
73
|
-
<g/><g/></g>
|
|
73
|
+
<g/><use xlink:href="#svg_10"/><g/></g>
|
|
74
74
|
|
|
75
75
|
</symbol>
|
|
76
76
|
|