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
134
135
136
137
138
139
140
141
|
---
title: points
slug: Web/SVG/Attribute/points
translation_of: Web/SVG/Attribute/points
---
<div>{{SVGRef}}</div>
<p><strong><code>points</code></strong> 属性は、点のリストを定義します。各点は、ユーザー座標系におけるX座標とY座標を表す数値の組で定義されます。属性に奇数の座標が含まれている場合、最後の座標は無視されます。</p>
<p>2つの要素がこの属性を使用しています: {{SVGElement("polyline")}}、および{{SVGElement("polygon")}}</p>
<div id="topExample">
<div class="hidden">
<pre class="brush: css notranslate">html,body,svg { height:100% }</pre>
</div>
<pre class="brush: html notranslate"><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></pre>
<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>
<h2 id="polyline">polyline</h2>
<p>{{SVGElement('polyline')}}の場合、 <code>points</code> で定義された点リストはそれぞれが描きたい線の頂点を表します。各点は、ユーザー座標系のX座標とY座標として定義されます。</p>
<p class="note"><strong>Note:</strong> polyline は最初の点と最後の点が接続されない開いた図形となります。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>[ {{cssxref("number")}}+ ]#</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
<h3 id="Example">Example</h3>
<div class="hidden">
<pre class="brush: css notranslate">html,body,svg { height:100% }</pre>
</div>
<pre class="brush: html notranslate"><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></pre>
<p>{{EmbedLiveSample('polyline', '100%', 200)}}</p>
<h2 id="polygon">polygon</h2>
<p>{{SVGElement('polygon')}}の場合、<code>points</code> で定義された点リストはそれぞれが描きたい図形の頂点を表します。各点は、ユーザー座標系のX座標とY座標として定義されます。</p>
<p class="note"><strong>Note:</strong> polygon は最初の点と最後の点が接続された閉じた図形となります。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>[ {{cssxref("number")}}+ ]#</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
<h3 id="Example_2">Example</h3>
<div class="hidden">
<pre class="brush: css notranslate">html,body,svg { height:100% }</pre>
</div>
<pre class="brush: html notranslate"><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></pre>
<p>{{EmbedLiveSample('polygon', '100%', 200)}}</p>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Definition for <code><polygon></code></td>
</tr>
<tr>
<td>{{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Definition for <code><polyline></code></td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition for <code><polygon></code></td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition for <code><polyline></code></td>
</tr>
</tbody>
</table>
|
