diff options
Diffstat (limited to 'files/ja/web/svg/attribute/cx/index.html')
| -rw-r--r-- | files/ja/web/svg/attribute/cx/index.html | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/files/ja/web/svg/attribute/cx/index.html b/files/ja/web/svg/attribute/cx/index.html new file mode 100644 index 0000000000..0420ae0de1 --- /dev/null +++ b/files/ja/web/svg/attribute/cx/index.html @@ -0,0 +1,176 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +translation_of: Web/SVG/Attribute/cx +--- +<div>{{SVGRef}}</div> + +<p><strong><code>cx</code></strong>属性は中心のx-座標を定義します。</p> + +<p>3つの要素がこの属性を用います: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("radialGradient")}}</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 300 100" xmlns="http://www.w3.org/2000/svg"> + <radialGradient cx="25%" id="myGradient"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + + <circle cx="50" cy="50" r="45"/> + <ellipse cx="150" cy="50" rx="45" ry="25" /> + <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', 100, 100)}}</p> +</div> + +<h2 id="circle" name="circle">circle</h2> + +<p>{{SVGElement('circle')}}に対して、<code>cx</code>は、図形のx-軸の中心を定義します。</p> + +<table class="プロパティ"> + <tbody> + <tr> + <th scope="row">値</th> + <td>{{cssxref("length-percentage")}}</td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注:</strong>SVG2として開始する場合には、<code>cx</code>は<em>ジオメトリプロパティ</em>です。これは本属性が円へのCSSプロパティとしても利用可能であることを意味します。</p> + +<h2 id="ellipse" name="ellipse">ellipse</h2> + +<p>{{SVGElement('ellipse')}}に対して、<code>cx</code>は、図形のx-軸の中心を定義します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">値</th> + <td>{{cssxref("length-percentage")}}</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注:</strong>SVG2として開始する場合には、<code>cx</code>は<em>ジオメトリプロパティ</em>です。これは本属性が楕円へのCSSプロパティとしても利用可能であることを意味します。</p> + +<h2 id="radialGradient" name="radialGradient">radialGradient</h2> + +<p>{{SVGElement('radialGradient')}}に対して、<code>cx</code>は、放射状勾配の終端円のx-軸の中心を定義します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">値</th> + <td>{{cssxref("length")}}</td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<h4 id="Example" name="Example">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient cx="0" id="myGradient000"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cx="50%" id="myGradient050"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cx="100%" id="myGradient100"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + </defs> + + <rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /> + <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /> + <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</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", "geometry.html#CX", "cx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition as a geometry property</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>SVG2ペイントサーバに対する定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><radialGradient></code>に対する初期定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><ellipse></code>に対する初期定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><circle></code>に対する初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute/cy">cy</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute/r">r</a></li> +</ul> |