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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: x1
slug: Web/SVG/Attribute/x1
tags:
- Drawing Lines
- Gradients
- LInes
- SVG
- SVG Attribute
- SVG Gradients
- SVGグラデーション
- SVG属性
- Vector Graphics
- グラデーション
- ベクター画像
- 描画
- 直線
translation_of: Web/SVG/Attribute/x1
---
<div>{{SVGRef}}</div>
<p><strong><code>x1</code></strong> 属性は、二つ以上の座標を必要とする SVG 要素を描画するための一つ目の x 座標を指定するのに使います。一つしか座標を必要としない要素は、これの代わりに {{SVGAttr("x")}} 属性を使います。</p>
<p>二つの要素がこの属性を使っています。つまり、{{ SVGElement("line") }} と {{ SVGElement("linearGradient") }} です。</p>
<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>
<pre class="brush: html"><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<line x1="1" x2="5" y1="1" y2="9" stroke="red" />
<line x1="5" x2="5" y1="1" y2="9" stroke="green" />
<line x1="9" x2="5" y1="1" y2="9" stroke="blue" />
</svg></pre>
<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>
<h2 id="line">line</h2>
<p>{{SVGElement('line')}} に関しては、<code>x1</code> は、その直線の開始点の x 座標を定めます。</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">値</th>
<td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td>
</tr>
<tr>
<th scope="row">デフォルト値</th>
<td><code>0</code></td>
</tr>
<tr>
<th scope="row">アニメーション可能</th>
<td>Yes</td>
</tr>
</tbody>
</table>
<h3 id="Example" name="Example">例</h3>
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>
<pre class="brush: html"><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<line x1="1" x2="5" y1="1" y2="9" stroke="red" />
<line x1="5" x2="5" y1="1" y2="9" stroke="green" />
<line x1="9" x2="5" y1="1" y2="9" stroke="blue" />
</svg></pre>
<p>{{EmbedLiveSample('line', '100%', 200)}}</p>
<h2 id="linearGradient">linearGradient</h2>
<p>{{SVGElement('linearGradient')}} に関しては、<code>x1</code> は、グラデーションのストップ値をマッピングするのに使われる<em>グラデーション・ベクトル</em> (<em>gradient vector)</em> の開始点の x 座標を定めます。この属性の正確な振る舞いは、{{SVGAttr('gradientUnits')}} 属性の影響を受けます。</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">値</th>
<td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td>
</tr>
<tr>
<th scope="row">デフォルト値</th>
<td><code>0%</code></td>
</tr>
<tr>
<th scope="row">アニメーション可能</th>
<td>Yes</td>
</tr>
</tbody>
</table>
<h3 id="Example_2" name="Example_2">例</h3>
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>
<pre class="brush: html"><svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
<!--
デフォルトでは、グラデーション・ベクトルは、適用先の形状を囲う境界の
左端から始まります。
-->
<linearGradient x1="0%" id="g0">
<stop offset="0" stop-color="black" />
<stop offset="100%" stop-color="red" />
</linearGradient>
<rect x="1" y="1" width="8" height="8" fill="url(#g0)" />
<!--
ここでは、グラデーション・ベクトルは、適用先の形状を囲う境界の
左端から 80% のところから始まります。
-->
<linearGradient x1="80%" id="g1">
<stop offset="0" stop-color="black" />
<stop offset="100%" stop-color="red" />
</linearGradient>
<rect x="11" y="1" width="8" height="8" fill="url(#g1)" />
</svg></pre>
<p>{{EmbedLiveSample('linearGradient', '100%', 200)}}</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("SVG2", "shapes.html#LineElementX1Attribute", "x1")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Definition for <code><line></code></td>
</tr>
<tr>
<td>{{SpecName("SVG2", "pservers.html#LinearGradientElementX1Attribute", "x1")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Definition for <code><linearGradient></code></td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "shapes.html#LineElementX1Attribute", "x1")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition for <code><line></code></td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "pservers.html#LinearGradientElementX1Attribute", "x1")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition for <code><linearGradient></code></td>
</tr>
</tbody>
</table>
|
