-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
133 lines (107 loc) · 3.16 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
---
title: points
slug: Web/SVG/Attribute/points
l10n:
sourceCommit: b4f998244660723175f8e06b5d77f68cfb1d1f1a
---
{{SVGRef}}
**`points`** 属性は、点のリストを定義します。各点は、ユーザー座標系における X 座標と Y 座標を表す数値の組で定義されます。属性に奇数の座標が含まれている場合、最後の座標は無視されます。
この属性は次の SVG 要素で使用できます。
- {{SVGElement("polyline")}}
- {{SVGElement("polygon")}}
## 例
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
<!-- polyline は開いた図形となる -->
<polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
<!-- polygon は閉じた図形となる -->
<polygon
stroke="black"
fill="none"
transform="translate(100,0)"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
通常、 X と Y をカンマで、座標群をスペースで区切るのが
ベストプラクティスとされます。
その方法はコードを人間にとって読みやすいものにしてくれます。
-->
</svg>
```
{{EmbedLiveSample("Example", '100%', 200)}}
## polyline
{{SVGElement('polyline')}}の場合、 `points` で定義された点リストはそれぞれが描きたい線の頂点を表します。各点は、ユーザー座標系の X 座標と Y 座標として定義されます。
> [!NOTE]
> polyline は最初の点と最後の点が接続されない開いた図形となります。
<table class="properties">
<tbody>
<tr>
<th scope="row">値</th>
<td>[ {{cssxref("number")}}+ ]#</td>
</tr>
<tr>
<th scope="row">既定値</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">アニメーション</th>
<td>可</td>
</tr>
</tbody>
</table>
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- polyline は開いた図形となる -->
<polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
```
{{EmbedLiveSample('polyline', '100%', 200)}}
## polygon
{{SVGElement('polygon')}}の場合、`points` で定義された点リストはそれぞれが描きたい図形の頂点を表します。各点は、ユーザー座標系の X 座標と Y 座標として定義されます。
> [!NOTE]
> polygon は最初の点と最後の点が接続された閉じた図形となります。
<table class="properties">
<tbody>
<tr>
<th scope="row">値</th>
<td>[ {{cssxref("number")}}+ ]#</td>
</tr>
<tr>
<th scope="row">既定値</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">アニメーション</th>
<td>可</td>
</tr>
</tbody>
</table>
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- polygon は閉じた図形となる -->
<polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
```
{{EmbedLiveSample('polygon', '100%', 200)}}
## 仕様書
{{Specifications}}