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

cx 属性定义一个中心点的 x 轴坐标。

+ +

有三个元素在使用此属性：{{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)}}

+
+ +

圆

+ +

对于 {{SVGElement('circle')}}，cx 用来定义图形中心的 x 轴坐标。

+ + + + + + + + + + + + + + + + +
值<length> | <percentage>
默认值0
可变性Yes
+ +

注：起始于 SVG2 cx，是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。

+ +

椭圆

+ +

对于 {{SVGElement('ellipse')}}，cx 用来定义图形中心的 x 轴坐标。

+ + + + + + + + + + + + + + + + +
值<length> | <percentage>
默认值0
可变性Yes
+ +

注： 起始于 SVG2 cx，是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。

+ +

径向渐变

+ +

对于 {{SVGElement('radialGradient')}}, cx 用来定义径向渐变终止圆的 x 轴坐标。

+ + + + + + + + + + + + + + + + +
值<length>
默认值50%
可变性Yes
+ +

示例

+ + + +
<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")}}Definition for SVG2 paint servers.
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}Initial definition for <radialGradient>
{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}Initial definition for <ellipse>
{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}Initial definition for <circle>
-- cgit v1.2.3-54-g00ecf