teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問svgをHTMLに記入した反映方法に関して

編集履歴

質問編集履歴

8

参考サイトの追記

2021/02/14 09:19

投稿

Kosketu
Kosketu

スコア46

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,7 @@
1
- 申し訳ありません、雑破なコードでの質問になってしまいましたが、ご容赦ください。
1
+ 参考サイト：https://memo.appri.me/programming/efficient-svg-icon
2
- 以下のように、svgをbody直下に記入して、
2
+ のようにsvgをbodyタグ直下に記述し、画像をどこから呼び出せるような記述をしたいです。
3
- 画像を呼び起こす方法を採ったコーディングを行っています。
3
+ defsタグやその他のタグが増えると、容易に呼び出しができなくてご質問させていただきました
4
+ 。
4
5
 
5
6
  □　"#logo,#btn,#tag,#calender"は、useタグとidを指定して呼び出しできました。
6
7
  ───────────────

7

修正完了

2021/02/14 09:19

投稿

Kosketu
Kosketu

スコア46

title CHANGED
File without changes
body CHANGED
@@ -26,8 +26,6 @@
26
26
 
27
27
  ご教授の程、よろしくお願いいたします。
28
28
 
29
-
30
-
31
29
  ```HTML
32
30
  <body>
33
31
  <svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" display="none">

6

svgの追記

2021/02/13 18:29

投稿

Kosketu
Kosketu

スコア46

title CHANGED
File without changes
body CHANGED
@@ -31,46 +31,69 @@
31
31
  ```HTML
32
32
  <body>
33
33
  <svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" display="none">
34
- <symbol id="logo">
35
- <defs>
36
- <symbol id="svg_10"><metadata></metadata><g><path/></g></symbol>
34
+ <symbol id="logo"><defs><symbol id="svg_10"><metadata></metadata><g><path/></g></symbol></defs><g><use xlink:href="#svg_10"/><g/></g></symbol>
37
- </defs>
38
- <g><use xlink:href="#svg_10"/><g/></g>
39
- </symbol>
40
-
41
35
  <symbol id="btn"><g><polygon/><ellipse/><line/><polygon/><polygon/><polygon/></g></symbol>
42
36
  <symbol id="tag"><g><path/></g></symbol>
43
37
  <symbol id="calender"><g><path/></g></symbol>
44
-
45
- <symbol id="line">
46
- <defs>
47
- <linearGradient></linearGradient>
48
- <linearGradient/>
49
- </defs>
50
- <g><g/><path/></g>
38
+ <symbol id="line"><defs><linearGradient></linearGradient><linearGradient/></defs><g><g/><path/></g></symbol>
51
- </symbol>
52
-
53
- <symbol id="folder">
54
- <defs>
55
- <linearGradient>
56
- <stop/>
57
- <stop/>
58
- </linearGradient>
59
- 　　　　　<radialGradient>
60
- <stop/>
61
- <stop/>
62
- </radialGradient>
63
- </defs>
64
- <g><path/></g>
39
+ <symbol id="folder"><defs><linearGradient><stop/><stop/></linearGradient><radialGradient><stop/><stop/></radialGradient></defs><g><path/></g></symbol>
65
- </symbol>
66
40
  </svg>
67
-
41
+ <div class="outer">
68
-
42
+ <div id="folder1" class="container">
43
+ <svg><use xlink:href="#folder"/></svg> //ここが反映されなくなる☆
44
+ </div>
45
+ <div id="folder2" class="container">
46
+ <svg><use xlink:href="#folder"/></svg> //ここが反映されなくなる☆
47
+ </div>
48
+ <div id="folder3" class="container">
49
+ <svg><use xlink:href="#folder"/></svg> //ここが反映されなくなる☆
50
+ </div>
51
+ </div>
52
+ <div class="main">
53
+ <article class="article">
54
+ <section class="section1">
55
+ <div class="set">
56
+ <h1>Title1</h1>
57
+ <ul>
58
+ <svg><use xlink:href="#calender"/></svg>
59
+ <li>date</li>
60
+ <svg><use xlink:href="#tag"/></svg>
61
+ <li>object</li>
62
+ </ul>
63
+ </div>
64
+ <svg><use xlink:href="#line"/></svg> //ここが反映されなくなる☆
65
+ </section>
66
+ </div>
67
+ </article>
68
+ <article class="article">
69
+ <section class="section2">
70
+ <div class="set">
71
+ <h1>Title1</h1>
72
+ <ul>
73
+ <svg><use xlink:href="#calender"/></svg>
74
+ <li>date</li>
75
+ <svg><use xlink:href="#tag"/></svg>
76
+ <li>object</li>
77
+ </ul>
78
+ </div>
79
+ <svg><use xlink:href="#line"/></svg> //ここが反映されなくなる☆
80
+ </section>
81
+ </div>
82
+ </article>
83
+ </div>
69
84
  </body>
