[zh-cn] update radicalgradient (#12680)

mdn · Apr 11, 2023 · e124a31 · e124a31
1 parent 8ef8963
commit e124a31
Showing 1 changed file with 58 additions and 55 deletions.
diff --git a/files/zh-cn/web/svg/element/radialgradient/index.md b/files/zh-cn/web/svg/element/radialgradient/index.md
@@ -1,77 +1,84 @@
 ---
-title: radialGradient
+title: <radialGradient>
 slug: Web/SVG/Element/radialGradient
 ---
 
 {{SVGRef}}
 
-`radialGradient` 用来定义径向渐变，以对图形元素进行填充或描边。
+**`<radialGradient>`** 用来定义径向渐变，以对图形元素进行填充或描边。
 
-## 用法
+> **备注：** 不要与 CSS {{cssxref('radial-gradient()')}} 搞混了，CSS 渐变只能应用在 HTML 元素上，而 SVG 渐变只能运用在 SVG 元素上。
 
-{{svginfo}}
+## 示例
 
-## 属性
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
 
-### 全局属性
+```html
+<svg
+  viewBox="0 0 10 10"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <radialGradient id="myGradient">
+      <stop offset="10%" stop-color="gold" />
+      <stop offset="95%" stop-color="red" />
+    </radialGradient>
+  </defs>
+
+  <!-- 使用自定义的径向渐变 -->
+  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
+</svg>
+```
 
-- [核心属性](/zh-CN/docs/Web/SVG/Attribute#Core) »
-- [外观属性](/zh-CN/docs/Web/SVG/Attribute#Presentation) »
-- [Xlink 属性](/zh-CN/docs/Web/SVG/Attribute#XLink) »
-- {{SVGAttr("class")}}
-- {{SVGAttr("style")}}
-- {{SVGAttr("externalResourcesRequired")}}
+{{EmbedLiveSample("示例", 120, 120)}}
 
-### 专有属性
+## 属性
 
-- {{SVGAttr("gradientUnits")}}
-- {{SVGAttr("gradientTransform")}}
 - {{SVGAttr("cx")}}
+  - : 这个属性定义了径向渐变的终点圆的 X 坐标。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`50%`；*动画性*：**有**
 - {{SVGAttr("cy")}}
-- {{SVGAttr("r")}}
+  - : 这个属性定义了径向渐变的终点圆的 Y 坐标。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`50%`；*动画性*：**有**
+- {{SVGAttr("fr")}}
+  - : 这个属性定义了径向梯度的起点圆的半径。渐变的绘制将使 0% {{SVGElement('stop','gradient stop')}} 被映射到起始圆的周长。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`0%`；*动画性*：**有**
 - {{SVGAttr("fx")}}
+  - : 这个属性定义了径向渐变的起点圆的 X 坐标。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：与 `cx` 相同；*动画性*：**有**
 - {{SVGAttr("fy")}}
-- {{SVGAttr("fr")}}
+  - : 这个属性定义了径向渐变的起点圆的 Y 坐标。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：与 `cy` 相同；*动画性*：**有**
+- {{SVGAttr("gradientUnits")}}
+  - : 这个属性定义了 `cx`、`cy`、`r`、`fx`、`fy`、`fr` 属性的坐标系统；*值类型*：`userSpaceOnUse`|`objectBoundingBox`；*默认值*：`objectBoundingBox`；*动画性*：**有**
+- {{SVGAttr("gradientTransform")}}
+  - : 这个属性为梯度坐标系提供了额外的[变换](/zh-CN/docs/Web/SVG/Atribute/transform)。*值类型*：**[\<transform-list>](/zh-CN/docs/Web/SVG/Content_type#transform-list)** ；*默认值*：*identity transform*；*动画性*：**有**
+- {{SVGAttr("href")}}
+  - : 这个属性定义了对另一个将被用作模板 `<radialGradient>` 元素的引用。*值类型*：[**\<URL>**](/zh-CN/docs/Web/SVG/Content_type#url)；*默认值*：none；*动画性*：**有**
+- {{SVGAttr("r")}}
+  - : 这个属性定义了径向渐变的终点圆的半径。梯度的绘制将使 100% 的{{SVGElement('stop','gradient stop')}} 被映射到终点圆的周长。*值类型*：[**\<length>**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`50%`；*动画性*：**有**
 - {{SVGAttr("spreadMethod")}}
+  - : 这个属性表明，如果渐变在包含渐变的形状的边界内开始或结束，它将如何表现。*值类型*：`pad`|`reflect`|`repeat`；*默认值*：`pad`；*动画性*：**有**
 - {{SVGAttr("xlink:href")}}
+  - : {{Deprecated_Header}}对另一个将被用作模板的 `<radialGradient>` 元素的 [\<IRI>](/zh-CN/docs/Web/SVG/Content_type#iri) 引用。*值类型*：[**\<IRI>**](/zh-CN/docs/Web/SVG/Content_type#iri)；*默认值*：none；*动画性*：**有**
 
-## DOM 接口
-
-该元素实现了 {{domxref("SVGRadialGradientElement")}} 接口。
-
-## 示例
-
-### SVG
+### 全局属性
 
-```xml
-<svg width="120" height="120" viewBox="0 0 240 120"
-   xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <radialGradient id="exampleGradient">
-      <stop offset="10%" stop-color="gold"/>
-      <stop offset="95%" stop-color="green"/>
-    </radialGradient>
-    <radialGradient spreadMethod="reflect"
-                    cx="50%"
-                    cy="50%"
-                    r="50%"
-                    fx="25%"
-                    fy="75%"
-                    fr="10%"
-                   id="flameGradient">
-      <stop offset="0%" stop-color="white"/>
-      <stop offset="10%" stop-color="yellow"/>
-      <stop offset="95%" stop-color="red"/>
-    </radialGradient>
-  </defs>
-  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
-  <circle fill="url(#flameGradient)" cx="180" cy="60" r="50"/>
-</svg>
-```
+- [核心属性](/zh-CN/docs/Web/SVG/Attribute/Core)
+  - : 最重要的：{{SVGAttr('id')}}
+- [样式属性](/zh-CN/docs/Web/SVG/Attribute/Styling)
+  - : {{SVGAttr('class')}}、{{SVGAttr('style')}}
+- 事件属性
+  - : [全局事件属性](/zh-CN/docs/Web/SVG/Attribute/Events#全局事件属性)、[文档元素事件属性](/zh-CN/docs/Web/SVG/Attribute/Events#文档元素事件属性)
+- [表现属性](/zh-CN/docs/Web/SVG/Attribute/Presentation)
+  - : 最重要的：{{SVGAttr('clip-path')}}、{{SVGAttr('clip-rule')}}、{{SVGAttr('color')}}、{{SVGAttr('color-interpolation')}}、{{SVGAttr('color-rendering')}}、{{SVGAttr('cursor')}}、{{SVGAttr('display')}}、{{SVGAttr('fill')}}、{{SVGAttr('fill-opacity')}}、{{SVGAttr('fill-rule')}}、{{SVGAttr('filter')}}、{{SVGAttr('mask')}}、{{SVGAttr('opacity')}}、{{SVGAttr('pointer-events')}}、{{SVGAttr('shape-rendering')}}、{{SVGAttr('stroke')}}、{{SVGAttr('stroke-dasharray')}}、{{SVGAttr('stroke-dashoffset')}}、{{SVGAttr('stroke-linecap')}}、{{SVGAttr('stroke-linejoin')}}、{{SVGAttr('stroke-miterlimit')}}、{{SVGAttr('stroke-opacity')}}、{{SVGAttr('stroke-width')}}、{{SVGAttr("transform")}}、{{SVGAttr('vector-effect')}}、{{SVGAttr('visibility')}}
+- XLink 属性
+  - : {{SVGAttr("xlink:href")}}、{{SVGAttr("xlink:title")}}
 
-### 结果
+## 使用说明
 
-{{EmbedLiveSample("示例", 120, 120)}}
+{{svginfo}}
 
 ## 规范
 
@@ -80,7 +87,3 @@ slug: Web/SVG/Element/radialGradient
 ## 浏览器兼容性
 
 {{Compat}}
-
-## 相关内容
-
-- {{SVGElement("linearGradient")}}