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/cy/index.html | 172 +++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/ja/web/svg/attribute/cy/index.html (limited to 'files/ja/web/svg/attribute/cy') diff --git a/files/ja/web/svg/attribute/cy/index.html b/files/ja/web/svg/attribute/cy/index.html new file mode 100644 index 0000000000..a5a891aad3 --- /dev/null +++ b/files/ja/web/svg/attribute/cy/index.html @@ -0,0 +1,172 @@ +--- +title: cy +slug: Web/SVG/Attribute/cy +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/cy +--- +
{{SVGRef}}
+ +

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

+ +

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

+ +
+ + +
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient cy="25%" id="myGradient">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+
+  <circle  cy="50"  cx="50" r="45"/>
+  <ellipse cy="150" cx="50" rx="45" ry="25" />
+  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
+</svg>
+ +

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

+
+ +

circle

+ +

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

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
既定値0
アニメーション可否はい
+ +

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

+ +

ellipse

+ +

{{SVGElement('ellipse')}}に対して、cyは図形中心のy-座標を定義します。

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
既定値0
アニメーション可否はい
+ +

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

+ +

radialGradient

+ +

{{SVGElement('radialGradient')}}に対して、cyは、放射状勾配の終端円のy-座標を定義します。

+ + + + + + + + + + + + + + + + +
値<length>
既定値50%
アニメーション可否はい
+ +

例

+ + + +
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient cy="0" id="myGradient000">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="50%" id="myGradient050">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="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#CY", "cy")}}{{Spec2("SVG2")}}ジオメトリプロパティとしての定義
{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}{{Spec2("SVG2")}}SVG2ペイントサーバに対する定義
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}<radialGradient>に対する初期定義
{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}<ellipse>に対する初期定義
{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}<circle>に対する初期定義
-- cgit v1.2.3-54-g00ecf