initial commit

1 files changed, 116 insertions, 0 deletions

diff --git a/files/zh-cn/web/svg/element/radialgradient/index.html b/files/zh-cn/web/svg/element/radialgradient/index.html
new file mode 100644
index 0000000000..a104d45c15
--- /dev/null
+++ b/files/zh-cn/web/svg/element/radialgradient/index.html
@@ -0,0 +1,116 @@
+---
+title: radialGradient
+slug: Web/SVG/Element/radialGradient
+tags:
+  - SVG
+  - SVG渐变
+  - 元素
+translation_of: Web/SVG/Element/radialGradient
+---
+<div>{{SVGRef}}</div>
+
+<p><code>radialGradient</code> 用来定义径向渐变，以对图形元素进行填充或描边。</p>
+
+<h2 id="用法">用法</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="属性">属性</h2>
+
+<h3 id="全局属性">全局属性</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core">核心属性</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">外观属性</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="专有属性">专有属性</h3>
+
+<ul>
+ <li>{{SVGAttr("gradientUnits")}}</li>
+ <li>{{SVGAttr("gradientTransform")}}</li>
+ <li>{{SVGAttr("cx")}}</li>
+ <li>{{SVGAttr("cy")}}</li>
+ <li>{{SVGAttr("r")}}</li>
+ <li>{{SVGAttr("fx")}}</li>
+ <li>{{SVGAttr("fy")}}</li>
+ <li>{{SVGAttr("fr")}}</li>
+ <li>{{SVGAttr("spreadMethod")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="DOM_接口">DOM 接口</h2>
+
+<p>该元素实现了 {{domxref("SVGRadialGradientElement")}} 接口。</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: xml"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 240 120<span class="punctuation token">"</span></span>
+   <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>defs</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>radialGradient</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>exampleGradient<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>gold<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>95%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>green<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>radialGradient</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>radialGradient</span> <span class="attr-name token">spreadMethod</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reflect<span class="punctuation token">"</span></span>
+                    <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50%<span class="punctuation token">"</span></span>
+                    <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50%<span class="punctuation token">"</span></span>
+                    <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50%<span class="punctuation token">"</span></span>
+                    <span class="attr-name token">fx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>25%<span class="punctuation token">"</span></span>
+                    <span class="attr-name token">fy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75%<span class="punctuation token">"</span></span>
+                    <span class="attr-name token">fr</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10%<span class="punctuation token">"</span></span>
+                   <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flameGradient<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>yellow<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>95%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>radialGradient</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>defs</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#exampleGradient)<span class="punctuation token">"</span></span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#flameGradient)<span class="punctuation token">"</span></span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>180<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample("Example", 120, 120)}}</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', 'pservers.html#RadialGradients', '&lt;radialGradient&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>加入 <code>fr</code> 属性</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '&lt;radialGradient&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">本页面上的兼容性表格是由结构化数据生成的。如果你想要为此数据做贡献，请移步至 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们发送 pull request。</div>
+
+<p>{{Compat("svg.elements.radialGradient")}}</p>
+
+<h2 id="相关内容">相关内容</h2>
+
+<ul>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>