70
85
 
71
86
 
72
87
  ```
88
+ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓追記↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
89
+ ```svg
90
+ 申し訳ありません。
91
+ 文字数が１７７７０文字になってしまったので、コードペンにsvgを記載しています。
92
+ https://codepen.io/89txtx/pen/XWNpEbG
93
+ ```
94
+ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
73
95
 
96
+
74
97
  #試したこと
75
98
  ```html
76
99
  <symbol id="line">

5

試したこと追記

2021/02/13 18:26

投稿

Kosketu
Kosketu

スコア46

title CHANGED
File without changes
body CHANGED
@@ -69,4 +69,25 @@
69
69
  </body>
70
70
 
71
71
 
72
+ ```
73
+
74
+ #試したこと
75
+ ```html
76
+ <symbol id="line">
77
+ <defs
78
+ id="defs20">
79
+ <symbol>
80
+ <linearGradient">
81
+ <stop/>
82
+ <stop/>
83
+ </linearGradient>
84
+ </symbol>
85
+ </defs>
86
+ <g>
87
+ <use xlink:href="test">
88
+ <g/>
89
+ <path/>
90
+ </g>
91
+ </symbol>
92
+
72
93
  ```

4

状況説明追記

2021/02/03 09:33

投稿

Kosketu
Kosketu

スコア46

title CHANGED
File without changes
body CHANGED
@@ -10,6 +10,7 @@
10
10
  ───────────────
11
11
  □　しかし、"#line,#folder"は、display属性値をnoneにしなければ、呼び出せますが、
12
12
  反面、該当画像がページ先頭に表示されてしまいます。
13
+ （display:noneだと先頭の表示画像と一緒に呼び出し画像が消えてしまうような状況）
13
14
  本件、CSSにてbackground-image指定のコーディングにて、妥協しているのですが
14
15
  項数を減らしたいことから、この問題を解決することはできないものかと考えています。
15
16
 

3

８行目＜g＞開始タグの修正

2021/02/03 08:57

投稿

Kosketu
Kosketu

スコア46

title CHANGED
File without changes
body CHANGED
@@ -34,7 +34,7 @@
34
34
  <defs>
35
35
  <symbol id="svg_10"><metadata></metadata><g><path/></g></symbol>
36
36
  </defs>
37
- <g/><use xlink:href="#svg_10"/><g/></g>
37
+ <g><use xlink:href="#svg_10"/><g/></g>
38
38
  </symbol>
39
39
 
40
40
  <symbol id="btn"><g><polygon/><ellipse/><line/><polygon/><polygon/><polygon/></g></symbol>

2

誤字修正

2021/02/03 08:49

投稿

Kosketu
Kosketu

スコア46

title CHANGED
File without changes
body CHANGED
@@ -2,13 +2,13 @@
2
2
  以下のように、svgをbody直下に記入して、
3
3
  画像を呼び起こす方法を採ったコーディングを行っています。
4
4
 
5
- □　"#logo,#btn,#tag,#calender"は、useタグとidを指定して呼び出しできるのですが、
5
+ □　"#logo,#btn,#tag,#calender"は、useタグとidを指定して呼び出しできました。
6
6
  ───────────────
7
7
  <svg>
8
8
  <use xlink:href="#~~~~~~"></use>
9
9
  </svg>
10
10
  ───────────────
11
- □　"#line,#folder"は、display属性値をnoneにしなければ、呼び出せますが、
11
+ □　しかし、"#line,#folder"は、display属性値をnoneにしなければ、呼び出せますが、
12
12
  反面、該当画像がページ先頭に表示されてしまいます。
13
13
  本件、CSSにてbackground-image指定のコーディングにて、妥協しているのですが
14
14
  項数を減らしたいことから、この問題を解決することはできないものかと考えています。

1

整理しました

2021/02/03 08:45

投稿

Kosketu
Kosketu

スコア46

title CHANGED
File without changes
body CHANGED
@@ -32,9 +32,9 @@
32
32
  <svg class="defs" version="1.1" xmlns="http://www.w3.org/2000/svg" display="none">
33
33
  <symbol id="logo">
34
34
  <defs>
35
- <symbol></metadata><g><path/></g></symbol>
35
+ <symbol id="svg_10"><metadata></metadata><g><path/></g></symbol>
36
36
  </defs>
37
- <g/><g/></g>
37
+ <g/><use xlink:href="#svg_10"/><g/></g>
38
38
  </symbol>
39
39
 
40
40
  <symbol id="btn"><g><polygon/><ellipse/><line/><polygon/><polygon/><polygon/></g></symbol>