initial commit

1 files changed, 172 insertions, 0 deletions

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
+---
+<div>{{SVGRef}}</div>
+
+<p><strong><code>cx</code></strong> 属性定义一个中心点的 x 轴坐标。</p>
+
+<p>有三个元素在使用此属性：{{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">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;radialGradient cx="25%" id="myGradient"&gt;
+    &lt;stop offset="0"    stop-color="white" /&gt;
+    &lt;stop offset="100%" stop-color="black" /&gt;
+  &lt;/radialGradient&gt;
+
+  &lt;circle cx="50" cy="50" r="45"/&gt;
+  &lt;ellipse cx="150" cy="50" rx="45" ry="25" /&gt;
+  &lt;rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', 100, 100)}}</p>
+</div>
+
+<h2 id="圆">圆</h2>
+
+<p>对于 {{SVGElement('circle')}}，<code>cx</code> 用来定义图形中心的 x 轴坐标。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">值</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</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>
+
+<p class="note">注：起始于 SVG2 <code>cx</code>，是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。</p>
+
+<h2 id="椭圆">椭圆</h2>
+
+<p>对于 {{SVGElement('ellipse')}}，<code>cx</code> 用来定义图形中心的 x 轴坐标。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">值</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</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>
+
+<p class="note"><strong>注：</strong> 起始于 SVG2 <code>cx</code>，是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。</p>
+
+<h2 id="径向渐变">径向渐变</h2>
+
+<p>对于 {{SVGElement('radialGradient')}}, <code>cx</code> 用来定义径向渐变终止圆的 x 轴坐标。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">值</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">默认值</th>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">可变性</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="示例">示例</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;radialGradient cx="0" id="myGradient000"&gt;
+      &lt;stop offset="0%"   stop-color="gold" /&gt;
+      &lt;stop offset="50%"  stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/radialGradient&gt;
+
+    &lt;radialGradient cx="50%" id="myGradient050"&gt;
+      &lt;stop offset="0%"   stop-color="gold" /&gt;
+      &lt;stop offset="50%"  stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/radialGradient&gt;
+
+    &lt;radialGradient cx="100%" id="myGradient100"&gt;
+      &lt;stop offset="0%"   stop-color="gold" /&gt;
+      &lt;stop offset="50%"  stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /&gt;
+  &lt;rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /&gt;
+  &lt;rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p>
+
+<h2 id="技术规范">技术规范</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>Definition for SVG2 paint servers.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for <code>&lt;radialGradient&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for <code>&lt;ellipse&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for <code>&lt;circle&gt;</code></td>
+  </tr>
+ </tbody>
+</table>