回答編集履歴
4
「タグ」→「要素」に変更
test
CHANGED
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
path / g
|
|
25
|
+
path / g 要素ともに id="～" はオブジェクトにつけられた名前です。
|
|
26
26
|
|
|
27
|
-
path
|
|
27
|
+
path 要素の d="～" で書かれている部分が描画コマンドになります。
|
|
28
28
|
|
|
29
|
-
g タグはグループ化する際に使用される
|
|
29
|
+
g タグはグループ化する際に使用される要素です。
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
3
大文字・小文字の描画コマンドの違いについて追記
test
CHANGED
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
|
|
65
|
-
といった使い方になります。
|
|
65
|
+
といった使い方になります。コマンドに大文字と小文字があるのは大文字が絶対座標、小文字が相対座標といった使い方になります。
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
|
2
gタグについての説明を追加
test
CHANGED
|
@@ -22,13 +22,15 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
id="～" はオブジェクトにつけられた名前です。
|
|
25
|
+
path / g タグともに id="～" はオブジェクトにつけられた名前です。
|
|
26
26
|
|
|
27
|
-
d="～" で書かれている部分が描画コマンドになります。
|
|
27
|
+
path タグの d="～" で書かれている部分が描画コマンドになります。
|
|
28
|
+
|
|
29
|
+
g タグはグループ化する際に使用されるタグです。
|
|
28
30
|
|
|
29
31
|
|
|
30
32
|
|
|
31
|
-
ロゴの最初の１文字目を展開すると、以下のようになります。
|
|
33
|
+
参考までに ロゴの最初の１文字目（path）を展開すると、以下のようになります。
|
|
32
34
|
|
|
33
35
|
```svg
|
|
34
36
|
|
1
path タグの使い方を追記
test
CHANGED
|
@@ -14,7 +14,59 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
> 納得がいかないのは、数字の羅列で、この数字に関することは、ググってもなかなか出てきませんでした。
|
|
20
|
+
|
|
21
|
+
> 「path id」と「g id」 についてです。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
id="～" はオブジェクトにつけられた名前です。
|
|
26
|
+
|
|
27
|
+
d="～" で書かれている部分が描画コマンドになります。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
ロゴの最初の１文字目を展開すると、以下のようになります。
|
|
32
|
+
|
|
33
|
+
```svg
|
|
34
|
+
|
|
35
|
+
M 14,35.2
|
|
36
|
+
|
|
37
|
+
A 13.9, 13.9, 0, 0, 1, 6.785, 33.19
|
|
38
|
+
|
|
39
|
+
h 8.848
|
|
40
|
+
|
|
41
|
+
a 14.228, 14.228, 0, 0, 0, 8.847-2.739
|
|
42
|
+
|
|
43
|
+
A 13.97, 13.97, 0, 0, 1, 14,35.2
|
|
44
|
+
|
|
45
|
+
Z
|
|
46
|
+
|
|
17
|
-
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
M / A / h / Z 等が描画コマンドになります。
|
|
52
|
+
|
|
53
|
+
M が Move To（移動）
|
|
54
|
+
|
|
55
|
+
A が Arc（円弧）
|
|
56
|
+
|
|
57
|
+
h が 水平線の描画
|
|
58
|
+
|
|
59
|
+
Z パスを閉じる
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
といった使い方になります。
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
簡易的な説明は、
|
|
68
|
+
|
|
69
|
+
|
|
18
70
|
|
|
19
71
|
■ SVG入門 - とほほのWWW入門
|
|
20
72
|
|
|
@@ -22,4 +74,10 @@
|
|
|
22
74
|
|
|
23
75
|
|
|
24
76
|
|
|
25
|
-
|
|
77
|
+
を参照下さい。もう少し専門的な説明は、こちらを見た方が良いかと思います。
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
■ svg要素の基本的な使い方まとめ
|
|
82
|
+
|
|
83
|
+
[http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_03.htm](http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_03.htm)
|