diff options
Diffstat (limited to 'files/ja/web/svg/attribute/x1/index.html')
| -rw-r--r-- | files/ja/web/svg/attribute/x1/index.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/files/ja/web/svg/attribute/x1/index.html b/files/ja/web/svg/attribute/x1/index.html new file mode 100644 index 0000000000..cf76281b74 --- /dev/null +++ b/files/ja/web/svg/attribute/x1/index.html @@ -0,0 +1,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> |