From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/svg/attribute/cx/index.html | 176 +++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 files/ja/web/svg/attribute/cx/index.html (limited to 'files/ja/web/svg/attribute/cx') 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 +--- +
{{SVGRef}}
+ +

cx属性は中心のx-座標を定義します。

+ +

3つの要素がこの属性を用います: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("radialGradient")}}

+ +
+ + +
<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>
+ +

{{EmbedLiveSample('topExample', 100, 100)}}

+
+ +

circle

+ +

{{SVGElement('circle')}}に対して、cxは、図形のx-軸の中心を定義します。

+ + + + + + + + + + + + + + + + +
値{{cssxref("length-percentage")}}
既定値0
アニメーション可否はい
+ +

注:SVG2として開始する場合には、cxはジオメトリプロパティです。これは本属性が円へのCSSプロパティとしても利用可能であることを意味します。

+ +

ellipse

+ +

{{SVGElement('ellipse')}}に対して、cxは、図形のx-軸の中心を定義します。

+ + + + + + + + + + + + + + + + +
値{{cssxref("length-percentage")}}
Default value0
Animatableはい
+ +

注:SVG2として開始する場合には、cxはジオメトリプロパティです。これは本属性が楕円へのCSSプロパティとしても利用可能であることを意味します。

+ +

radialGradient

+ +

{{SVGElement('radialGradient')}}に対して、cxは、放射状勾配の終端円のx-軸の中心を定義します。

+ + + + + + + + + + + + + + + + +
値{{cssxref("length")}}
既定値50%
アニメーション可否はい
+ +

例

+ + + +
<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>
+ +

{{EmbedLiveSample('radialGradient', 150, '100%')}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("SVG2", "geometry.html#CX", "cx")}}{{Spec2("SVG2")}}Definition as a geometry property
{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}{{Spec2("SVG2")}}SVG2ペイントサーバに対する定義
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}<radialGradient>に対する初期定義
{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}<ellipse>に対する初期定義
{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}<circle>に対する初期定義
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf