From 4e2375f1efcf82a1391d4881a050002d13ea223f Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 11 Aug 2022 09:02:36 +0800 Subject: [PATCH 1/3] prepare markdown convertion for svg zh-CN --- files/zh-cn/_redirects.txt | 1 - files/zh-cn/_wikihistory.json | 9 - .../index.html | 26 +- .../web/svg/attribute/clip-path/index.html | 10 +- files/zh-cn/web/svg/attribute/clip/index.html | 10 +- files/zh-cn/web/svg/attribute/cx/index.html | 16 +- files/zh-cn/web/svg/attribute/cy/index.html | 16 +- files/zh-cn/web/svg/attribute/d/index.html | 6 +- .../web/svg/attribute/display/index.html | 10 +- .../web/svg/attribute/fill-rule/index.html | 36 +- files/zh-cn/web/svg/attribute/id/index.html | 11 +- files/zh-cn/web/svg/attribute/index.html | 2 - .../svg/attribute/letter-spacing/index.html | 12 +- .../web/svg/attribute/marker-end/index.html | 12 +- .../web/svg/attribute/marker-start/index.html | 12 +- files/zh-cn/web/svg/attribute/max/index.html | 12 +- .../zh-cn/web/svg/attribute/media/index.html | 12 +- .../web/svg/attribute/pathlength/index.html | 10 +- .../web/svg/attribute/patternunits/index.html | 10 +- .../svg/attribute/pointer-events/index.html | 10 +- .../web/svg/attribute/presentation/index.html | 2 - .../attribute/preserveaspectratio/index.html | 2 +- files/zh-cn/web/svg/attribute/r/index.html | 10 +- files/zh-cn/web/svg/attribute/rx/index.html | 12 +- .../web/svg/attribute/styling/index.html | 2 - .../zh-cn/web/svg/attribute/target/index.html | 14 +- files/zh-cn/web/svg/content_type/index.html | 2 +- .../zh-cn/web/svg/element/clippath/index.html | 10 +- .../web/svg/element/foreignobject/index.html | 12 +- files/zh-cn/web/svg/element/index.html | 2 - files/zh-cn/web/svg/element/path/index.html | 4 +- files/zh-cn/web/svg/element/use/index.html | 4 +- files/zh-cn/web/svg/index.html | 4 +- .../svg/svg_1.1_support_in_firefox/index.html | 775 ------------------ .../tutorial/clipping_and_masking/index.html | 63 +- .../svg/tutorial/fills_and_strokes/index.html | 14 +- .../svg/tutorial/filter_effects/index.html | 53 +- .../svg/tutorial/getting_started/index.html | 6 +- .../tutorial/other_content_in_svg/index.html | 16 +- 39 files changed, 133 insertions(+), 1117 deletions(-) delete mode 100644 files/zh-cn/web/svg/svg_1.1_support_in_firefox/index.html diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 9e2686946754e0..64a9815ff09184 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -2492,7 +2492,6 @@ /zh-CN/docs/Web/SVG/Element/圆 /zh-CN/docs/Web/SVG/Element/circle /zh-CN/docs/Web/SVG/Element/多边形 /zh-CN/docs/Web/SVG/Element/polygon /zh-CN/docs/Web/SVG/Element/线性渐变 /zh-CN/docs/Web/SVG/Element/linearGradient -/zh-CN/docs/Web/SVG/Firefox对SVG_1.1的支持 /zh-CN/docs/Web/SVG/SVG_1.1_Support_in_Firefox /zh-CN/docs/Web/SVG/Tutorial/渐变 /zh-CN/docs/Web/SVG/Tutorial/Gradients /zh-CN/docs/Web/Security/CSP/Using_Content_Security_Policy /zh-CN/docs/Web/HTTP/CSP /zh-CN/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types /zh-CN/docs/Learn/Server-side/Configuring_server_MIME_types diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index b5d74a52686667..d80462c4c8cbcf 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -44149,15 +44149,6 @@ "charlie" ] }, - "Web/SVG/SVG_1.1_Support_in_Firefox": { - "modified": "2019-03-23T22:52:10.546Z", - "contributors": [ - "Kylexii", - "sunxiang", - "ziyunfei", - "lunix01" - ] - }, "Web/SVG/SVG_animation_with_SMIL": { "modified": "2019-03-23T22:46:05.864Z", "contributors": [ diff --git a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.html b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.html index 6753d57d7a16be..3a440fe272d5f8 100644 --- a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.html +++ b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.html @@ -14,7 +14,7 @@

你可以在同一文件中使用 SVG 样式，也可以通过外部样式表引入。有三个属性可以使用： mask, clip-path, 和 filter。

-
注意： 在外部文件引入的 SVG 必须与原始文件 同源 。
+
备注： 在外部文件引入的 SVG 必须与原始文件 同源 。

使用内嵌 SVG

@@ -24,7 +24,7 @@

使用内嵌 SVG

在上面的例子中，所有段落会被ID 为my-mask 的SVG <mask>遮罩。

-

例子: Masking

+

示例：Masking

例如，你可以在你的 HTML 文档中用 SVG 和 CSS 代码对 HTML 内容作渐变 mask 效果。

@@ -67,9 +67,9 @@

例子: Masking

上面的示例将渲染出一个有遮罩的例子

-

{{EmbedLiveSample('Example_Masking', 650, 200)}}

+

{{EmbedLiveSample('示例：Masking', 650, 200)}}

-

例子: Clipping

+

示例：Clipping

此示例演示如何使用 SVG 剪辑 HTML 内容。请注意，即使链接的可点击区域也被剪切。

@@ -113,9 +113,9 @@

例子: Clipping

} -

{{EmbedLiveSample('Example_Clipping', 650, 200)}}

+

{{EmbedLiveSample('示例：Clipping', 650, 200)}}

-

例子: Filtering

+

示例：Filtering

这个例子演示了如何使用 SVG 对 HTML 内容进行过滤。它建立了几个过滤器，这些过滤器与 CSS 一起作用于正常和鼠标悬停状态 hover 下的三个元素。

@@ -183,11 +183,11 @@

例子: Filtering

pre.target:hover { filter:url(#f3); } -

{{EmbedLiveSample('Example_Filtering', 650, 200)}}

+

{{EmbedLiveSample('示例：Filtering', 650, 200)}}

View this example live

-

例子: Blurred Text

+

示例：Blurred Text

为了模糊文本，基于 Webkit 的浏览器有一个名为 blur 的（前缀）CSS 过滤器，（另见 CSS filter）。你可以使用 SVG 过滤器获得相同的效果。

@@ -205,19 +205,17 @@

例子: Blurred Text

.blur { filter: url(#wherearemyglasses); }
-

{{ EmbedLiveSample('Example_Blurred_Text', 300, 100) }}

+

{{ EmbedLiveSample('示例：Blurred Text', 300, 100) }}

模糊的计算量很大，所以请谨慎使用它，尤其是在包含滚动或动画的元素中。

- - -

例子: Text Effects

+

示例：Text Effects

SVG 还可以用于添加比纯 HTML 文本更动态、更灵活的文本添加方法。

通过使用 SVG 元素与 HTML 结合创建文本，你可以产生不同的文本的效果。如旋转文本：

-
<svg height="60" width="200">
+
<svg height="60" width="200">
   <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">Example text</text>
 </svg>

 
@@ -227,7 +225,7 @@ 
使用外部引用

 
 
例如，CSS 规则在一个名为 default.css 的文件中，如下这样：

 
-
.target { clip-path: url(resources.svg#c1); }

+
.target { clip-path: url(resources.svg#c1); }

 
 
这个 SVG 就可以从一个名为 resources.svg 的文件中导入，clip 路径为 ID c1。

 
diff --git a/files/zh-cn/web/svg/attribute/clip-path/index.html b/files/zh-cn/web/svg/attribute/clip-path/index.html
index 5f0f935461bf63..b239d0d2947925 100644
--- a/files/zh-cn/web/svg/attribute/clip-path/index.html
+++ b/files/zh-cn/web/svg/attribute/clip-path/index.html
@@ -14,10 +14,9 @@
 
 
作为一种表现属性，clip-path 可以用于任何元素，不过效果最明显的是下列十九种元素：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}

 
-

-
+
示例

+
+
 
 
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
   <clipPath id="myClip" clipPathUnits="objectBoundingBox">
@@ -45,8 +44,7 @@
         clip-path="circle() view-box" />
 </svg>

 
-
{{EmbedLiveSample('topExample', '100%', 200)}}

-

+
{{EmbedLiveSample('示例', '100%', 200)}}

 
 
Usage notes

 
diff --git a/files/zh-cn/web/svg/attribute/clip/index.html b/files/zh-cn/web/svg/attribute/clip/index.html
index afc39cb2751b5a..c9aa43d7fa44bf 100644
--- a/files/zh-cn/web/svg/attribute/clip/index.html
+++ b/files/zh-cn/web/svg/attribute/clip/index.html
@@ -14,10 +14,9 @@
 
 
As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, {{ SVGElement("image") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("pattern") }}, {{ SVGElement("marker") }}

 
-

-
+
示例

+
+
 
 
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
   <!-- Auto clipping -->
@@ -33,8 +32,7 @@
   </svg>
 </svg>

 
-
{{EmbedLiveSample('topExample', '100%', 150)}}

-

+
{{EmbedLiveSample('示例', '100%', 150)}}

 
 
用法

 
diff --git a/files/zh-cn/web/svg/attribute/cx/index.html b/files/zh-cn/web/svg/attribute/cx/index.html
index 2bee4a87dad0d7..8e31f398df6c75 100644
--- a/files/zh-cn/web/svg/attribute/cx/index.html
+++ b/files/zh-cn/web/svg/attribute/cx/index.html
@@ -12,10 +12,9 @@
 
 
有三个元素在使用此属性：{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, 和 {{SVGElement("radialGradient")}}

 
-

-
+
示例

+
+
 
 
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
   <radialGradient cx="25%" id="myGradient">
@@ -28,8 +27,7 @@
   <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
 </svg>

 
-
{{EmbedLiveSample('topExample', 100, 100)}}

-

+
{{EmbedLiveSample('示例', 100, 100)}}

 
 
圆

 
@@ -100,9 +98,7 @@ 
径向渐变

 
 
示例

 
-
+
 
 
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
   <defs>
@@ -130,7 +126,7 @@ 
示例

   <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
 </svg>

 
-
{{EmbedLiveSample('radialGradient', 150, '100%')}}

+
{{EmbedLiveSample('径向渐变', 150, '100%')}}

 
 
规范

 
diff --git a/files/zh-cn/web/svg/attribute/cy/index.html b/files/zh-cn/web/svg/attribute/cy/index.html
index 0f088efc30ff5f..f0e0c0eb8f75ee 100644
--- a/files/zh-cn/web/svg/attribute/cy/index.html
+++ b/files/zh-cn/web/svg/attribute/cy/index.html
@@ -12,10 +12,9 @@
 
 
有三个元素在使用此属性：{{SVGElement("circle")}}，{{SVGElement("ellipse")}} 和 {{SVGElement("radialGradient")}}

 
-

-
+
示例

+
+
 
 
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
   <radialGradient cy="25%" id="myGradient">
@@ -28,8 +27,7 @@
   <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
 </svg>

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

-

+
{{EmbedLiveSample('示例', '100%', 300)}}

 
 
圆

 
@@ -100,9 +98,7 @@ 
径向渐变

 
 
示例

 
-
+
 
 
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
   <defs>
@@ -130,7 +126,7 @@ 
示例

   <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
 </svg>

 
-
{{EmbedLiveSample('radialGradient', 150, '100%')}}

+
{{EmbedLiveSample('径向渐变', 150, '100%')}}

 
 
规范

 
diff --git a/files/zh-cn/web/svg/attribute/d/index.html b/files/zh-cn/web/svg/attribute/d/index.html
index 90be9ddf36055a..4f14cfd67b319e 100644
--- a/files/zh-cn/web/svg/attribute/d/index.html
+++ b/files/zh-cn/web/svg/attribute/d/index.html
@@ -79,10 +79,8 @@ 
Curveto

 
 
最后，所有的贝塞尔曲线命令可以制作出一个多边贝塞尔图形，先初始化命令，然后多次指定所有的参数，就可以制作出一个多边贝赛尔图形。因此，下面的两个命令可以创建完全相同的路径：

 
-

-
<path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" />

- <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" />

-

+
<path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" />
+<path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" />

 
 
Arcto

 
diff --git a/files/zh-cn/web/svg/attribute/display/index.html b/files/zh-cn/web/svg/attribute/display/index.html
index a12444f0320d5d..78232904ddd8cf 100644
--- a/files/zh-cn/web/svg/attribute/display/index.html
+++ b/files/zh-cn/web/svg/attribute/display/index.html
@@ -51,12 +51,11 @@
 
 
As a presentation attribute, it can be applied to any element.

 
-

-
 
 
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
   <!-- Here the yellow rectangle is displayed -->
@@ -68,8 +67,7 @@
   <rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect>
 </svg>

 
-
{{EmbedLiveSample("topExample", "240", "120")}}

-

+
{{EmbedLiveSample("示例", "240", "120")}}

 
 
Usage notes

 
diff --git a/files/zh-cn/web/svg/attribute/fill-rule/index.html b/files/zh-cn/web/svg/attribute/fill-rule/index.html
index 2a24c696bf46bf..7a2092c533a8f5 100644
--- a/files/zh-cn/web/svg/attribute/fill-rule/index.html
+++ b/files/zh-cn/web/svg/attribute/fill-rule/index.html
@@ -14,17 +14,16 @@
 
fill-rule  是一个外观属性，它定义了用来确定一个多边形内部区域的算法。

 
 

-
注意：作为一个外观属性，fill-rule 可以被用于 CSS。

+
备注： 作为一个外观属性，fill-rule 可以被用于 CSS。

 

 
 
作为一个外观属性，它可以被应用于任何元素，但只会在这八个元素中有效：{{SVGElement('altGlyph')}}、{{SVGElement('path')}}、{{SVGElement('polygon')}}、{{SVGElement('polyline')}}、{{SVGElement('text')}}、{{SVGElement('textPath')}}、{{SVGElement('tref')}} 和 {{SVGElement('tspan')}}。

 
 
如何判断一个路径组成的多边形的内部区域，从而给它上色，对于一个简单的、没有交错的路径来说，是很显然的；然而，对于一个更为复杂的路径，比如一条与自身相交的路径，或者是这条路径上的其中一段将另一段包围着，要解释什么是“内部”，就不再这么显然了。

 
-

-
+
示例

+
+
 
 
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
   <!-- fill-rule 的默认值 -->
@@ -39,8 +38,7 @@
    points="150,0 121,90 198,35 102,35 179,90"/>
 </svg>

 
-
{{EmbedLiveSample('topExample', '100%', 200)}}

-

+
{{EmbedLiveSample('示例', '100%', 200)}}

 
 
用法

 
@@ -71,20 +69,13 @@ 
用法

 
 
fill-rule 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值：

 
-

- 

- 
nonzero

- 

-

+
nonzero

 
 
这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。

 
 
Example

 
-

-
+
 
 
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
   <!-- nonzero 填充规则被用于路径段会相交的形状上的效果 -->
@@ -107,24 +98,16 @@ 
Example

         d="M210,0  h90 v90 h-90 z
            M230,20 v50 h50 v-50 z"/>
 </svg>

-

 
 
{{EmbedLiveSample('nonzero', '100%', 200)}}

 
-

- 

- 
evenodd

- 

-

+
evenodd

 
 
这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

 
 
Example

 
-

-
+
 
 
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
   <!-- evenodd 填充规则被用于路径段会相交的形状上的效果 -->
@@ -147,7 +130,6 @@ 
Example

         d="M210,0  h90 v90 h-90 z
            M230,20 v50 h50 v-50 z"/>
 </svg>

-

 
 
{{EmbedLiveSample('evenodd', '100%', 200)}}

 
diff --git a/files/zh-cn/web/svg/attribute/id/index.html b/files/zh-cn/web/svg/attribute/id/index.html
index a1b8ff6496af3d..c46878c276dccf 100644
--- a/files/zh-cn/web/svg/attribute/id/index.html
+++ b/files/zh-cn/web/svg/attribute/id/index.html
@@ -9,7 +9,8 @@
 
 
所有元素均可使用该属性。

 
-

+
示例

+
 
<svg width="120" height="120" viewPort="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
   <style type="text/css">
     <![CDATA[
@@ -24,8 +25,7 @@
 </svg>
 

 
-
{{EmbedLiveSample("topExample", "120", "120")}}

-

+
{{EmbedLiveSample("示例", "120", "120")}}

 
 
用法说明

 
@@ -52,11 +52,8 @@ 
用法说明

  
指定元素的 ID。 该 ID 在节点树中必须是唯一的，不能为空字符串，并且不能包含任何空格字符。

 
  

- 
注意： 应当避免使用会被解析为 SVG 视图规范的 id 值（如MyDrawing.svg#svgView(viewBox(0,200,1000,1000))），或被解析为用作 URL 目标片段的基本媒体片段的 id 值。

+ 
备注： 应当避免使用会被解析为 SVG 视图规范的 id 值（如MyDrawing.svg#svgView(viewBox(0,200,1000,1000))），或被解析为用作 URL 目标片段的基本媒体片段的 id 值。

  

-
-
-
  
该属性取值必须在 XML 文档中有效。 独立的 SVG 文档使用 XML 1.0 语法，该语法指定有效的 ID 仅包含指定的字符（字母，数字和一些标点符号），开头不能是数字，点（.）字符或 连字符减号（-）。

  
 
diff --git a/files/zh-cn/web/svg/attribute/index.html b/files/zh-cn/web/svg/attribute/index.html
index 35931d1be4cbe1..2e18a29b366990 100644
--- a/files/zh-cn/web/svg/attribute/index.html
+++ b/files/zh-cn/web/svg/attribute/index.html
@@ -15,7 +15,6 @@
 
 
SVG 属性（从 A-Z 排序）

 
-

 
A

 
 
    
@@ -393,7 +392,6 @@ 
    Z
    
  
  • {{SVGAttr("z")}}
    • 
  
  • {{SVGAttr("zoomAndPan")}}
    • 
 

-

 
 
SVG 属性（按类别分类）

 
diff --git a/files/zh-cn/web/svg/attribute/letter-spacing/index.html b/files/zh-cn/web/svg/attribute/letter-spacing/index.html
index 31bb91be7b9fab..98e35a5a959180 100644
--- a/files/zh-cn/web/svg/attribute/letter-spacing/index.html
+++ b/files/zh-cn/web/svg/attribute/letter-spacing/index.html
@@ -15,20 +15,18 @@
 
 
As a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: {{SVGElement("altGlyph")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, and {{SVGElement("tspan")}}

 
-

-
 
-
<svg viewBox="0 0 400 30" xmlns="http://www.w3.org/2000/svg">
+
<svg viewBox="0 0 400 30" xmlns="http://www.w3.org/2000/svg">
   <text y="20" letter-spacing="2">Bigger letter-spacing</text>
   <text x="200" y="20" letter-spacing="-0.5">Smaller letter-spacing</text>
 </svg>

 
-
{{EmbedLiveSample("topExample", "200", "30")}}

-

+
{{EmbedLiveSample("示例", "200", "30")}}

 
 
Usage notes

 
diff --git a/files/zh-cn/web/svg/attribute/marker-end/index.html b/files/zh-cn/web/svg/attribute/marker-end/index.html
index 6fea4a0d736023..c836497bb21685 100644
--- a/files/zh-cn/web/svg/attribute/marker-end/index.html
+++ b/files/zh-cn/web/svg/attribute/marker-end/index.html
@@ -13,14 +13,13 @@
 
 
作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效:  {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}}

 
-

-
 
-
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <marker id="triangle" viewBox="0 0 10 10"
           refX="1" refY="5"
@@ -35,8 +34,7 @@
 </svg>
 

 
-
{{EmbedLiveSample("topExample", "200", "200")}}

-

+
{{EmbedLiveSample("示例", "200", "200")}}

 
 
使用说明

 
diff --git a/files/zh-cn/web/svg/attribute/marker-start/index.html b/files/zh-cn/web/svg/attribute/marker-start/index.html
index 8034303423f9ba..b930900864be0b 100644
--- a/files/zh-cn/web/svg/attribute/marker-start/index.html
+++ b/files/zh-cn/web/svg/attribute/marker-start/index.html
@@ -13,14 +13,13 @@
 
 
作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效:  {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, 和{{SVGElement("rect")}}

 
-

-
 
-
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <marker id="triangle" viewBox="0 0 10 10"
           refX="1" refY="5"
@@ -35,8 +34,7 @@
 </svg>
 

 
-
{{EmbedLiveSample("topExample", "200", "200")}}

-

+
{{EmbedLiveSample("示例", "200", "200")}}

 
 
使用说明

 
diff --git a/files/zh-cn/web/svg/attribute/max/index.html b/files/zh-cn/web/svg/attribute/max/index.html
index 89eaa7eb31a091..8624e315e69ebc 100644
--- a/files/zh-cn/web/svg/attribute/max/index.html
+++ b/files/zh-cn/web/svg/attribute/max/index.html
@@ -9,14 +9,13 @@
 
 
Five elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("set")}}

 
-

-
 
-
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
   <circle cx="60" cy="10" r="10">
     <animate attributeName="cx" dur="4s" max="6s" repeatCount="indefinite"
         values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/>
@@ -25,8 +24,7 @@
   </circle>
 </svg>

 
-
{{EmbedLiveSample("topExample", "200", "200")}}

-

+
{{EmbedLiveSample("示例", "200", "200")}}

 
 
Usage notes

 
diff --git a/files/zh-cn/web/svg/attribute/media/index.html b/files/zh-cn/web/svg/attribute/media/index.html
index 73746cacfdc65b..3510a90560da9e 100644
--- a/files/zh-cn/web/svg/attribute/media/index.html
+++ b/files/zh-cn/web/svg/attribute/media/index.html
@@ -9,14 +9,13 @@
 
 
只有一个元素使用这个属性： {{SVGElement("style")}}

 
-

-
 
-
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
+
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
   <style>
     rect { fill: black; }
   </style>
@@ -28,8 +27,7 @@
   <rect y="20" width="200" height="200" />
 </svg>

 
-
{{EmbedLiveSample("topExample", "200", "200")}}

-

+
{{EmbedLiveSample("示例", "200", "200")}}

 
 
Usage notes

 
diff --git a/files/zh-cn/web/svg/attribute/pathlength/index.html b/files/zh-cn/web/svg/attribute/pathlength/index.html
index 172b3da86b4aa2..3dab2182aed26b 100644
--- a/files/zh-cn/web/svg/attribute/pathlength/index.html
+++ b/files/zh-cn/web/svg/attribute/pathlength/index.html
@@ -13,10 +13,9 @@
 
Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, and {{SVGElement('rect')}}

 
 
-

-
+
示例

+
+
 
 
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
   <style>
@@ -44,8 +43,7 @@
   <path d="M 0,50 h100" pathLength="10"/>
 </svg>

 
-
{{EmbedLiveSample('topExample', '100%', 200)}}

-

+
{{EmbedLiveSample('示例', '100%', 200)}}

 
 
circle

 
diff --git a/files/zh-cn/web/svg/attribute/patternunits/index.html b/files/zh-cn/web/svg/attribute/patternunits/index.html
index f3e108142e4a5f..a698bc635e1720 100644
--- a/files/zh-cn/web/svg/attribute/patternunits/index.html
+++ b/files/zh-cn/web/svg/attribute/patternunits/index.html
@@ -9,10 +9,9 @@
 
 
Only one element is using this attribute: {{SVGElement('pattern')}}

 
-

-
+
示例

+
+
 
 
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
   <!-- All geometry properties are relative to the current user space -->
@@ -36,8 +35,7 @@
         fill="url(#p2)" />
 </svg>

 
-
{{EmbedLiveSample('topExample', '100%', 200)}}

-

+
{{EmbedLiveSample('示例', '100%', 200)}}

 
 
pattern

 
diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.html b/files/zh-cn/web/svg/attribute/pointer-events/index.html
index 4c9307b643faaa..3c95fa252c0137 100644
--- a/files/zh-cn/web/svg/attribute/pointer-events/index.html
+++ b/files/zh-cn/web/svg/attribute/pointer-events/index.html
@@ -9,10 +9,9 @@
 
 
Note: 作为一个展示属性， {{cssxref('pointer-events')}} 可以被当做 CSS 属性使用。

 
-

-
+
示例

+
+
 
 
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
   <!--
@@ -45,8 +44,7 @@
   e.target.style.fill = fill
 })

 
-
{{EmbedLiveSample('topExample', '100%', 150)}}

-

+
{{EmbedLiveSample('示例', '100%', 150)}}

 
 
作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的 23 个元素: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('switch')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tspan')}}, {{SVGElement('use')}}

 
diff --git a/files/zh-cn/web/svg/attribute/presentation/index.html b/files/zh-cn/web/svg/attribute/presentation/index.html
index b8a3b43bd7fde7..c77bf0526f4c20 100644
--- a/files/zh-cn/web/svg/attribute/presentation/index.html
+++ b/files/zh-cn/web/svg/attribute/presentation/index.html
@@ -5,7 +5,6 @@
 ---
 
SVG 表现属性是能够被用在 SVG 元素属性上的 CSS 属性。

 
-

 
-

 
 
Attributes

 
diff --git a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html
index 25153417b08c10..b2c36e640753f2 100644
--- a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html
+++ b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html
@@ -38,7 +38,7 @@ 
上下文用法

 
 

  
<align>

- 
<align> 属性值表示是否强制统一缩放，当 SVG 的 viewbox 属性与视图属性宽高比不一致时使用.  <align> 属性的值一定是下列的值之一：
+ 
<align> 属性值表示是否强制统一缩放，当 SVG 的 viewbox 属性与视图属性宽高比不一致时使用.  <align> 属性的值一定是下列的值之一：

  
    
   
  • none
    
    不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。
    
diff --git a/files/zh-cn/web/svg/attribute/r/index.html b/files/zh-cn/web/svg/attribute/r/index.html
index c0edbd07206f97..6088d5f692eec9 100644
--- a/files/zh-cn/web/svg/attribute/r/index.html
+++ b/files/zh-cn/web/svg/attribute/r/index.html
@@ -12,10 +12,9 @@
 
 
    有两个元素在使用该属性：{{SVGElement("circle")}} 和 {{SVGElement("radialGradient")}}
    
 
-
    
-
+
    示例
    
+
+
 
 
    <svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
   <radialGradient r="0" id="myGradient000">
@@ -40,8 +39,7 @@
   <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
 </svg>
    
 
-
    {{EmbedLiveSample('topExample', '100%', 200)}}
    
-
    
+
    {{EmbedLiveSample('示例', '100%', 200)}}
    
 
 
    圆
    
 
diff --git a/files/zh-cn/web/svg/attribute/rx/index.html b/files/zh-cn/web/svg/attribute/rx/index.html
index f8b2a0a689a5c9..9090ae977f4338 100644
--- a/files/zh-cn/web/svg/attribute/rx/index.html
+++ b/files/zh-cn/web/svg/attribute/rx/index.html
@@ -12,14 +12,9 @@
 
 
    {{SVGElement("ellipse")}} 和 {{SVGElement("rect")}} 两个基本图形使用了这个属性。
    
 
-
    
-
-
    
+
    示例
    
 
-
    
-
+
 
 
    <svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
   <ellipse cx="50"  cy="50" rx="0"  ry="25" />
@@ -31,8 +26,7 @@
   <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/>
 </svg>
    
 
-
    {{EmbedLiveSample('topExample', '100%', 200)}}
    
-
    
+
    {{EmbedLiveSample('示例', '100%', 200)}}
    
 
 
    椭圆
    
 
diff --git a/files/zh-cn/web/svg/attribute/styling/index.html b/files/zh-cn/web/svg/attribute/styling/index.html
index dafc988ddca380..41f6ab1ba154fc 100644
--- a/files/zh-cn/web/svg/attribute/styling/index.html
+++ b/files/zh-cn/web/svg/attribute/styling/index.html
@@ -6,12 +6,10 @@
 ---
 
    SVG 样式属性是所有可以在任何 SVG 元素上指定以应用 CSS 样式效果的属性。
    
 
-
    
 
-
    
 
 
    属性
    
 
diff --git a/files/zh-cn/web/svg/attribute/target/index.html b/files/zh-cn/web/svg/attribute/target/index.html
index 7b7a8199d27099..8f6a676818c933 100644
--- a/files/zh-cn/web/svg/attribute/target/index.html
+++ b/files/zh-cn/web/svg/attribute/target/index.html
@@ -9,9 +9,9 @@
 
 
    只有一个元素正在使用此属性：{{SVGElement("a")}}
    
 
-
    
-
 
-
    <svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg">
+
    <svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg">
   <a href="https://developer.mozilla.org" target="_self">
     <text x="0" y="20">在 iframe 中打开链接</text>
     </a>
@@ -36,8 +35,7 @@
 </svg>
 
    
 
-
    {{EmbedLiveSample("topExample", "300", "120")}}
    
-
    
+
    {{EmbedLiveSample("示例", "300", "120")}}
    
 
 
    使用说明
    
 
@@ -64,7 +62,7 @@ 
    使用说明
    
  
    当前 SVG 图像被与当前 SVG 图像在同一帧中相同矩形区域中的链接内容替换。
    
 
  
    
- 
    注意：这个值是从来没有很好的执行，之间的区别_replace，并_self已通过在浏览上下文的 HTML 定义的变化变得多余。使用_self以取代目前的 SVG 文件。
    
+ 
    备注： 这个值是从来没有很好的执行，之间的区别_replace，并_self已通过在浏览上下文的 HTML 定义的变化变得多余。使用_self以取代目前的 SVG 文件。
    
  
    
  

  
_self

diff --git a/files/zh-cn/web/svg/content_type/index.html b/files/zh-cn/web/svg/content_type/index.html
index 161bc24052bca6..4ce2e917026176 100644
--- a/files/zh-cn/web/svg/content_type/index.html
+++ b/files/zh-cn/web/svg/content_type/index.html
@@ -130,7 +130,7 @@ 
坐标

 
 
频率

 
-

+

  
<frequency>

  

  
频率值用在可听到的属性上。就如 CSS2 中所定义的，一个频率值是一个<number>后面跟着一个频率单位标识符。频率单位标识符可以是：

diff --git a/files/zh-cn/web/svg/element/clippath/index.html b/files/zh-cn/web/svg/element/clippath/index.html
index 90b1740192e1dc..e9069eb4c7a008 100644
--- a/files/zh-cn/web/svg/element/clippath/index.html
+++ b/files/zh-cn/web/svg/element/clippath/index.html
@@ -14,10 +14,9 @@
 
 
剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制。

 
-

-
+
示例

+
+
 
 
<svg viewBox="0 0 100 100">
   <clipPath id="myClip">
@@ -45,8 +44,7 @@
   animation: openYourHeart 15s infinite;
 }

 
-
{{EmbedLiveSample('Example', 100, 100)}}

-

+
{{EmbedLiveSample('示例', 100, 100)}}

 
 
从概念上讲，剪切路径等于给引用元素设置了一个自定义的可视区域。因此，它虽然会影响一个元素的绘制，但不会影响这个元素本身的几何形状，比如被剪切元素（通过 {{SVGAttr("clip-path")}} 属性引用了 <clipPath> 的元素及其子元素）的包围盒和没有被剪切时相同。

 
diff --git a/files/zh-cn/web/svg/element/foreignobject/index.html b/files/zh-cn/web/svg/element/foreignobject/index.html
index 6d999fe19d2ec7..fa0afc2284b835 100644
--- a/files/zh-cn/web/svg/element/foreignobject/index.html
+++ b/files/zh-cn/web/svg/element/foreignobject/index.html
@@ -11,12 +11,11 @@
 
 
SVG中的<foreignObject>元素允许包含来自不同的 XML 命名空间的元素。在浏览器的上下文中，很可能是 XHTML / HTML。

 
-

-
+
示例

+
+
 
-
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
   <style>
     polygon { fill: black }
 
@@ -45,8 +44,7 @@
   </foreignObject>
 </svg>

 
-
{{EmbedLiveSample('Exemple', 150, '100%')}}

-

+
{{EmbedLiveSample('示例', 150, '100%')}}

 
 
属性

 
diff --git a/files/zh-cn/web/svg/element/index.html b/files/zh-cn/web/svg/element/index.html
index a456b796fa0ba0..f4ea164c84c656 100644
--- a/files/zh-cn/web/svg/element/index.html
+++ b/files/zh-cn/web/svg/element/index.html
@@ -12,7 +12,6 @@
 
 
SVG 元素（从 A-Z 排序）

 
-

 
A

 
 
    
@@ -165,7 +164,6 @@ 
    V
    
 
      
  
    • {{SVGElement("view")}}
      • 
 
    
-

 
 
SVG 元素（按类别分类）

 
diff --git a/files/zh-cn/web/svg/element/path/index.html b/files/zh-cn/web/svg/element/path/index.html
index 94772f0201ba29..efcd63c9310b3e 100644
--- a/files/zh-cn/web/svg/element/path/index.html
+++ b/files/zh-cn/web/svg/element/path/index.html
@@ -10,8 +10,8 @@
 ---
 
{{SVGRef}}

 
-
起步

-本教程将教你开始使用 SVG 路径。

+
起步

+本教程将教你开始使用 SVG 路径。

 
 
path 元素是用来定义形状的通用元素。所有的基本形状都可以用 path 元素来创建。

 
diff --git a/files/zh-cn/web/svg/element/use/index.html b/files/zh-cn/web/svg/element/use/index.html
index e3099ecba5be37..b0a663665ea753 100644
--- a/files/zh-cn/web/svg/element/use/index.html
+++ b/files/zh-cn/web/svg/element/use/index.html
@@ -21,7 +21,7 @@ 
用法

 
 
示例

 
-
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .classA { fill:red }
   </style>
@@ -40,8 +40,6 @@ 
示例

  </svg>
 

 
-
 

-
 
属性

 
 
全局属性

diff --git a/files/zh-cn/web/svg/index.html b/files/zh-cn/web/svg/index.html
index c7c04a330bf733..2cf5e1c38b05f5 100644
--- a/files/zh-cn/web/svg/index.html
+++ b/files/zh-cn/web/svg/index.html
@@ -12,8 +12,8 @@
 ---
 
{{SVGRef}}

 
-
准备开始吧！

-这篇教程会帮助你开始使用 SVG。

+
准备开始吧！

+这篇教程会帮助你开始使用 SVG。

 
 
可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

 
diff --git a/files/zh-cn/web/svg/svg_1.1_support_in_firefox/index.html b/files/zh-cn/web/svg/svg_1.1_support_in_firefox/index.html
deleted file mode 100644
index 937e82011d3e63..00000000000000
--- a/files/zh-cn/web/svg/svg_1.1_support_in_firefox/index.html
+++ /dev/null
@@ -1,775 +0,0 @@
----
-title: Firefox 对 SVG 1.1 的支持
-slug: Web/SVG/SVG_1.1_Support_in_Firefox
-translation_of: Web/SVG/SVG_1.1_Support_in_Firefox
----
-
你可以在 W3C SVG test suite找到一些基础的 SVG 语法和用法的例子

-
-

-
注意： As of {{Gecko("2.0")}}, Gecko now supports SVG animation using SMIL. See SVG animation with SMIL for a brief overview. Full documentation for SVG is forthcoming. Someday.

-

-
-
元素实现状态

-
-
SVG 1.1 元素概览以及当前的支持状态

-
-
- 
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-  
-  
-   
-   
-  
- 
-
元素Notes
Structure Module
svg
-    
    
-     
  • 已实现
    • 
-     
  • currentScale and currentTranslate DOM attributes are implemented, but there is no pan and zoom user interface.
    • 
-     
  • SVGSVGElement
-      
      
-       
    • Unimplemented attributes: contentScriptType, contentStyleType, viewport, currentView
      • 
-       
    • Unimplemented bindings: getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll
      • 
-       
    • Recently implemented bindings:
-        
        
-         
      • getElementById, useCurrentView
        • 
-        
      
-       
      • 
-      
    
-     
    • 
-    

-   
g
-    
    
-     
  • 已实现
    • 
-    

-   
defs
-    
    
-     
  • 已实现
    • 
-    

-   
desc
-    
    
-     
  • 已实现
    • 
-     
  • Only stored in the DOM, no user interface.
    • 
-    

-   
title
-    
    
-     
  • 已实现
    • 
-     
  • The title is displayed as a tooltip when the mouse hovers over the SVG object.
    • 
-    

-   
metadata
-    
    
-     
  • 已实现
    • 
-     
  • Only stored in the DOM, no user interface.
    • 
-    

-   
symbol
-    
    
-     
  • 已实现
    • 
-    

-   
use
-    
    
-     
  • 已实现
    • 
-     
  • Doesn't completely follow <svg:use> cascading rules ({{Bug(265894)}}).
    • 
-     
  • Doesn't deliver events to a SVGElementInstance tree ({{Bug(265895)}}).
    • 
-    

-   
Conditional Processing Module
switch
-    
    
-     
  • 已实现
    • 
-    

-   
Image Module
image
-    
    
-     
  • 已实现
    • 
-    

-   
Style Module
style
-    
    
-     
  • 已实现
    • 
-    

-   
Shape Module
path
-    
    
-     
  • 已实现
    • 
-     
  • SVGPathElement Interface
-      
      
-       
    • Unimplemented attributes: normalizedPathSegList, animatedNormalizedPathSegList
      • 
-      
    
-     
    • 
-    

-   
rect
-    
    
-     
  • 已实现
    • 
-    

-   
circle
-    
    
-     
  • 已实现
    • 
-    

-   
line
-    
    
-     
  • 已实现
    • 
-    

-   
ellipse
-    
    
-     
  • 已实现
    • 
-    

-   
polyline
-    
    
-     
  • 已实现
    • 
-    

-   
polygon
-    
    
-     
  • 已实现
    • 
-    

-   
Text Module
text
-    
    
-     
  • 已实现
    • 
-     
  • Various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)
    • 
-     
  • Recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration
    • 
-     
  • SVGTextElement
-      
      
-       
    • Recently imlemented bindings: selectSubString
      • 
-       
    • Recently implemented attributes: textLength, lengthAdjust
      • 
-      
    
-     
    • 
-    

-   
tspan
-    
    
-     
  • 已实现
    • 
-     
  • Various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)
    • 
-     
  • Recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration
    • 
-     
  • SVGTSpanElement
-      
      
-       
    • Recently implemented bindings: selectSubString
      • 
-       
    • Recently implemented attributes: textLength, lengthAdjust
      • 
-      
    
-     
    • 
-    

-   
tref
-    
    
-     
  • This feature, present in early draft of the spec, has been removed from it and is therefor not implemented ({{Bug(273171)}}).
    • 
-    

-   
textPath
-    
    
-     
  • 已实现
    • 
-     
  • Recently implemented bindings: selectSubString
    • 
-    

-   
altGlyph
-    
    
-     
  • Implemented as tspans, no font features as of Gecko 2.0 ({{Bug(456286)}}, {{Bug(571808)}}).
    • 
-    

-   
altGlyphDef
-    
    
-     
  • 未实现
    • 
-    

-   
altGlyphItem
-    
    
-     
  • 未实现
    • 
-    

-   
glyphRef
-    
    
-     
  • 未实现
    • 
-    

-   
Marker Module
marker
-    
    
-     
  • 已实现
    • 
-    

-   
Color Profile Module
color-profile
-    
    
-     
  • Not implemented ({{Bug(427713)}}).
    • 
-    

-   
Gradient Module
linearGradient
-    
    
-     
  • 已实现
    • 
-    

-   
radialGradient
-    
    
-     
  • 已实现
    • 
-    

-   
stop
-    
    
-     
  • 已实现
    • 
-    

-   
Pattern Module
pattern
-    
    
-     
  • 已实现
    • 
-    

-   
Clip Module
clipPath
-    
    
-     
  • 已实现
    • 
-    

-   
Mask Module
mask
-    
    
-     
  • 已实现
    • 
-    

-   
Filter Module
filter
-    
    
-     
  • 已实现
    • 
-     
  • Of the pseudo-inputs, SourceGraphic, SourceAlpha, FillPaint and StrokePaint are implemented.
    • 
-     
  • Use of an unimplemented pseudo-input or filter element will cause the filter to be ignored and the referring graphic to be drawn without any filter.
    • 
-    

-   
feBlend
-    
    
-     
  • 已实现
    • 
-    

-   
feColorMatrix
-    
    
-     
  • 已实现
    • 
-    

-   
feComponentTransfer
-    
    
-     
  • 已实现
    • 
-    

-   
feComposite
-    
    
-     
  • 已实现
    • 
-    

-   
feConvolveMatrix
-    
    
-     
  • 已实现
    • 
-    

-   
feDiffuseLighting
-    
    
-     
  • 已实现
    • 
-    

-   
feDisplacementMap
-    
    
-     
  • 已实现
    • 
-    

-   
feFlood
-    
    
-     
  • 已实现
    • 
-    

-   
feGaussianBlur
-    
    
-     
  • 已实现
    • 
-    

-   
feImage
-    
    
-     
  • 已实现
    • 
-     
  • Document fragments ({{bug(455986)}}) aren't supported in <svg:feImage>.
    • 
-    

-   
feMerge
-    
    
-     
  • 已实现
    • 
-    

-   
feMergeNode
-    
    
-     
  • 已实现
    • 
-    

-   
feMorphology
-    
    
-     
  • 已实现
    • 
-    

-   
feOffset
-    
    
-     
  • 已实现
    • 
-    

-   
feSpecularLighting
-    
    
-     
  • 已实现
    • 
-    

-   
feTile
-    
    
-     
  • 已实现
    • 
-    

-   
feTurbulence
-    
    
-     
  • 已实现
    • 
-    

-   
feDistantLight
-    
    
-     
  • 已实现
    • 
-    

-   
fePointLight
-    
    
-     
  • 已实现
    • 
-    

-   
feSpotLight
-    
    
-     
  • 已实现
    • 
-    

-   
feFuncR
-    
    
-     
  • 已实现
    • 
-    

-   
feFuncG
-    
    
-     
  • 已实现
    • 
-    

-   
feFuncB
-    
    
-     
  • 已实现
    • 
-    

-   
feFuncA
-    
    
-     
  • 已实现
    • 
-    

-   
Cursor Module
cursor
-    
    
-     
  • Not implemented ({{Bug(177193)}}).
    • 
-    

-   
Hyperlinking Module
a
-    
    
-     
  • Only xlink:href, xlink:show, xlink:target and xlink:title attributes implemented.
    • 
-    

-   
View Module
view
-    
    
-     
  • Implemented in Gecko 15.0 ({{Bug(512525)}}).
    • 
-    

-   
Scripting Module
script
-    
    
-     
  • 已实现
    • 
-    

-   
Animation Module
animate
-    
    
-     
  • 已实现
    • 
-    

-   
set
-    
    
-     
  • 已实现
    • 
-    

-   
animateMotion
-    
    
-     
  • 已实现
    • 
-    

-   
animateTransform
-    
    
-     
  • 已实现
    • 
-    

-   
animateColor
-    
    
-     
  • Not implemented ({{Bug(436296)}}).
    • 
-    

-   
mpath
-    
    
-     
  • 已实现
    • 
-    

-   
Font Module
font
-    
    
-     
  • Not implemented ({{Bug(119490)}}).
    • 
-    

-   
font-face
-    
    
-     
  • 未实现
    • 
-    

-   
glyph
-    
    
-     
  • 未实现
    • 
-    

-   
missing-glyph
-    
    
-     
  • 未实现
    • 
-    

-   
hkern
-    
    
-     
  • 未实现
    • 
-    

-   
vkern
-    
    
-     
  • 未实现
    • 
-    

-   
font-face-src
-    
    
-     
  • 未实现
    • 
-    

-   
font-face-uri
-    
    
-     
  • 未实现
    • 
-    

-   
font-face-format
-    
    
-     
  • 未实现
    • 
-    

-   
font-face-name
-    
    
-     
  • 未实现
    • 
-    

-   
definition-src
-    
    
-     
  • 未实现
    • 
-    

-   
Extensibility Module
foreignObject
-    
    
-     
  • 已实现
    • 
-    

-   

-
-
 

diff --git a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html
index 2354ad56bccd22..05fac37e3d901e 100644
--- a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html
+++ b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html
@@ -33,26 +33,7 @@ 
创建剪切

 
 
然而，该 rect 不会被绘制。它的象素数据将用来确定：圆形的哪些像素需要最终呈现出来。因为矩形只覆盖了圆形的上半部分，所以下半部分将消失了：

 
-
-
-
{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}

+
{{ EmbedLiveSample('创建剪切','240','240') }}

 
 
现在我们已经有了一个半圆形，不用处理弧形路径元素。对于这个剪切，clipPath内部的每个路径都会被检查到、与它的描边属性一起被估值、变形。然后目标的位于 clipPath 内容的结果的透明度区域的每一块都不会呈现。颜色、不透明度都没有这种效果，因为它们不能让一部分彻底消失。

 
@@ -78,33 +59,9 @@ 
遮罩

 
 
你看到有一个绿色填充的矩形在底层，一个红色填充的矩形在上层。后者有一个mask属性指向一个mask元素。mask元素的内容是一个单一的rect元素，它填充了一个透明到白色的渐变。作为红色矩形继承mark内容的alpha值（透明度）的结果，我们看到一个从绿色到红色渐变的输出：

 
-
-
-
{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}

-
-
用opacity 定义透明度

+
用 opacity 定义透明度

 
 
有一个简单方法可以用来为整个元素设置透明度。它就是opacity属性：

 
@@ -119,19 +76,7 @@ 
用opacity 定义透明度

 </svg>
 

 
-
-
-
{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}

+
{{ EmbedLiveSample('用 opacity 定义透明度','240','240') }}

 
 
你看到这个示例，红色的圆形在蓝色的背景上，黄色描边设置为 50% 不透明度，导到双色描边的效果。

 
diff --git a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html
index 0e01ff3d3c0a66..cd87d9e0b55ffa 100644
--- a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html
+++ b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html
@@ -24,15 +24,15 @@ 
上色

 
 
此外，在 SVG 中你可以分别定义填充色和边框色的不透明度，属性fill-opacity控制填充色的不透明度，属性stroke-opacity控制描边的不透明度。

 
-
注意，FireFox 3+ 支持 rgba 值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和填充/描边的不透明度分开使用。如果同时指定了 rgba 值和填充/描边不透明度，它们将都被调用。

+
备注： FireFox 3+ 支持 rgba 值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和填充/描边的不透明度分开使用。如果同时指定了 rgba 值和填充/描边不透明度，它们将都被调用。

 
 
描边

 
 
除了颜色属性，还有其他一些属性用来控制绘制描边的方式。

 
-

+

 
-
<?xml version="1.0" standalone="no"?>
+
<?xml version="1.0" standalone="no"?>
 <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
   <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
@@ -53,9 +53,9 @@ 
描边

 
 
还有一个stroke-linejoin属性，用来控制两条描边线段之间，用什么方式连接。

 
-

+

 
-
<?xml version="1.0" standalone="no"?>
+
<?xml version="1.0" standalone="no"?>
 <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
       stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
@@ -71,7 +71,7 @@ 
描边

 
 
最后，你可以通过指定stroke-dasharray属性，将虚线类型应用在描边上。

 
-

+

 
 
<?xml version="1.0" standalone="no"?>
 <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
@@ -89,7 +89,7 @@ 
使用 CSS

 
 
除了定义对象的属性外，你也可以通过 CSS 来样式化填充和描边。语法和在 HTML 里使用 CSS 一样，只不过你要把background-color、border改成fill和stroke。注意，不是所有的属性都能用 CSS 来设置。上色和填充的部分一般是可以用 CSS 来设置的，比如fill，stroke，stroke-dasharray等，但是不包括下面会提到的渐变和图案等功能。另外，width、height，以及路径的命令等等，都不能用 CSS 设置。判断它们能不能用 CSS 设置还是比较容易的。

 
-
SVG 规范将属性区分成 properties 和其他 attributes，前者是可以用 CSS 设置的，后者不能。

+
备注： SVG 规范将属性区分成 properties 和其他 attributes，前者是可以用 CSS 设置的，后者不能。

 
 
CSS 可以利用 style 属性插入到元素的行间：

 
diff --git a/files/zh-cn/web/svg/tutorial/filter_effects/index.html b/files/zh-cn/web/svg/tutorial/filter_effects/index.html
index 9f8a1921e8439d..193937b526f7a8 100644
--- a/files/zh-cn/web/svg/tutorial/filter_effects/index.html
+++ b/files/zh-cn/web/svg/tutorial/filter_effects/index.html
@@ -59,58 +59,7 @@ 
示例

 </svg>
 

 
-
-
-
{{ EmbedLiveSample('Example', '100%', 120) }}

+
{{ EmbedLiveSample('示例', '100%', 120) }}

 
 
步骤 1

 
diff --git a/files/zh-cn/web/svg/tutorial/getting_started/index.html b/files/zh-cn/web/svg/tutorial/getting_started/index.html
index c4468ec19df26f..f7cada0bd51c01 100644
--- a/files/zh-cn/web/svg/tutorial/getting_started/index.html
+++ b/files/zh-cn/web/svg/tutorial/getting_started/index.html
@@ -27,9 +27,9 @@ 
一个简单的示例

 </svg>
 

 
-
复制并粘贴代码到文件 demo1.svg。然后用 Firefox 打开该文件。 它将会呈现为下面的截图。(Firefox 用户点击这里)

+
复制并粘贴代码到文件 demo1.svg。然后用 Firefox 打开该文件。 它将会呈现为下面的截图。(Firefox 用户点击这里)

 
-
svgdemo1.png

+
svgdemo1.png

 
 
绘制流程包括以下几步：

 
@@ -65,7 +65,7 @@ 
SVG 文件的基本属性

    
  • 最后 SVG 可以通过 JavaScript 动态创建并注入到 HTML DOM 中。 这样具有一个优点，可以对浏览器使用替代技术，在不能解析 SVG 的情况下，可以替换创建的内容。
    • 
   
   阅读this dedicated article 以深入了解该话题。
- 
  • SVG 如何处理大小和单位将在下一页详解。
    • 
+ 
  • SVG 如何处理大小和单位将在下一页详解。
    • 
 
 
 
    SVG 文件类型
    
diff --git a/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html
index 1d762627318355..700d20e2640caa 100644
--- a/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html
+++ b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html
@@ -23,21 +23,7 @@ 
    嵌入光栅图像
    
      xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/>
 </svg>
    
 
-
-
-
    {{ EmbedLiveSample('Embedding_raster_images','220','220','/files/16567/rotate-image-demo.png') }}
    
+
    {{ EmbedLiveSample('嵌入光栅图像','220','220') }}
    
 
 
    嵌入任意 XML
    
 

From b2ea3c190080a38dff591a38c2cc245c6d8e5369 Mon Sep 17 00:00:00 2001
From: allo 
Date: Thu, 11 Aug 2022 09:13:27 +0800
Subject: [PATCH 2/3] move to .md for svg zh-CN

---
 .../applying_svg_effects_to_html_content/{index.html => index.md} | 0
 .../web/svg/attribute/accent-height/{index.html => index.md}      | 0
 files/zh-cn/web/svg/attribute/accumulate/{index.html => index.md} | 0
 .../web/svg/attribute/alignment-baseline/{index.html => index.md} | 0
 .../web/svg/attribute/attributename/{index.html => index.md}      | 0
 .../web/svg/attribute/attributetype/{index.html => index.md}      | 0
 .../web/svg/attribute/baseline-shift/{index.html => index.md}     | 0
 .../zh-cn/web/svg/attribute/baseprofile/{index.html => index.md}  | 0
 files/zh-cn/web/svg/attribute/begin/{index.html => index.md}      | 0
 files/zh-cn/web/svg/attribute/calcmode/{index.html => index.md}   | 0
 files/zh-cn/web/svg/attribute/clip-path/{index.html => index.md}  | 0
 files/zh-cn/web/svg/attribute/clip/{index.html => index.md}       | 0
 files/zh-cn/web/svg/attribute/color/{index.html => index.md}      | 0
 files/zh-cn/web/svg/attribute/cx/{index.html => index.md}         | 0
 files/zh-cn/web/svg/attribute/cy/{index.html => index.md}         | 0
 files/zh-cn/web/svg/attribute/d/{index.html => index.md}          | 0
 files/zh-cn/web/svg/attribute/display/{index.html => index.md}    | 0
 .../web/svg/attribute/dominant-baseline/{index.html => index.md}  | 0
 files/zh-cn/web/svg/attribute/dur/{index.html => index.md}        | 0
 files/zh-cn/web/svg/attribute/dx/{index.html => index.md}         | 0
 files/zh-cn/web/svg/attribute/edgemode/{index.html => index.md}   | 0
 .../web/svg/attribute/enable-background/{index.html => index.md}  | 0
 files/zh-cn/web/svg/attribute/end/{index.html => index.md}        | 0
 .../zh-cn/web/svg/attribute/fill-opacity/{index.html => index.md} | 0
 files/zh-cn/web/svg/attribute/fill-rule/{index.html => index.md}  | 0
 files/zh-cn/web/svg/attribute/fill/{index.html => index.md}       | 0
 files/zh-cn/web/svg/attribute/filter/{index.html => index.md}     | 0
 .../zh-cn/web/svg/attribute/filterunits/{index.html => index.md}  | 0
 .../zh-cn/web/svg/attribute/font-family/{index.html => index.md}  | 0
 files/zh-cn/web/svg/attribute/fr/{index.html => index.md}         | 0
 files/zh-cn/web/svg/attribute/from/{index.html => index.md}       | 0
 files/zh-cn/web/svg/attribute/fx/{index.html => index.md}         | 0
 files/zh-cn/web/svg/attribute/fy/{index.html => index.md}         | 0
 files/zh-cn/web/svg/attribute/height/{index.html => index.md}     | 0
 files/zh-cn/web/svg/attribute/id/{index.html => index.md}         | 0
 .../web/svg/attribute/image-rendering/{index.html => index.md}    | 0
 files/zh-cn/web/svg/attribute/in/{index.html => index.md}         | 0
 files/zh-cn/web/svg/attribute/{index.html => index.md}            | 0
 .../zh-cn/web/svg/attribute/kernelmatrix/{index.html => index.md} | 0
 files/zh-cn/web/svg/attribute/keytimes/{index.html => index.md}   | 0
 .../web/svg/attribute/letter-spacing/{index.html => index.md}     | 0
 files/zh-cn/web/svg/attribute/marker-end/{index.html => index.md} | 0
 .../zh-cn/web/svg/attribute/marker-start/{index.html => index.md} | 0
 files/zh-cn/web/svg/attribute/mask/{index.html => index.md}       | 0
 files/zh-cn/web/svg/attribute/max/{index.html => index.md}        | 0
 files/zh-cn/web/svg/attribute/media/{index.html => index.md}      | 0
 files/zh-cn/web/svg/attribute/opacity/{index.html => index.md}    | 0
 files/zh-cn/web/svg/attribute/order/{index.html => index.md}      | 0
 files/zh-cn/web/svg/attribute/origin/{index.html => index.md}     | 0
 files/zh-cn/web/svg/attribute/overflow/{index.html => index.md}   | 0
 files/zh-cn/web/svg/attribute/pathlength/{index.html => index.md} | 0
 .../zh-cn/web/svg/attribute/patternunits/{index.html => index.md} | 0
 .../web/svg/attribute/pointer-events/{index.html => index.md}     | 0
 files/zh-cn/web/svg/attribute/points/{index.html => index.md}     | 0
 .../zh-cn/web/svg/attribute/presentation/{index.html => index.md} | 0
 .../web/svg/attribute/preservealpha/{index.html => index.md}      | 0
 .../svg/attribute/preserveaspectratio/{index.html => index.md}    | 0
 .../web/svg/attribute/primitiveunits/{index.html => index.md}     | 0
 files/zh-cn/web/svg/attribute/r/{index.html => index.md}          | 0
 files/zh-cn/web/svg/attribute/radius/{index.html => index.md}     | 0
 .../zh-cn/web/svg/attribute/repeatcount/{index.html => index.md}  | 0
 files/zh-cn/web/svg/attribute/result/{index.html => index.md}     | 0
 files/zh-cn/web/svg/attribute/rx/{index.html => index.md}         | 0
 files/zh-cn/web/svg/attribute/scale/{index.html => index.md}      | 0
 files/zh-cn/web/svg/attribute/seed/{index.html => index.md}       | 0
 .../web/svg/attribute/shape-rendering/{index.html => index.md}    | 0
 .../zh-cn/web/svg/attribute/stddeviation/{index.html => index.md} | 0
 files/zh-cn/web/svg/attribute/string/{index.html => index.md}     | 0
 .../web/svg/attribute/stroke-dasharray/{index.html => index.md}   | 0
 .../web/svg/attribute/stroke-dashoffset/{index.html => index.md}  | 0
 .../web/svg/attribute/stroke-linecap/{index.html => index.md}     | 0
 .../web/svg/attribute/stroke-linejoin/{index.html => index.md}    | 0
 .../web/svg/attribute/stroke-miterlimit/{index.html => index.md}  | 0
 .../web/svg/attribute/stroke-opacity/{index.html => index.md}     | 0
 .../zh-cn/web/svg/attribute/stroke-width/{index.html => index.md} | 0
 files/zh-cn/web/svg/attribute/stroke/{index.html => index.md}     | 0
 files/zh-cn/web/svg/attribute/style/{index.html => index.md}      | 0
 files/zh-cn/web/svg/attribute/styling/{index.html => index.md}    | 0
 files/zh-cn/web/svg/attribute/target/{index.html => index.md}     | 0
 .../zh-cn/web/svg/attribute/text-anchor/{index.html => index.md}  | 0
 .../web/svg/attribute/text-decoration/{index.html => index.md}    | 0
 files/zh-cn/web/svg/attribute/transform/{index.html => index.md}  | 0
 files/zh-cn/web/svg/attribute/type/{index.html => index.md}       | 0
 .../zh-cn/web/svg/attribute/units-per-em/{index.html => index.md} | 0
 files/zh-cn/web/svg/attribute/values/{index.html => index.md}     | 0
 .../web/svg/attribute/vector-effect/{index.html => index.md}      | 0
 files/zh-cn/web/svg/attribute/version/{index.html => index.md}    | 0
 files/zh-cn/web/svg/attribute/viewbox/{index.html => index.md}    | 0
 files/zh-cn/web/svg/attribute/visibility/{index.html => index.md} | 0
 files/zh-cn/web/svg/attribute/width/{index.html => index.md}      | 0
 files/zh-cn/web/svg/attribute/x/{index.html => index.md}          | 0
 files/zh-cn/web/svg/attribute/y/{index.html => index.md}          | 0
 files/zh-cn/web/svg/content_type/{index.html => index.md}         | 0
 .../zh-cn/web/svg/element/animatemotion/{index.html => index.md}  | 0
 files/zh-cn/web/svg/element/clippath/{index.html => index.md}     | 0
 files/zh-cn/web/svg/element/cursor/{index.html => index.md}       | 0
 .../web/svg/element/fediffuselighting/{index.html => index.md}    | 0
 .../zh-cn/web/svg/element/foreignobject/{index.html => index.md}  | 0
 files/zh-cn/web/svg/element/g/{index.html => index.md}            | 0
 files/zh-cn/web/svg/element/{index.html => index.md}              | 0
 files/zh-cn/web/svg/element/path/{index.html => index.md}         | 0
 files/zh-cn/web/svg/element/switch/{index.html => index.md}       | 0
 files/zh-cn/web/svg/element/text/{index.html => index.md}         | 0
 files/zh-cn/web/svg/element/use/{index.html => index.md}          | 0
 files/zh-cn/web/svg/{index.html => index.md}                      | 0
 .../web/svg/namespaces_crash_course/{index.html => index.md}      | 0
 .../zh-cn/web/svg/tutorial/basic_shapes/{index.html => index.md}  | 0
 .../svg/tutorial/clipping_and_masking/{index.html => index.md}    | 0
 .../web/svg/tutorial/fills_and_strokes/{index.html => index.md}   | 0
 .../web/svg/tutorial/filter_effects/{index.html => index.md}      | 0
 .../web/svg/tutorial/getting_started/{index.html => index.md}     | 0
 files/zh-cn/web/svg/tutorial/gradients/{index.html => index.md}   | 0
 files/zh-cn/web/svg/tutorial/{index.html => index.md}             | 0
 .../zh-cn/web/svg/tutorial/introduction/{index.html => index.md}  | 0
 .../svg/tutorial/other_content_in_svg/{index.html => index.md}    | 0
 files/zh-cn/web/svg/tutorial/paths/{index.html => index.md}       | 0
 files/zh-cn/web/svg/tutorial/positions/{index.html => index.md}   | 0
 files/zh-cn/web/svg/tutorial/svg_and_css/{index.html => index.md} | 0
 files/zh-cn/web/svg/tutorial/svg_fonts/{index.html => index.md}   | 0
 .../tutorial/svg_in_html_introduction/{index.html => index.md}    | 0
 120 files changed, 0 insertions(+), 0 deletions(-)
 rename files/zh-cn/web/svg/applying_svg_effects_to_html_content/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/accent-height/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/accumulate/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/alignment-baseline/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/attributename/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/attributetype/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/baseline-shift/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/baseprofile/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/begin/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/calcmode/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/clip-path/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/clip/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/color/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/cx/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/cy/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/d/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/display/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/dominant-baseline/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/dur/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/dx/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/edgemode/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/enable-background/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/end/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/fill-opacity/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/fill-rule/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/fill/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/filter/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/filterunits/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/font-family/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/fr/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/from/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/fx/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/fy/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/height/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/id/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/image-rendering/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/in/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/kernelmatrix/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/keytimes/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/letter-spacing/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/marker-end/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/marker-start/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/mask/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/max/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/media/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/opacity/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/order/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/origin/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/overflow/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/pathlength/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/patternunits/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/pointer-events/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/points/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/presentation/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/preservealpha/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/preserveaspectratio/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/primitiveunits/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/r/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/radius/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/repeatcount/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/result/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/rx/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/scale/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/seed/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/shape-rendering/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/stddeviation/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/string/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/stroke-dasharray/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/stroke-dashoffset/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/stroke-linecap/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/stroke-linejoin/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/stroke-miterlimit/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/stroke-opacity/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/stroke-width/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/stroke/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/style/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/styling/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/target/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/text-anchor/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/text-decoration/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/transform/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/type/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/units-per-em/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/values/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/vector-effect/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/version/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/viewbox/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/visibility/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/width/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/x/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/attribute/y/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/content_type/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/animatemotion/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/clippath/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/cursor/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/fediffuselighting/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/foreignobject/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/g/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/path/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/switch/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/text/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/element/use/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/namespaces_crash_course/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/basic_shapes/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/clipping_and_masking/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/fills_and_strokes/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/filter_effects/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/getting_started/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/gradients/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/introduction/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/other_content_in_svg/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/paths/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/positions/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/svg_and_css/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/svg_fonts/{index.html => index.md} (100%)
 rename files/zh-cn/web/svg/tutorial/svg_in_html_introduction/{index.html => index.md} (100%)

diff --git a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.html b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
similarity index 100%
rename from files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.html
rename to files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
diff --git a/files/zh-cn/web/svg/attribute/accent-height/index.html b/files/zh-cn/web/svg/attribute/accent-height/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/accent-height/index.html
rename to files/zh-cn/web/svg/attribute/accent-height/index.md
diff --git a/files/zh-cn/web/svg/attribute/accumulate/index.html b/files/zh-cn/web/svg/attribute/accumulate/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/accumulate/index.html
rename to files/zh-cn/web/svg/attribute/accumulate/index.md
diff --git a/files/zh-cn/web/svg/attribute/alignment-baseline/index.html b/files/zh-cn/web/svg/attribute/alignment-baseline/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/alignment-baseline/index.html
rename to files/zh-cn/web/svg/attribute/alignment-baseline/index.md
diff --git a/files/zh-cn/web/svg/attribute/attributename/index.html b/files/zh-cn/web/svg/attribute/attributename/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/attributename/index.html
rename to files/zh-cn/web/svg/attribute/attributename/index.md
diff --git a/files/zh-cn/web/svg/attribute/attributetype/index.html b/files/zh-cn/web/svg/attribute/attributetype/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/attributetype/index.html
rename to files/zh-cn/web/svg/attribute/attributetype/index.md
diff --git a/files/zh-cn/web/svg/attribute/baseline-shift/index.html b/files/zh-cn/web/svg/attribute/baseline-shift/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/baseline-shift/index.html
rename to files/zh-cn/web/svg/attribute/baseline-shift/index.md
diff --git a/files/zh-cn/web/svg/attribute/baseprofile/index.html b/files/zh-cn/web/svg/attribute/baseprofile/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/baseprofile/index.html
rename to files/zh-cn/web/svg/attribute/baseprofile/index.md
diff --git a/files/zh-cn/web/svg/attribute/begin/index.html b/files/zh-cn/web/svg/attribute/begin/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/begin/index.html
rename to files/zh-cn/web/svg/attribute/begin/index.md
diff --git a/files/zh-cn/web/svg/attribute/calcmode/index.html b/files/zh-cn/web/svg/attribute/calcmode/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/calcmode/index.html
rename to files/zh-cn/web/svg/attribute/calcmode/index.md
diff --git a/files/zh-cn/web/svg/attribute/clip-path/index.html b/files/zh-cn/web/svg/attribute/clip-path/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/clip-path/index.html
rename to files/zh-cn/web/svg/attribute/clip-path/index.md
diff --git a/files/zh-cn/web/svg/attribute/clip/index.html b/files/zh-cn/web/svg/attribute/clip/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/clip/index.html
rename to files/zh-cn/web/svg/attribute/clip/index.md
diff --git a/files/zh-cn/web/svg/attribute/color/index.html b/files/zh-cn/web/svg/attribute/color/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/color/index.html
rename to files/zh-cn/web/svg/attribute/color/index.md
diff --git a/files/zh-cn/web/svg/attribute/cx/index.html b/files/zh-cn/web/svg/attribute/cx/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/cx/index.html
rename to files/zh-cn/web/svg/attribute/cx/index.md
diff --git a/files/zh-cn/web/svg/attribute/cy/index.html b/files/zh-cn/web/svg/attribute/cy/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/cy/index.html
rename to files/zh-cn/web/svg/attribute/cy/index.md
diff --git a/files/zh-cn/web/svg/attribute/d/index.html b/files/zh-cn/web/svg/attribute/d/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/d/index.html
rename to files/zh-cn/web/svg/attribute/d/index.md
diff --git a/files/zh-cn/web/svg/attribute/display/index.html b/files/zh-cn/web/svg/attribute/display/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/display/index.html
rename to files/zh-cn/web/svg/attribute/display/index.md
diff --git a/files/zh-cn/web/svg/attribute/dominant-baseline/index.html b/files/zh-cn/web/svg/attribute/dominant-baseline/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/dominant-baseline/index.html
rename to files/zh-cn/web/svg/attribute/dominant-baseline/index.md
diff --git a/files/zh-cn/web/svg/attribute/dur/index.html b/files/zh-cn/web/svg/attribute/dur/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/dur/index.html
rename to files/zh-cn/web/svg/attribute/dur/index.md
diff --git a/files/zh-cn/web/svg/attribute/dx/index.html b/files/zh-cn/web/svg/attribute/dx/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/dx/index.html
rename to files/zh-cn/web/svg/attribute/dx/index.md
diff --git a/files/zh-cn/web/svg/attribute/edgemode/index.html b/files/zh-cn/web/svg/attribute/edgemode/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/edgemode/index.html
rename to files/zh-cn/web/svg/attribute/edgemode/index.md
diff --git a/files/zh-cn/web/svg/attribute/enable-background/index.html b/files/zh-cn/web/svg/attribute/enable-background/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/enable-background/index.html
rename to files/zh-cn/web/svg/attribute/enable-background/index.md
diff --git a/files/zh-cn/web/svg/attribute/end/index.html b/files/zh-cn/web/svg/attribute/end/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/end/index.html
rename to files/zh-cn/web/svg/attribute/end/index.md
diff --git a/files/zh-cn/web/svg/attribute/fill-opacity/index.html b/files/zh-cn/web/svg/attribute/fill-opacity/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/fill-opacity/index.html
rename to files/zh-cn/web/svg/attribute/fill-opacity/index.md
diff --git a/files/zh-cn/web/svg/attribute/fill-rule/index.html b/files/zh-cn/web/svg/attribute/fill-rule/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/fill-rule/index.html
rename to files/zh-cn/web/svg/attribute/fill-rule/index.md
diff --git a/files/zh-cn/web/svg/attribute/fill/index.html b/files/zh-cn/web/svg/attribute/fill/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/fill/index.html
rename to files/zh-cn/web/svg/attribute/fill/index.md
diff --git a/files/zh-cn/web/svg/attribute/filter/index.html b/files/zh-cn/web/svg/attribute/filter/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/filter/index.html
rename to files/zh-cn/web/svg/attribute/filter/index.md
diff --git a/files/zh-cn/web/svg/attribute/filterunits/index.html b/files/zh-cn/web/svg/attribute/filterunits/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/filterunits/index.html
rename to files/zh-cn/web/svg/attribute/filterunits/index.md
diff --git a/files/zh-cn/web/svg/attribute/font-family/index.html b/files/zh-cn/web/svg/attribute/font-family/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/font-family/index.html
rename to files/zh-cn/web/svg/attribute/font-family/index.md
diff --git a/files/zh-cn/web/svg/attribute/fr/index.html b/files/zh-cn/web/svg/attribute/fr/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/fr/index.html
rename to files/zh-cn/web/svg/attribute/fr/index.md
diff --git a/files/zh-cn/web/svg/attribute/from/index.html b/files/zh-cn/web/svg/attribute/from/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/from/index.html
rename to files/zh-cn/web/svg/attribute/from/index.md
diff --git a/files/zh-cn/web/svg/attribute/fx/index.html b/files/zh-cn/web/svg/attribute/fx/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/fx/index.html
rename to files/zh-cn/web/svg/attribute/fx/index.md
diff --git a/files/zh-cn/web/svg/attribute/fy/index.html b/files/zh-cn/web/svg/attribute/fy/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/fy/index.html
rename to files/zh-cn/web/svg/attribute/fy/index.md
diff --git a/files/zh-cn/web/svg/attribute/height/index.html b/files/zh-cn/web/svg/attribute/height/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/height/index.html
rename to files/zh-cn/web/svg/attribute/height/index.md
diff --git a/files/zh-cn/web/svg/attribute/id/index.html b/files/zh-cn/web/svg/attribute/id/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/id/index.html
rename to files/zh-cn/web/svg/attribute/id/index.md
diff --git a/files/zh-cn/web/svg/attribute/image-rendering/index.html b/files/zh-cn/web/svg/attribute/image-rendering/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/image-rendering/index.html
rename to files/zh-cn/web/svg/attribute/image-rendering/index.md
diff --git a/files/zh-cn/web/svg/attribute/in/index.html b/files/zh-cn/web/svg/attribute/in/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/in/index.html
rename to files/zh-cn/web/svg/attribute/in/index.md
diff --git a/files/zh-cn/web/svg/attribute/index.html b/files/zh-cn/web/svg/attribute/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/index.html
rename to files/zh-cn/web/svg/attribute/index.md
diff --git a/files/zh-cn/web/svg/attribute/kernelmatrix/index.html b/files/zh-cn/web/svg/attribute/kernelmatrix/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/kernelmatrix/index.html
rename to files/zh-cn/web/svg/attribute/kernelmatrix/index.md
diff --git a/files/zh-cn/web/svg/attribute/keytimes/index.html b/files/zh-cn/web/svg/attribute/keytimes/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/keytimes/index.html
rename to files/zh-cn/web/svg/attribute/keytimes/index.md
diff --git a/files/zh-cn/web/svg/attribute/letter-spacing/index.html b/files/zh-cn/web/svg/attribute/letter-spacing/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/letter-spacing/index.html
rename to files/zh-cn/web/svg/attribute/letter-spacing/index.md
diff --git a/files/zh-cn/web/svg/attribute/marker-end/index.html b/files/zh-cn/web/svg/attribute/marker-end/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/marker-end/index.html
rename to files/zh-cn/web/svg/attribute/marker-end/index.md
diff --git a/files/zh-cn/web/svg/attribute/marker-start/index.html b/files/zh-cn/web/svg/attribute/marker-start/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/marker-start/index.html
rename to files/zh-cn/web/svg/attribute/marker-start/index.md
diff --git a/files/zh-cn/web/svg/attribute/mask/index.html b/files/zh-cn/web/svg/attribute/mask/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/mask/index.html
rename to files/zh-cn/web/svg/attribute/mask/index.md
diff --git a/files/zh-cn/web/svg/attribute/max/index.html b/files/zh-cn/web/svg/attribute/max/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/max/index.html
rename to files/zh-cn/web/svg/attribute/max/index.md
diff --git a/files/zh-cn/web/svg/attribute/media/index.html b/files/zh-cn/web/svg/attribute/media/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/media/index.html
rename to files/zh-cn/web/svg/attribute/media/index.md
diff --git a/files/zh-cn/web/svg/attribute/opacity/index.html b/files/zh-cn/web/svg/attribute/opacity/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/opacity/index.html
rename to files/zh-cn/web/svg/attribute/opacity/index.md
diff --git a/files/zh-cn/web/svg/attribute/order/index.html b/files/zh-cn/web/svg/attribute/order/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/order/index.html
rename to files/zh-cn/web/svg/attribute/order/index.md
diff --git a/files/zh-cn/web/svg/attribute/origin/index.html b/files/zh-cn/web/svg/attribute/origin/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/origin/index.html
rename to files/zh-cn/web/svg/attribute/origin/index.md
diff --git a/files/zh-cn/web/svg/attribute/overflow/index.html b/files/zh-cn/web/svg/attribute/overflow/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/overflow/index.html
rename to files/zh-cn/web/svg/attribute/overflow/index.md
diff --git a/files/zh-cn/web/svg/attribute/pathlength/index.html b/files/zh-cn/web/svg/attribute/pathlength/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/pathlength/index.html
rename to files/zh-cn/web/svg/attribute/pathlength/index.md
diff --git a/files/zh-cn/web/svg/attribute/patternunits/index.html b/files/zh-cn/web/svg/attribute/patternunits/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/patternunits/index.html
rename to files/zh-cn/web/svg/attribute/patternunits/index.md
diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.html b/files/zh-cn/web/svg/attribute/pointer-events/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/pointer-events/index.html
rename to files/zh-cn/web/svg/attribute/pointer-events/index.md
diff --git a/files/zh-cn/web/svg/attribute/points/index.html b/files/zh-cn/web/svg/attribute/points/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/points/index.html
rename to files/zh-cn/web/svg/attribute/points/index.md
diff --git a/files/zh-cn/web/svg/attribute/presentation/index.html b/files/zh-cn/web/svg/attribute/presentation/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/presentation/index.html
rename to files/zh-cn/web/svg/attribute/presentation/index.md
diff --git a/files/zh-cn/web/svg/attribute/preservealpha/index.html b/files/zh-cn/web/svg/attribute/preservealpha/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/preservealpha/index.html
rename to files/zh-cn/web/svg/attribute/preservealpha/index.md
diff --git a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/preserveaspectratio/index.html
rename to files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
diff --git a/files/zh-cn/web/svg/attribute/primitiveunits/index.html b/files/zh-cn/web/svg/attribute/primitiveunits/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/primitiveunits/index.html
rename to files/zh-cn/web/svg/attribute/primitiveunits/index.md
diff --git a/files/zh-cn/web/svg/attribute/r/index.html b/files/zh-cn/web/svg/attribute/r/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/r/index.html
rename to files/zh-cn/web/svg/attribute/r/index.md
diff --git a/files/zh-cn/web/svg/attribute/radius/index.html b/files/zh-cn/web/svg/attribute/radius/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/radius/index.html
rename to files/zh-cn/web/svg/attribute/radius/index.md
diff --git a/files/zh-cn/web/svg/attribute/repeatcount/index.html b/files/zh-cn/web/svg/attribute/repeatcount/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/repeatcount/index.html
rename to files/zh-cn/web/svg/attribute/repeatcount/index.md
diff --git a/files/zh-cn/web/svg/attribute/result/index.html b/files/zh-cn/web/svg/attribute/result/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/result/index.html
rename to files/zh-cn/web/svg/attribute/result/index.md
diff --git a/files/zh-cn/web/svg/attribute/rx/index.html b/files/zh-cn/web/svg/attribute/rx/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/rx/index.html
rename to files/zh-cn/web/svg/attribute/rx/index.md
diff --git a/files/zh-cn/web/svg/attribute/scale/index.html b/files/zh-cn/web/svg/attribute/scale/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/scale/index.html
rename to files/zh-cn/web/svg/attribute/scale/index.md
diff --git a/files/zh-cn/web/svg/attribute/seed/index.html b/files/zh-cn/web/svg/attribute/seed/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/seed/index.html
rename to files/zh-cn/web/svg/attribute/seed/index.md
diff --git a/files/zh-cn/web/svg/attribute/shape-rendering/index.html b/files/zh-cn/web/svg/attribute/shape-rendering/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/shape-rendering/index.html
rename to files/zh-cn/web/svg/attribute/shape-rendering/index.md
diff --git a/files/zh-cn/web/svg/attribute/stddeviation/index.html b/files/zh-cn/web/svg/attribute/stddeviation/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/stddeviation/index.html
rename to files/zh-cn/web/svg/attribute/stddeviation/index.md
diff --git a/files/zh-cn/web/svg/attribute/string/index.html b/files/zh-cn/web/svg/attribute/string/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/string/index.html
rename to files/zh-cn/web/svg/attribute/string/index.md
diff --git a/files/zh-cn/web/svg/attribute/stroke-dasharray/index.html b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/stroke-dasharray/index.html
rename to files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
diff --git a/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.html b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/stroke-dashoffset/index.html
rename to files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
diff --git a/files/zh-cn/web/svg/attribute/stroke-linecap/index.html b/files/zh-cn/web/svg/attribute/stroke-linecap/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/stroke-linecap/index.html
rename to files/zh-cn/web/svg/attribute/stroke-linecap/index.md
diff --git a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/stroke-linejoin/index.html
rename to files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
diff --git a/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.html b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/stroke-miterlimit/index.html
rename to files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md
diff --git a/files/zh-cn/web/svg/attribute/stroke-opacity/index.html b/files/zh-cn/web/svg/attribute/stroke-opacity/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/stroke-opacity/index.html
rename to files/zh-cn/web/svg/attribute/stroke-opacity/index.md
diff --git a/files/zh-cn/web/svg/attribute/stroke-width/index.html b/files/zh-cn/web/svg/attribute/stroke-width/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/stroke-width/index.html
rename to files/zh-cn/web/svg/attribute/stroke-width/index.md
diff --git a/files/zh-cn/web/svg/attribute/stroke/index.html b/files/zh-cn/web/svg/attribute/stroke/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/stroke/index.html
rename to files/zh-cn/web/svg/attribute/stroke/index.md
diff --git a/files/zh-cn/web/svg/attribute/style/index.html b/files/zh-cn/web/svg/attribute/style/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/style/index.html
rename to files/zh-cn/web/svg/attribute/style/index.md
diff --git a/files/zh-cn/web/svg/attribute/styling/index.html b/files/zh-cn/web/svg/attribute/styling/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/styling/index.html
rename to files/zh-cn/web/svg/attribute/styling/index.md
diff --git a/files/zh-cn/web/svg/attribute/target/index.html b/files/zh-cn/web/svg/attribute/target/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/target/index.html
rename to files/zh-cn/web/svg/attribute/target/index.md
diff --git a/files/zh-cn/web/svg/attribute/text-anchor/index.html b/files/zh-cn/web/svg/attribute/text-anchor/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/text-anchor/index.html
rename to files/zh-cn/web/svg/attribute/text-anchor/index.md
diff --git a/files/zh-cn/web/svg/attribute/text-decoration/index.html b/files/zh-cn/web/svg/attribute/text-decoration/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/text-decoration/index.html
rename to files/zh-cn/web/svg/attribute/text-decoration/index.md
diff --git a/files/zh-cn/web/svg/attribute/transform/index.html b/files/zh-cn/web/svg/attribute/transform/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/transform/index.html
rename to files/zh-cn/web/svg/attribute/transform/index.md
diff --git a/files/zh-cn/web/svg/attribute/type/index.html b/files/zh-cn/web/svg/attribute/type/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/type/index.html
rename to files/zh-cn/web/svg/attribute/type/index.md
diff --git a/files/zh-cn/web/svg/attribute/units-per-em/index.html b/files/zh-cn/web/svg/attribute/units-per-em/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/units-per-em/index.html
rename to files/zh-cn/web/svg/attribute/units-per-em/index.md
diff --git a/files/zh-cn/web/svg/attribute/values/index.html b/files/zh-cn/web/svg/attribute/values/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/values/index.html
rename to files/zh-cn/web/svg/attribute/values/index.md
diff --git a/files/zh-cn/web/svg/attribute/vector-effect/index.html b/files/zh-cn/web/svg/attribute/vector-effect/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/vector-effect/index.html
rename to files/zh-cn/web/svg/attribute/vector-effect/index.md
diff --git a/files/zh-cn/web/svg/attribute/version/index.html b/files/zh-cn/web/svg/attribute/version/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/version/index.html
rename to files/zh-cn/web/svg/attribute/version/index.md
diff --git a/files/zh-cn/web/svg/attribute/viewbox/index.html b/files/zh-cn/web/svg/attribute/viewbox/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/viewbox/index.html
rename to files/zh-cn/web/svg/attribute/viewbox/index.md
diff --git a/files/zh-cn/web/svg/attribute/visibility/index.html b/files/zh-cn/web/svg/attribute/visibility/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/visibility/index.html
rename to files/zh-cn/web/svg/attribute/visibility/index.md
diff --git a/files/zh-cn/web/svg/attribute/width/index.html b/files/zh-cn/web/svg/attribute/width/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/width/index.html
rename to files/zh-cn/web/svg/attribute/width/index.md
diff --git a/files/zh-cn/web/svg/attribute/x/index.html b/files/zh-cn/web/svg/attribute/x/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/x/index.html
rename to files/zh-cn/web/svg/attribute/x/index.md
diff --git a/files/zh-cn/web/svg/attribute/y/index.html b/files/zh-cn/web/svg/attribute/y/index.md
similarity index 100%
rename from files/zh-cn/web/svg/attribute/y/index.html
rename to files/zh-cn/web/svg/attribute/y/index.md
diff --git a/files/zh-cn/web/svg/content_type/index.html b/files/zh-cn/web/svg/content_type/index.md
similarity index 100%
rename from files/zh-cn/web/svg/content_type/index.html
rename to files/zh-cn/web/svg/content_type/index.md
diff --git a/files/zh-cn/web/svg/element/animatemotion/index.html b/files/zh-cn/web/svg/element/animatemotion/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/animatemotion/index.html
rename to files/zh-cn/web/svg/element/animatemotion/index.md
diff --git a/files/zh-cn/web/svg/element/clippath/index.html b/files/zh-cn/web/svg/element/clippath/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/clippath/index.html
rename to files/zh-cn/web/svg/element/clippath/index.md
diff --git a/files/zh-cn/web/svg/element/cursor/index.html b/files/zh-cn/web/svg/element/cursor/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/cursor/index.html
rename to files/zh-cn/web/svg/element/cursor/index.md
diff --git a/files/zh-cn/web/svg/element/fediffuselighting/index.html b/files/zh-cn/web/svg/element/fediffuselighting/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/fediffuselighting/index.html
rename to files/zh-cn/web/svg/element/fediffuselighting/index.md
diff --git a/files/zh-cn/web/svg/element/foreignobject/index.html b/files/zh-cn/web/svg/element/foreignobject/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/foreignobject/index.html
rename to files/zh-cn/web/svg/element/foreignobject/index.md
diff --git a/files/zh-cn/web/svg/element/g/index.html b/files/zh-cn/web/svg/element/g/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/g/index.html
rename to files/zh-cn/web/svg/element/g/index.md
diff --git a/files/zh-cn/web/svg/element/index.html b/files/zh-cn/web/svg/element/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/index.html
rename to files/zh-cn/web/svg/element/index.md
diff --git a/files/zh-cn/web/svg/element/path/index.html b/files/zh-cn/web/svg/element/path/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/path/index.html
rename to files/zh-cn/web/svg/element/path/index.md
diff --git a/files/zh-cn/web/svg/element/switch/index.html b/files/zh-cn/web/svg/element/switch/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/switch/index.html
rename to files/zh-cn/web/svg/element/switch/index.md
diff --git a/files/zh-cn/web/svg/element/text/index.html b/files/zh-cn/web/svg/element/text/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/text/index.html
rename to files/zh-cn/web/svg/element/text/index.md
diff --git a/files/zh-cn/web/svg/element/use/index.html b/files/zh-cn/web/svg/element/use/index.md
similarity index 100%
rename from files/zh-cn/web/svg/element/use/index.html
rename to files/zh-cn/web/svg/element/use/index.md
diff --git a/files/zh-cn/web/svg/index.html b/files/zh-cn/web/svg/index.md
similarity index 100%
rename from files/zh-cn/web/svg/index.html
rename to files/zh-cn/web/svg/index.md
diff --git a/files/zh-cn/web/svg/namespaces_crash_course/index.html b/files/zh-cn/web/svg/namespaces_crash_course/index.md
similarity index 100%
rename from files/zh-cn/web/svg/namespaces_crash_course/index.html
rename to files/zh-cn/web/svg/namespaces_crash_course/index.md
diff --git a/files/zh-cn/web/svg/tutorial/basic_shapes/index.html b/files/zh-cn/web/svg/tutorial/basic_shapes/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/basic_shapes/index.html
rename to files/zh-cn/web/svg/tutorial/basic_shapes/index.md
diff --git a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html
rename to files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md
diff --git a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html
rename to files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
diff --git a/files/zh-cn/web/svg/tutorial/filter_effects/index.html b/files/zh-cn/web/svg/tutorial/filter_effects/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/filter_effects/index.html
rename to files/zh-cn/web/svg/tutorial/filter_effects/index.md
diff --git a/files/zh-cn/web/svg/tutorial/getting_started/index.html b/files/zh-cn/web/svg/tutorial/getting_started/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/getting_started/index.html
rename to files/zh-cn/web/svg/tutorial/getting_started/index.md
diff --git a/files/zh-cn/web/svg/tutorial/gradients/index.html b/files/zh-cn/web/svg/tutorial/gradients/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/gradients/index.html
rename to files/zh-cn/web/svg/tutorial/gradients/index.md
diff --git a/files/zh-cn/web/svg/tutorial/index.html b/files/zh-cn/web/svg/tutorial/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/index.html
rename to files/zh-cn/web/svg/tutorial/index.md
diff --git a/files/zh-cn/web/svg/tutorial/introduction/index.html b/files/zh-cn/web/svg/tutorial/introduction/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/introduction/index.html
rename to files/zh-cn/web/svg/tutorial/introduction/index.md
diff --git a/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html
rename to files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md
diff --git a/files/zh-cn/web/svg/tutorial/paths/index.html b/files/zh-cn/web/svg/tutorial/paths/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/paths/index.html
rename to files/zh-cn/web/svg/tutorial/paths/index.md
diff --git a/files/zh-cn/web/svg/tutorial/positions/index.html b/files/zh-cn/web/svg/tutorial/positions/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/positions/index.html
rename to files/zh-cn/web/svg/tutorial/positions/index.md
diff --git a/files/zh-cn/web/svg/tutorial/svg_and_css/index.html b/files/zh-cn/web/svg/tutorial/svg_and_css/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/svg_and_css/index.html
rename to files/zh-cn/web/svg/tutorial/svg_and_css/index.md
diff --git a/files/zh-cn/web/svg/tutorial/svg_fonts/index.html b/files/zh-cn/web/svg/tutorial/svg_fonts/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/svg_fonts/index.html
rename to files/zh-cn/web/svg/tutorial/svg_fonts/index.md
diff --git a/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md
similarity index 100%
rename from files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html
rename to files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md

From cd71fc5fc8f57b5020dbbba958227a0ed288d642 Mon Sep 17 00:00:00 2001
From: allo 
Date: Thu, 11 Aug 2022 09:54:56 +0800
Subject: [PATCH 3/3] convert to markdown for svg zh-CN

---
 .../index.md                                  | 294 ++++---
 .../web/svg/attribute/accent-height/index.md  |  63 +-
 .../web/svg/attribute/accumulate/index.md     |  81 +-
 .../svg/attribute/alignment-baseline/index.md | 116 ++-
 .../web/svg/attribute/attributename/index.md  |  69 +-
 .../web/svg/attribute/attributetype/index.md  |  68 +-
 .../web/svg/attribute/baseline-shift/index.md |  79 +-
 .../web/svg/attribute/baseprofile/index.md    |  83 +-
 files/zh-cn/web/svg/attribute/begin/index.md  |  93 +--
 .../zh-cn/web/svg/attribute/calcmode/index.md |  47 +-
 .../web/svg/attribute/clip-path/index.md      | 110 ++-
 files/zh-cn/web/svg/attribute/clip/index.md   |  76 +-
 files/zh-cn/web/svg/attribute/color/index.md  |  71 +-
 files/zh-cn/web/svg/attribute/cx/index.md     | 218 +++--
 files/zh-cn/web/svg/attribute/cy/index.md     | 218 +++--
 files/zh-cn/web/svg/attribute/d/index.md      | 324 ++++---
 .../zh-cn/web/svg/attribute/display/index.md  | 128 ++-
 .../svg/attribute/dominant-baseline/index.md  | 140 ++--
 files/zh-cn/web/svg/attribute/dur/index.md    |  71 +-
 files/zh-cn/web/svg/attribute/dx/index.md     |  73 +-
 .../zh-cn/web/svg/attribute/edgemode/index.md |  79 +-
 .../svg/attribute/enable-background/index.md  |  58 +-
 files/zh-cn/web/svg/attribute/end/index.md    |  47 +-
 .../web/svg/attribute/fill-opacity/index.md   |  74 +-
 .../web/svg/attribute/fill-rule/index.md      | 180 ++--
 files/zh-cn/web/svg/attribute/fill/index.md   |  88 +-
 files/zh-cn/web/svg/attribute/filter/index.md |  79 +-
 .../web/svg/attribute/filterunits/index.md    |  75 +-
 .../web/svg/attribute/font-family/index.md    |  82 +-
 files/zh-cn/web/svg/attribute/fr/index.md     |  81 +-
 files/zh-cn/web/svg/attribute/from/index.md   |  71 +-
 files/zh-cn/web/svg/attribute/fx/index.md     |  81 +-
 files/zh-cn/web/svg/attribute/fy/index.md     |  83 +-
 files/zh-cn/web/svg/attribute/height/index.md |  70 +-
 files/zh-cn/web/svg/attribute/id/index.md     |  92 +-
 .../svg/attribute/image-rendering/index.md    |  79 +-
 files/zh-cn/web/svg/attribute/in/index.md     | 182 ++--
 files/zh-cn/web/svg/attribute/index.md        | 790 ++++++++----------
 .../web/svg/attribute/kernelmatrix/index.md   |  38 +-
 .../zh-cn/web/svg/attribute/keytimes/index.md |  92 +-
 .../web/svg/attribute/letter-spacing/index.md |  70 +-
 .../web/svg/attribute/marker-end/index.md     | 101 +--
 .../web/svg/attribute/marker-start/index.md   | 101 +--
 files/zh-cn/web/svg/attribute/mask/index.md   |  54 +-
 files/zh-cn/web/svg/attribute/max/index.md    |  76 +-
 files/zh-cn/web/svg/attribute/media/index.md  |  72 +-
 .../zh-cn/web/svg/attribute/opacity/index.md  |  72 +-
 files/zh-cn/web/svg/attribute/order/index.md  |  44 +-
 files/zh-cn/web/svg/attribute/origin/index.md |  36 +-
 .../zh-cn/web/svg/attribute/overflow/index.md |  76 +-
 .../web/svg/attribute/pathlength/index.md     | 274 +++---
 .../web/svg/attribute/patternunits/index.md   |  88 +-
 .../web/svg/attribute/pointer-events/index.md |  80 +-
 files/zh-cn/web/svg/attribute/points/index.md |  53 +-
 .../web/svg/attribute/presentation/index.md   | 518 ++++++------
 .../web/svg/attribute/preservealpha/index.md  |  42 +-
 .../attribute/preserveaspectratio/index.md    | 167 ++--
 .../web/svg/attribute/primitiveunits/index.md |  50 +-
 files/zh-cn/web/svg/attribute/r/index.md      | 144 ++--
 files/zh-cn/web/svg/attribute/radius/index.md |  40 +-
 .../web/svg/attribute/repeatcount/index.md    |  42 +-
 files/zh-cn/web/svg/attribute/result/index.md |  38 +-
 files/zh-cn/web/svg/attribute/rx/index.md     | 132 ++-
 files/zh-cn/web/svg/attribute/scale/index.md  |  42 +-
 files/zh-cn/web/svg/attribute/seed/index.md   |  40 +-
 .../svg/attribute/shape-rendering/index.md    |  88 +-
 .../web/svg/attribute/stddeviation/index.md   |  44 +-
 files/zh-cn/web/svg/attribute/string/index.md |  56 +-
 .../svg/attribute/stroke-dasharray/index.md   | 102 +--
 .../svg/attribute/stroke-dashoffset/index.md  |  69 +-
 .../web/svg/attribute/stroke-linecap/index.md |  84 +-
 .../svg/attribute/stroke-linejoin/index.md    | 391 ++++-----
 .../svg/attribute/stroke-miterlimit/index.md  |  60 +-
 .../web/svg/attribute/stroke-opacity/index.md |  78 +-
 .../web/svg/attribute/stroke-width/index.md   |  42 +-
 files/zh-cn/web/svg/attribute/stroke/index.md |  68 +-
 files/zh-cn/web/svg/attribute/style/index.md  |  87 +-
 .../zh-cn/web/svg/attribute/styling/index.md  |  30 +-
 files/zh-cn/web/svg/attribute/target/index.md | 115 ++-
 .../web/svg/attribute/text-anchor/index.md    | 100 +--
 .../svg/attribute/text-decoration/index.md    |  44 +-
 .../web/svg/attribute/transform/index.md      | 262 +++---
 files/zh-cn/web/svg/attribute/type/index.md   | 214 ++---
 .../web/svg/attribute/units-per-em/index.md   |  58 +-
 files/zh-cn/web/svg/attribute/values/index.md |  82 +-
 .../web/svg/attribute/vector-effect/index.md  | 117 ++-
 .../zh-cn/web/svg/attribute/version/index.md  |  28 +-
 .../zh-cn/web/svg/attribute/viewbox/index.md  | 118 ++-
 .../web/svg/attribute/visibility/index.md     |  54 +-
 files/zh-cn/web/svg/attribute/width/index.md  |  74 +-
 files/zh-cn/web/svg/attribute/x/index.md      |  88 +-
 files/zh-cn/web/svg/attribute/y/index.md      |  88 +-
 files/zh-cn/web/svg/content_type/index.md     | 460 ++++------
 .../web/svg/element/animatemotion/index.md    |  88 +-
 files/zh-cn/web/svg/element/clippath/index.md |  98 +--
 files/zh-cn/web/svg/element/cursor/index.md   |  49 +-
 .../svg/element/fediffuselighting/index.md    | 172 ++--
 .../web/svg/element/foreignobject/index.md    | 126 ++-
 files/zh-cn/web/svg/element/g/index.md        |  65 +-
 files/zh-cn/web/svg/element/index.md          | 368 ++++----
 files/zh-cn/web/svg/element/path/index.md     |  86 +-
 files/zh-cn/web/svg/element/switch/index.md   |  46 +-
 files/zh-cn/web/svg/element/text/index.md     | 132 ++-
 files/zh-cn/web/svg/element/use/index.md      | 107 ++-
 files/zh-cn/web/svg/index.md                  |  86 +-
 .../web/svg/namespaces_crash_course/index.md  | 294 +++----
 .../web/svg/tutorial/basic_shapes/index.md    | 198 ++---
 .../tutorial/clipping_and_masking/index.md    | 110 +--
 .../svg/tutorial/fills_and_strokes/index.md   | 171 ++--
 .../web/svg/tutorial/filter_effects/index.md  | 211 ++---
 .../web/svg/tutorial/getting_started/index.md | 120 +--
 .../zh-cn/web/svg/tutorial/gradients/index.md | 253 +++---
 files/zh-cn/web/svg/tutorial/index.md         |  60 +-
 .../web/svg/tutorial/introduction/index.md    |  38 +-
 .../tutorial/other_content_in_svg/index.md    |  38 +-
 files/zh-cn/web/svg/tutorial/paths/index.md   | 276 +++---
 .../zh-cn/web/svg/tutorial/positions/index.md |  50 +-
 .../web/svg/tutorial/svg_and_css/index.md     | 221 +++--
 .../zh-cn/web/svg/tutorial/svg_fonts/index.md | 118 +--
 .../svg_in_html_introduction/index.md         | 124 ++-
 120 files changed, 6188 insertions(+), 7913 deletions(-)

diff --git a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
index 3a440fe272d5f8..181766c28f9669 100644
--- a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
+++ b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.md
@@ -10,229 +10,251 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
 ---
-
    现代浏览器支持在 CSS 样式中使用 SVG 来对 HTML 内容应用图像效果。
    
+现代浏览器支持在 [CSS](/zh-CN/docs/Web/CSS) 样式中使用 [SVG](/zh-CN/docs/SVG) 来对 HTML 内容应用图像效果。
 
-
    你可以在同一文件中使用 SVG 样式，也可以通过外部样式表引入。有三个属性可以使用： mask, clip-path, 和 filter。
    
+你可以在同一文件中使用 SVG 样式，也可以通过外部样式表引入。有三个属性可以使用： [`mask`](/zh-CN/docs/Web/CSS/mask), [`clip-path`](/zh-CN/docs/Web/CSS/clip-path), 和 `filter。`
 
-
    备注： 在外部文件引入的 SVG 必须与原始文件 同源 。
    
+> **备注：** 在外部文件引入的 SVG 必须与原始文件 [同源](/zh-CN/docs/Web/Security/Same-origin_policy) 。
 
-
    使用内嵌 SVG
    
+## 使用内嵌 SVG
 
-
    要想在 CSS 样式中应用 SVG 效果，首先需要创建一个引用 SVG 的 CSS 样式。
    
+要想在 CSS 样式中应用 SVG 效果，首先需要创建一个引用 SVG 的 CSS 样式。
 
-
    <style>p { mask: url(#my-mask); }</style>
    
+```html
+
+```
 
-
    在上面的例子中，所有段落会被ID 为my-mask 的SVG <mask>遮罩。
    
+在上面的例子中，所有段落会被[ID](/zh-CN/docs/Web/HTML/Global_attributes/id) 为`my-mask 的`[SVG ``](/zh-CN/docs/Web/SVG/Element/mask)遮罩。
 
-
    示例：Masking
    
+### 示例：Masking
 
-
    例如，你可以在你的 HTML 文档中用 SVG 和 CSS 代码对 HTML 内容作渐变 mask 效果。
    
+例如，你可以在你的 HTML 文档中用 SVG 和 CSS 代码对 HTML 内容作渐变 mask 效果。
 
-
    <svg height="0">
-  <mask id="mask-1">
-    <linearGradient id="gradient-1" y2="1">
-      <stop stop-color="white" offset="0"/>
-      <stop stop-opacity="0" offset="1"/>
-    </linearGradient>
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
-  </mask>
-</svg>
-
    
+```html
+
+  
+    
+      
+      
+    
+    
+    
+  
+
+```
 
-
    .target {
+```css
+.target {
   mask: url(#mask-1);
 }
 p {
   width: 300px;
   border: 1px solid #000;
   display: inline-block;
-}
    
+}
+```
 
-
    注意，在 CSS 中 遮罩（mask）使用一个指向 ID 为 #mask-1的 URL，这个 ID 是在上面的 SVG 中指定的。 SVG 中其他的内容指定了渐变遮罩的细节。
    
+注意，在 CSS 中 遮罩（mask）使用一个指向 ID 为 `#mask-1`的 URL，这个 ID 是在上面的 SVG 中指定的。 SVG 中其他的内容指定了渐变遮罩的细节。
 
-
    将 SVG 效果应用于 (X)HTML 是通过将 target 这个 class 应用于其他元素来实现的，如下所示：
    
+将 SVG 效果应用于 (X)HTML 是通过将 `target` 这个 class 应用于其他元素来实现的，如下所示：
 
-
    <p class="target" style="background:lime;">
+```html
+
    
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
     ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-</p>
-<p>
+
    
+
    
     Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
+    elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.
     Ut enim ad minim veniam.
-</p>
-
    
+
    
+```
 
-
    上面的示例将渲染出一个有遮罩的例子
    
+上面的示例将渲染出一个有遮罩的例子
 
-
    {{EmbedLiveSample('示例：Masking', 650, 200)}}
    
+{{EmbedLiveSample('示例：Masking', 650, 200)}}
 
-
    示例：Clipping
    
+### 示例：Clipping
 
-
    此示例演示如何使用 SVG 剪辑 HTML 内容。请注意，即使链接的可点击区域也被剪切。
    
+此示例演示如何使用 SVG 剪辑 HTML 内容。请注意，即使链接的可点击区域也被剪切。
 
-
    <p class="target" style="background:lime;">
+```html
+
    
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
     ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-</p>
-<p>
+
    
+
    
     Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
+    elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.
     Ut enim ad minim veniam.
-</p>
+
    
 
-<button onclick="toggleRadius()">Toggle radius</button>
+
 
-<svg height="0">
-  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
-    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
-  </clipPath>
-</svg>
-
    
+
+  
+    
+    
+  
+
+```
 
-
    .target {
+```css
+.target {
   clip-path: url(#clipping-path-1);
 }
 p {
   width: 300px;
   border: 1px solid #000;
   display: inline-block;
-}
    
+}
+```
 
-
    这个例子将建立一个由圆形和矩形组成的剪切区域，为其指定 ID #clipping-path-1，然后在 CSS 中引用它。剪切路径可以分配给具有 target class 的任何元素。
    
+这个例子将建立一个由圆形和矩形组成的剪切区域，为其指定 ID `#clipping-path-1`，然后在 CSS 中引用它。剪切路径可以分配给具有 `target` class 的任何元素。
 
-
    你可以实时地对 SVG 进行更改，并看到它们立即影响 HTML 的渲染。例如，可以在上面建立的剪切路径中调整圆形的大小：
    
+你可以实时地对 SVG 进行更改，并看到它们立即影响 HTML 的渲染。例如，可以在上面建立的剪切路径中调整圆形的大小：
 
-
    function toggleRadius() {
+```js
+function toggleRadius() {
   var circle = document.getElementById("circle");
   circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
 }
-
    
+```
 
-
    {{EmbedLiveSample('示例：Clipping', 650, 200)}}
    
+{{EmbedLiveSample('示例：Clipping', 650, 200)}}
 
-
    示例：Filtering
    
+### 示例：Filtering
 
-
    这个例子演示了如何使用 SVG 对 HTML 内容进行过滤。它建立了几个过滤器，这些过滤器与 CSS 一起作用于正常和鼠标悬停状态 hover 下的三个元素。
    
+这个例子演示了如何使用 SVG 对 HTML 内容进行过滤。它建立了几个过滤器，这些过滤器与 CSS 一起作用于正常和鼠标悬停状态 [hover](/zh-CN/docs/Web/CSS/:hover) 下的三个元素。
 
-
    <p class="target" style="background: lime;">
+```html
+
    
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
     ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-</p>
-<pre class="target">lorem</pre>
-<p>
+
    
+
    lorem
    
+
    
     Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
+    elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.
     Ut enim ad minim veniam.
-</p>
-
    
+
    
+```
 
-
    任何 SVG 过滤器都可以这样使用。例如，要应用模糊效果，你可以这样使用：
    
+任何 SVG 过滤器都可以这样使用。例如，要应用模糊效果，你可以这样使用：
 
-
    <svg height="0">
-  <filter id="f1">
-    <feGaussianBlur stdDeviation="3"/>
-  </filter>
-</svg>
    
+```html
+
+  
+    
+  
+
+```
 
-
    也可以应用于颜色矩阵：
    
+也可以应用于颜色矩阵：
 
-
    <svg height="0">
-  <filter id="f2">
-    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
+```html
+
+  
+    
-
-
    或更多的过滤器：
    
-
-
    <svg height="0">
-  <filter id="f3">
-    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
-      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
-  </filter>
-  <filter id="f4">
-    <feSpecularLighting surfaceScale="5" specularConstant="1"
-                        specularExponent="10" lighting-color="white">
-      <fePointLight x="-5000" y="-10000" z="20000"/>
-    </feSpecularLighting>
-  </filter>
-  <filter id="f5">
-    <feColorMatrix values="1 0 0 0 0
+                           0      0      0      1 0"/>
+  
+
+```
+
+或更多的过滤器：
+
+```html
+
+  
+    
+  
+  
+    
+      
+    
+  
+  
+    
+                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
+  
+
+```
 
-
    使用以下 CSS 应用五个过滤器：
    
+使用以下 CSS 应用五个过滤器：
 
-
    p.target { filter:url(#f3); }
+```css
+p.target { filter:url(#f3); }
 p.target:hover { filter:url(#f5); }
 b.target { filter:url(#f1); }
 b.target:hover { filter:url(#f4); }
 pre.target { filter:url(#f2); }
 pre.target:hover { filter:url(#f3); }
-
    
+```
 
-
    {{EmbedLiveSample('示例：Filtering', 650, 200)}}
    
+{{EmbedLiveSample('示例：Filtering', 650, 200)}}
 
-
    View this example live
    
+[View this example live](/files/3329/filterdemo.xhtml)
 
-
    示例：Blurred Text
    
+### 示例：Blurred Text
 
-
    为了模糊文本，基于 Webkit 的浏览器有一个名为 blur 的（前缀）CSS 过滤器，（另见 CSS filter）。你可以使用 SVG 过滤器获得相同的效果。
    
+为了模糊文本，基于 Webkit 的浏览器有一个名为 blur 的（前缀）CSS 过滤器，（另见 [CSS filter](/zh-CN/docs/Web/CSS/filter#blur%28%29_2)）。你可以使用 SVG 过滤器获得相同的效果。
 
-
    <p class="blur">Time to clean my glasses</p>
-<svg height="0">
-  <defs>
-    <filter id="wherearemyglasses" x="0" y="0">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
-    </filter>
-  </defs>
-</svg>
-
    
+```html
+
    Time to clean my glasses
    
+
+  
+    
+    
+    
+  
+
+```
 
-
    你可以在同一个 class 中使用 SVG 和 CSS 过滤器：
    
+你可以在同一个 class 中使用 SVG 和 CSS 过滤器：
 
-
    .blur { filter: url(#wherearemyglasses); }
    
+```css
+.blur { filter: url(#wherearemyglasses); }
+```
 
-
    {{ EmbedLiveSample('示例：Blurred Text', 300, 100) }}
    
+{{ EmbedLiveSample('示例：Blurred Text', 300, 100) }}
 
-
    模糊的计算量很大，所以请谨慎使用它，尤其是在包含滚动或动画的元素中。
    
+模糊的计算量很大，所以请谨慎使用它，尤其是在包含滚动或动画的元素中。
 
-
    示例：Text Effects
    
+### 示例：Text Effects
 
-
    SVG 还可以用于添加比纯 HTML 文本更动态、更灵活的文本添加方法。
    
+SVG 还可以用于添加比纯 HTML 文本更动态、更灵活的文本添加方法。
 
-
    通过使用 SVG 元素与 HTML 结合创建文本，你可以产生不同的文本的效果。如旋转文本：
    
+通过使用 SVG 元素与 HTML 结合创建文本，你可以产生不同的文本的效果。如旋转文本：
 
-
    <svg height="60" width="200">
-  <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">Example text</text>
-</svg>
    
+```svg
+
+  Example text
+
+```
 
-
    使用外部引用
    
+## 使用外部引用
 
-
    用来 clipping，masking，filtering 的 SVG 可以从其他外部源载入，只要外部源是与要使用 SVG 的该 HTML 文档同源的。
    
+用来 clipping，masking，filtering 的 SVG 可以从其他外部源载入，只要外部源是与要使用 SVG 的该 HTML 文档同源的。
 
-
    例如，CSS 规则在一个名为 default.css 的文件中，如下这样：
    
+例如，CSS 规则在一个名为 default.css 的文件中，如下这样：
 
-
    .target { clip-path: url(resources.svg#c1); }
    
+```css
+.target { clip-path: url(resources.svg#c1); }
+```
 
-
    这个 SVG 就可以从一个名为 resources.svg 的文件中导入，clip 路径为 ID c1。
    
+这个 SVG 就可以从一个名为 resources.svg 的文件中导入，clip 路径为 ID c1。
 
-
    参见
    
+## 参见
 
-
+- [SVG](/zh-CN/docs/SVG)
+- [SVG Effects for HTML Content](http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html) (blog post)
+- ~~[SVG External Document References](/web-tech/2008/10/10/svg-external-document-references)~~ (blog post) ([\[archive.org\] Web Tech Blog » Blog Archive » SVG External Document References](http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/))
diff --git a/files/zh-cn/web/svg/attribute/accent-height/index.md b/files/zh-cn/web/svg/attribute/accent-height/index.md
index 520e89981dd1ae..343b5e9735efc2 100644
--- a/files/zh-cn/web/svg/attribute/accent-height/index.md
+++ b/files/zh-cn/web/svg/attribute/accent-height/index.md
@@ -3,45 +3,28 @@ title: accent-height
 slug: Web/SVG/Attribute/accent-height
 translation_of: Web/SVG/Attribute/accent-height
 ---
-
    « 回到 SVG 属性指南首页
    
-
-
    此属性定义从原点到重点字符顶部的距离，通过字体坐标系内的距离测量。
    
-
-
    若未定义该属性，那么该属性就会被设置为{{ SVGAttr("ascent") }}。
    
-
-
    Usage context
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    Value<number>
    AnimatableNo
    Normative documentSVG 1.1 (2nd Edition)
    
-
-
    {{ page("/en-US/docs/SVG/Content_type","Number") }}
    
-
-
    Elements
    
-
-
    The following elements can use the accent-height attribute
    
-
-
      
- 
    • {{ SVGElement("font-face") }}
      • 
-
    
-
-
    规范
    
+« 回到 SVG 属性指南首页
+
+此属性定义从原点到重点字符顶部的距离，通过字体坐标系内的距离测量。
+
+若未定义该属性，那么该属性就会被设置为{{ SVGAttr("ascent") }}。
+
+## Usage context
+
+| Categories         | None                                                                                              |
+| ------------------ | ------------------------------------------------------------------------------------------------- |
+| Value              | [](/en/SVG/Content_type#Length)                                                           |
+| Animatable         | No                                                                                                |
+| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute) |
+
+{{ page("/en-US/docs/SVG/Content_type","Number") }}
+
+## Elements
+
+The following elements can use the `accent-height` attribute
+
+- {{ SVGElement("font-face") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/accumulate/index.md b/files/zh-cn/web/svg/attribute/accumulate/index.md
index 3e4da830a836c2..8d6c16000e174a 100644
--- a/files/zh-cn/web/svg/attribute/accumulate/index.md
+++ b/files/zh-cn/web/svg/attribute/accumulate/index.md
@@ -8,55 +8,36 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Attribute/accumulate
 ---
-
    « SVG 属性参考主页
    
-
-
    该属性控制了动画是否是累加的。
    
-
-
    在原来的结果的基础上重复动画的时候，它通常很有用，每一次循环都累加。这个属性告诉动画是否是每次循环，前一个动画属性值要加上去。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画累加属性
    值none | sum
    可变性No
    规范文档SVG 1.1 (2nd Edition)
    
-
-
    
- 
    sum
    
- 
    指定第一次循环后的每次循环建立在上次循环的终值上。
    
- 
    none
    
- 
    指定重复循环是不累加的。这是默认值。
    
-
    
-
-
    示例
    
-
-
    元素
    
-
-
    以下元素可以使用additive属性：
    
-
-
      
- 
    • {{ SVGElement("animate") }}
      • 
- 
    • {{ SVGElement("animateColor") }}
      • 
- 
    • {{ SVGElement("animateMotion") }}
      • 
- 
    • {{ SVGElement("animateTransform") }}
      • 
-
    
-
-
    规范
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
+
+该属性控制了动画是否是累加的。
+
+在原来的结果的基础上重复动画的时候，它通常很有用，每一次循环都累加。这个属性告诉动画是否是每次循环，前一个动画属性值要加上去。
+
+## 用法
+
+| 类别     | 动画累加属性                                                                      |
+| -------- | --------------------------------------------------------------------------------- |
+| 值       | **none** \| sum                                                                   |
+| 可变性   | No                                                                                |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AdditionAttributes) |
+
+- sum
+  - : 指定第一次循环后的每次循环建立在上次循环的终值上。
+- none
+  - : 指定重复循环是不累加的。这是默认值。
+
+## 示例
+
+## 元素
+
+以下元素可以使用`additive`属性：
+
+- {{ SVGElement("animate") }}
+- {{ SVGElement("animateColor") }}
+- {{ SVGElement("animateMotion") }}
+- {{ SVGElement("animateTransform") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/alignment-baseline/index.md b/files/zh-cn/web/svg/attribute/alignment-baseline/index.md
index dfdee45fd52c50..e09891fbf00dca 100644
--- a/files/zh-cn/web/svg/attribute/alignment-baseline/index.md
+++ b/files/zh-cn/web/svg/attribute/alignment-baseline/index.md
@@ -7,90 +7,72 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/alignment-baseline
 ---
-
    « SVG 属性参考主页
    
-
-
    alignment-baseline属性指定了一个对象如何相对于它的父元素对齐。这个属性指定了该元素的基线对齐到相应的父元素的基线。举个例子，允许罗马文字中的字母表基线在字体大小发生变化时保持一致。它的默认值是 baseline，与该alignment-baseline属性的计算值同名。
    
-
-
    作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请阅读{{ cssxref("alignment-baseline","CSS alignment-baseline") }}以了解更多信息。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit
    可变性Yes
    规范文档SVG 1.1 (2nd Edition)
    
-
-
    示例
    
-
-
    <?xml version="1.0"?>
-<svg width="300" height="120" viewBox="0 0 300 120"
-     xmlns="http://www.w3.org/2000/svg" version="1.1">
-
-    <!-- Materialisation of anchors -->
-    <path d="M60,10 L60,110
+« [SVG 属性参考主页](/en/SVG/Attribute)
+
+`alignment-baseline`属性指定了一个对象如何相对于它的父元素对齐。这个属性指定了该元素的基线对齐到相应的父元素的基线。举个例子，允许罗马文字中的字母表基线在字体大小发生变化时保持一致。它的默认值是 baseline，与该`alignment-baseline`属性的计算值同名。
+
+作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请阅读{{ cssxref("alignment-baseline","CSS alignment-baseline") }}以了解更多信息。
+
+## 用法
+
+| 类别     | 外观属性                                                                                                                                                                         |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 值       | **auto** \| baseline \| before-edge \| text-before-edge \| middle \| central \| after-edge \| text-after-edge \| ideographic \| alphabetic \| hanging \| mathematical \| inherit |
+| 可变性   | Yes                                                                                                                                                                              |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty)                                                                                          |
+
+## 示例
+
+```plain
+
+
+
+    
+    
 
-    <!-- Anchors in action -->
-    <text alignment-baseline="hanging"
-          x="60" y="10">A hanging</text>
+    
+    A hanging
 
-    <text alignment-baseline="middle"
-          x="60" y="65">A middle</text>
+    A middle
 
-    <text alignment-baseline="baseline"
-          x="60" y="110">A baseline</text>
+    A baseline
 
-    <!-- Materialisation of anchors -->
-    <circle cx="60" cy="10" r="3" fill="red" />
-    <circle cx="60" cy="65" r="3" fill="red" />
-    <circle cx="60" cy="110" r="3" fill="red" />
+    
+    
+    
+    
 
-<style><![CDATA[
+
+
+```
 
-
    元素
    
+## 元素
 
-
    下列元素使用alignment-baseline 属性：
    
+下列元素使用`alignment-baseline 属性：`
 
-
      
- 
    • {{ SVGElement("tspan") }}
      • 
- 
    • {{ SVGElement("tref") }}
      • 
- 
    • {{ SVGElement("altGlyph") }}
      • 
- 
    • {{ SVGElement("textPath") }}
      • 
-
    
+- {{ SVGElement("tspan") }}
+- {{ SVGElement("tref") }}
+- {{ SVGElement("altGlyph") }}
+- {{ SVGElement("textPath") }}
 
-
    如果对象要在别的元素中对齐（比如在{{ SVGElement("text") }}元素中），请阅读{{ SVGAttr("dominant-baseline") }}。
    
+如果对象要在别的元素中对齐（比如在{{ SVGElement("text") }}元素中），请阅读{{ SVGAttr("dominant-baseline") }}。
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    参见
    
+## 参见
 
-
      
- 
    • {{ cssxref("alignment-baseline","CSS alignment-baseline") }}
      • 
-
    
+- {{ cssxref("alignment-baseline","CSS alignment-baseline") }}
diff --git a/files/zh-cn/web/svg/attribute/attributename/index.md b/files/zh-cn/web/svg/attribute/attributename/index.md
index 6d4e9e4158f97e..df8273dca3be71 100644
--- a/files/zh-cn/web/svg/attribute/attributename/index.md
+++ b/files/zh-cn/web/svg/attribute/attributename/index.md
@@ -7,60 +7,45 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/attributeName
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。
    
+该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画属性目标属性
    值<attributeName>
    可变性No
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 动画属性目标属性                                                                      |
+| -------- | ------------------------------------------------------------------------------------- |
+| 值       |                                                                        |
+| 可变性   | No                                                                                    |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute) |
 
-
    示例
    
+## 示例
 
-
    下面的示例使用了 y 作为attributeName，通过改变一个矩形在 Y 轴上的位置来变动这个矩形。
    
+下面的示例使用了 y 作为`attributeName`，通过改变一个矩形在 Y 轴上的位置来变动这个矩形。
 
-
    <?xml version="1.0"?>
-<svg width="250" height="250"
+```xml
+
+
+  
+    
+      dur="5s"/>
+  
+
+```
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用attributeName属性：
    
+下列元素可以使用`attributeName`属性：
 
-
      
- 
    • {{ SVGElement("animate") }}
      • 
- 
    • {{ SVGElement("animateColor") }}
      • 
- 
    • {{ SVGElement("animateTransform") }}
      • 
- 
    • {{ SVGElement("set") }}
      • 
-
    
+- {{ SVGElement("animate") }}
+- {{ SVGElement("animateColor") }}
+- {{ SVGElement("animateTransform") }}
+- {{ SVGElement("set") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/attributetype/index.md b/files/zh-cn/web/svg/attribute/attributetype/index.md
index c1b5ed6a098701..ae9d664e182ef3 100644
--- a/files/zh-cn/web/svg/attribute/attributetype/index.md
+++ b/files/zh-cn/web/svg/attribute/attributetype/index.md
@@ -7,58 +7,40 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/attributeType
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    该属性指定目标属性和它相对应的值处于哪个命名空间里。
    
+该属性指定目标属性和它相对应的值处于哪个命名空间里。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画属性目标属性
    值CSS | XML | auto
    可变性No
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 动画属性目标属性                                                                      |
+| -------- | ------------------------------------------------------------------------------------- |
+| 值       | CSS \| XML \| **auto**                                                                |
+| 可变性   | No                                                                                    |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute) |
 
-
    这个属性可取下列值之一：
    
+这个属性可取下列值之一：
 
-
    
- 
    CSS
    
- 
    指定{{ SVGAttr("attributeName") }}的值是一个 CSS 属性名。
    
- 
     
    
- 
    XML
    
- 
    指定{{ SVGAttr("attributeName") }}的值是一个 XML 属性名，在目标元素的默认 XML 命名空间里。
    
- 
    auto
    
- 
    编译器将把{{ SVGAttr("attributeName") }}匹配到目标元素的一个属性。用户代理先搜索 CSS 属性列表以找出一个匹配的属性名，如果找不到，再为这个元素搜索默认 XML 命名空间。
    
-
    
+- CSS
+  - : 指定{{ SVGAttr("attributeName") }}的值是一个 CSS 属性名。
+- XML
 
-
    示例
    
+  - : 指定{{ SVGAttr("attributeName") }}的值是一个 XML 属性名，在目标元素的默认 XML 命名空间里。
 
-
    元素
    
+- auto
+  - : 编译器将把{{ SVGAttr("attributeName") }}匹配到目标元素的一个属性。用户代理先搜索 CSS 属性列表以找出一个匹配的属性名，如果找不到，再为这个元素搜索默认 XML 命名空间。
 
-
    下列元素可以使用attributeType属性：
    
+## 示例
 
-
      
- 
    • {{ SVGElement("animate") }}
      • 
- 
    • {{ SVGElement("animateColor") }}
      • 
- 
    • {{ SVGElement("animateTransform") }}
      • 
- 
    • {{ SVGElement("set") }}
      • 
-
    
+## 元素
 
-
    规范
    
+下列元素可以使用`attributeType`属性：
+
+- {{ SVGElement("animate") }}
+- {{ SVGElement("animateColor") }}
+- {{ SVGElement("animateTransform") }}
+- {{ SVGElement("set") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/baseline-shift/index.md b/files/zh-cn/web/svg/attribute/baseline-shift/index.md
index 53bc8f8326324a..17c7ebefe8ad6a 100644
--- a/files/zh-cn/web/svg/attribute/baseline-shift/index.md
+++ b/files/zh-cn/web/svg/attribute/baseline-shift/index.md
@@ -7,67 +7,46 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/baseline-shift
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    属性baseline-shift允许相对于父文本内容元素的dominant-baseline重定位dominant-baseline。该切换对象必须是一个下标或上标。
    
+属性`baseline-shift`允许相对于父文本内容元素的`dominant-baseline`重定位`dominant-baseline`。该切换对象必须是一个下标或上标。
 
-
    作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请看{{ cssxref("baseline-shift","CSS baseline-shift") }}以了解更多信息。
    
+作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请看{{ cssxref("baseline-shift","CSS baseline-shift") }}以了解更多信息。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值auto | baseline | super | sub | <percentage> | <length> | inherit
    可变性Yes
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 外观属性                                                                                                   |
+| -------- | ---------------------------------------------------------------------------------------------------------- |
+| 值       | **auto** \| baseline \| super \| sub \|  \| [](/en/SVG/Content_type#Length) \| inherit |
+| 可变性   | Yes                                                                                                        |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty)                        |
 
-
    
- 
    baseline
    
- 
    没有基线切换，dominant-baseline依然在原来的位置。
    
- 
    sub
    
- 
    dominant-baseline切换到下标的默认位置。
    
- 
    super
    
- 
    dominant-baseline切换到上标的默认位置
    
- 
    <percentage>
    
- 
    该属性的结果值是这个百分数乘以 {{ SVGElement("text") }}元素的{{ SVGAttr("line-height") }}。如果是正值，dominant-baseline 向 shift 同方向移动结果值；如果是负值，dominant-baseline 向 shift 反方向移动结果值，相对于父文本内容元素。值“0%”等于”baseline“。
    
- 
    <length>
    
- 
    如果是正值，dominant-baseline 向 shift 同方向移动<length>距离；如果是负值，dominant-baseline 向 shift 反方向移动<length>距离。值”0cm“等于”baseline“。
    
-
    
+- baseline
+  - : 没有基线切换，`dominant-baseline`依然在原来的位置。
+- sub
+  - : `dominant-baseline`切换到下标的默认位置。
+- super
+  - : `dominant-baseline`切换到上标的默认位置
+- \
+  - : 该属性的结果值是这个百分数乘以 {{ SVGElement("text") }}元素的{{ SVGAttr("line-height") }}。如果是正值，dominant-baseline 向 shift 同方向移动结果值；如果是负值，dominant-baseline 向 shift 反方向移动结果值，相对于父文本内容元素。值“0%”等于”baseline“。
+- [\](/en/SVG/Content_type#Length)
+  - : 如果是正值，dominant-baseline 向 shift 同方向移动[\](/en/SVG/Content_type#Length)距离；如果是负值，dominant-baseline 向 shift 反方向移动[\](/en/SVG/Content_type#Length)距离。值”0cm“等于”baseline“。
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    下列这些元素可以使用 baseline-shift属性。
    
+`下列这些元素可以使用 baseline-shift`属性。
 
-
      
- 
    • {{ SVGElement("tspan") }}
      • 
- 
    • {{ SVGElement("tref") }}
      • 
- 
    • {{ SVGElement("altGlyph") }}
      • 
- 
    • {{ SVGElement("textPath") }}
      • 
-
    
+- {{ SVGElement("tspan") }}
+- {{ SVGElement("tref") }}
+- {{ SVGElement("altGlyph") }}
+- {{ SVGElement("textPath") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    参见
    
+## 参见
 
-
      
- 
    • {{ cssxref("baseline-shift","CSS baseline-shift") }}
      • 
-
    
+- {{ cssxref("baseline-shift","CSS baseline-shift") }}
diff --git a/files/zh-cn/web/svg/attribute/baseprofile/index.md b/files/zh-cn/web/svg/attribute/baseprofile/index.md
index 355532d6c1c639..72a8f981a99b9f 100644
--- a/files/zh-cn/web/svg/attribute/baseprofile/index.md
+++ b/files/zh-cn/web/svg/attribute/baseprofile/index.md
@@ -3,59 +3,42 @@ title: baseProfile
 slug: Web/SVG/Attribute/baseProfile
 translation_of: Web/SVG/Attribute/baseProfile
 ---
-
    « 返回 SVG 特性参考
    
-
-
    baseProfile 特性描述了作者认为正确渲染内容所需要的最小的 SVG 语言概述。这个特性不会说明任何处理限制，可以把它看作是元数据。 比如，这个特性的值可以被编辑工具用来在用户的修改超出所指定的基准概述范围时发出警告。
    
-
-
    每个 SVG 概述应该为这个特性定义一个适合的文本。如果没有指定这个特性，效果就跟指定 none 一样。
    
-
-
    使用背景
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    目录无
    值none | full| basic| tiny 
    动画特性无
    规范文档SVG 1.1 (第二版)
    
-
-
    
- 
    none
    
- 
    代表了最小的 SVG 语言配置，没有描述作者关于正确渲染内容的观点。
    
- 
    full
    
- 
    代表一个正常的概述，适用于 PC。
    
- 
    basic
    
- 
    代表一个轻量级的概述，适用于 PDA。
    
- 
    tiny 
    
- 
    代表更轻量的概述，适用于手机。
    
-
    
-
-
    例子
    
-
-
    <svg width="120" height="120" version="1.1"
- xmlns="http://www.w3.org/2000/svg" baseProfile="full">
+« 返回 SVG 特性参考
+
+`baseProfile` 特性描述了作者认为正确渲染内容所需要的最小的 SVG 语言概述。这个特性不会说明任何处理限制，可以把它看作是元数据。 比如，这个特性的值可以被编辑工具用来在用户的修改超出所指定的基准概述范围时发出警告。
+
+每个 SVG 概述应该为这个特性定义一个适合的文本。如果没有指定这个特性，效果就跟指定 `none` 一样。
+
+## 使用背景
+
+| 目录     | 无                                                                             |
+| -------- | ------------------------------------------------------------------------------ |
+| 值       | **none** \| full\| basic\| tiny                                                |
+| 动画特性 | 无                                                                             |
+| 规范文档 | [SVG 1.1 (第二版)](http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty) |
+
+- none
+  - : 代表了最小的 SVG 语言配置，没有描述作者关于正确渲染内容的观点。
+- full
+  - : 代表一个正常的概述，适用于 PC。
+- basic
+  - : 代表一个轻量级的概述，适用于 PDA。
+- tiny
+  - : 代表更轻量的概述，适用于手机。
+
+## 例子
+
+```html
+
 
   ...
 
-</svg>
    
+
+```
 
-
    元素
    
+## 元素
 
-
    以下元素会用到 baseProfile 特性
    
+以下元素会用到 `baseProfile` 特性
 
-
      
- 
    • {{ SVGElement("svg") }}
      • 
-
    
+- {{ SVGElement("svg") }}
diff --git a/files/zh-cn/web/svg/attribute/begin/index.md b/files/zh-cn/web/svg/attribute/begin/index.md
index dea534ccbabcf6..3670cd8098a4d3 100644
--- a/files/zh-cn/web/svg/attribute/begin/index.md
+++ b/files/zh-cn/web/svg/attribute/begin/index.md
@@ -8,82 +8,63 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/begin
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    这个属性定义了动画何时开始。
    
+这个属性定义了动画何时开始。
 
-
    这个属性值是一个分号分隔的数列值。SMIL 规范的"Evaluation of begin and end time lists"章节详细解释了开始时间数列。每个单独的值可以是下述之一：<offset-value>、<syncbase-value>、<event-value>、<repeat-value>、<accessKey-value>、<wallclock-sync-value>或者关键词indefinite。
    
+这个属性值是一个分号分隔的数列值。SMIL 规范的["Evaluation of begin and end time lists"](http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists)章节详细解释了开始时间数列。每个单独的值可以是下述之一：``、``、``、``、``、``或者关键词`indefinite`。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画定时属性
    值<begin-value-list>
    可变性No
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 动画定时属性                                                                  |
+| -------- | ----------------------------------------------------------------------------- |
+| 值       |                                                             |
+| 可变性   | No                                                                            |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#BeginAttribute) |
 
-
    <begin-value-list>中的每一个值可以是下述之一：
    
+``中的每一个值可以是下述之一：
 
-
    
- 
    <offset-value>
    
- 
    一个时钟值代表了一个相对于 SVG 文档开头的时间点，SVG 文档开头通常是指 load 事件或者 DOMReady 事件触发的时间点。负值是合法的。
    
- 
    <syncbase-value>
    
- 
    描述一个syncbase以及一个可选的来自于syncbase的时偏移。元素的动画开始时间被定义为相对于另一个动画的开头或者激活结束。一个 ID 及其后面跟着的 .begin 或 .end 构成了一个 syncbase，ID 引用到另一个动画元素，.begin 或 .end 用来确定到底是与引用的动画元素的动画开头同步、还是与引用的动画元素的动画激活结束同步。
    
- 
    <event-value>
    
- 
    描述了一个事件以及一个可选的时偏移，用来确定动画开始的时点。触发指定事件的时点，被定义为动画开始的时点。一个元素 ID 及其后面跟着的一个点及其后面跟着事件名构成了一个合法的 event-value 值。事件名必须是元素支持的事件名。全部合法的事件（不一定是所有元素都支持的事件）包括这些：focusin、focusout、activate、click、mousedown、mouseup、mouseover、mousemove、mouseout、DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsertedIntoDocument、DOMAttrModified、DOMCharacterDataModified、SVGLoad、SVGUnload、SVGAbort、SVGError、SVGResize、SVGScroll、SVGZoom、beginEvent、endEvent和repeatEvent。
    
- 
    <repeat-value>
    
- 
    描述了一个符合条件重复事件。repeat 事件发生了指定次数的时间点，被定义为元素动画的开始时间点。
    
- 
    <accessKey-value>
    
- 
    描述了一个用来触发动画的访问键。当用户按下指定的键时，元素动画就开始了。
    
- 
    <wallclock-sync-value>
    
- 
    描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守 ISO8601 定义的句法。
    
-
    
+- \
+  - : 一个[时钟值](/en/SVG/Content_type#Clock-value)代表了一个相对于 SVG 文档开头的时间点，SVG 文档开头通常是指 load 事件或者 DOMReady 事件触发的时间点。负值是合法的。
+- \
+  - : 描述一个*syncbase*以及一个可选的来自于*syncbase*的时偏移。元素的动画开始时间被定义为相对于另一个动画的开头或者激活结束。一个 ID 及其后面跟着的 .begin 或 .end 构成了一个 syncbase，ID 引用到另一个动画元素，.begin 或 .end 用来确定到底是与引用的动画元素的动画开头同步、还是与引用的动画元素的动画激活结束同步。
+- \
+  - : 描述了一个事件以及一个可选的时偏移，用来确定动画开始的时点。触发指定事件的时点，被定义为动画开始的时点。一个元素 ID 及其后面跟着的一个点及其后面跟着事件名构成了一个合法的 event-value 值。事件名必须是元素支持的事件名。全部合法的事件（不一定是所有元素都支持的事件）包括这些：focusin、focusout、`activate`、`click`、`mousedown`、`mouseup`、`mouseover`、`mousemove`、`mouseout`、`DOMSubtreeModified`、`DOMNodeInserted`、`DOMNodeRemoved`、`DOMNodeRemovedFromDocument`、`DOMNodeInsertedIntoDocument`、`DOMAttrModified`、`DOMCharacterDataModified`、`SVGLoad`、`SVGUnload`、`SVGAbort`、`SVGError`、`SVGResize`、`SVGScroll`、`SVGZoom`、`beginEvent`、`endEvent`和`repeatEvent。`
+- \
+  - : 描述了一个符合条件重复事件。repeat 事件发生了指定次数的时间点，被定义为元素动画的开始时间点。
+- \
+  - : 描述了一个用来触发动画的访问键。当用户按下指定的键时，元素动画就开始了。
+- \
+  - : 描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守 ISO8601 定义的句法。
 
-
    示例
    
+## 示例
 
-
    Offset 示例
    
+### Offset 示例
 
-
    » begin-1-offset.svg
    
+» [begin-1-offset.svg](https://developer.mozilla.org/files/3290/begin-1-offset.svg)
 
-
    Syncbase 示例
    
+### Syncbase 示例
 
-
    » begin-2-syncbase.svg
    
+» [begin-2-syncbase.svg](https://developer.mozilla.org/files/3291/begin-2-syncbase.svg)
 
-
    Event 示例
    
+### Event 示例
 
-
    » begin-3-event.svg
    
+» [begin-3-event.svg](https://developer.mozilla.org/files/3292/begin-3-event.svg)
 
-
    Repeat 示例
    
+### Repeat 示例
 
-
    » begin-4-repeat.svg
    
+» [begin-4-repeat.svg](https://developer.mozilla.org/files/3293/begin-4-repeat.svg)
 
-
    Accesskey 示例
    
+### Accesskey 示例
 
-
    » begin-5-accesskey.svg
    
+» [begin-5-accesskey.svg](https://developer.mozilla.org/files/3294/begin-5-accesskey.svg)
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用begin属性：
    
+下列元素可以使用`begin`属性：
 
-
+- [动画元素](/en/SVG/Element#Animation) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/calcmode/index.md b/files/zh-cn/web/svg/attribute/calcmode/index.md
index 10f13a6e194640..f7fa85b6bd0a14 100644
--- a/files/zh-cn/web/svg/attribute/calcmode/index.md
+++ b/files/zh-cn/web/svg/attribute/calcmode/index.md
@@ -3,19 +3,38 @@ title: calcMode
 slug: Web/SVG/Attribute/calcMode
 translation_of: Web/SVG/Attribute/calcMode
 ---
-
    « SVG Attribute reference home
    
-
    This attribute specifies the interpolation mode for the animation. The default mode is linear, however if the attribute does not support linear interpolation (e.g. for strings), the calcMode attribute is ignored and discrete interpolation is used.
    
-
    Usage context
    
-
-
      
     Categories Animation value attribute 
     
     Value discrete | linear | paced | spline 
     
     Animatable No 
     
     Normative document SVG 1.1 (2nd Edition) 
     
    
-
     
    discrete
     
    This specifies that the animation function will jump from one value to the next without any interpolation.
     
    linear
     
    Simple linear interpolation between values is used to calculate the animation function. Except for {{ SVGElement("animateMotion") }}, this is the default value.
     
    paced
     
    Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any {{ SVGAttr("keyTimes") }} or {{ SVGAttr("keySplines") }} will be ignored. For {{ SVGElement("animateMotion") }}, this is the default value.
     
    spline
     
    Interpolates from one value in the {{ SVGAttr("values") }} list to the next according to a time function defined by a cubic Bézier spline. The points of the spline are defined in the {{ SVGAttr("keyTimes") }} attribute, and the control points for each interval are defined in the {{ SVGAttr("keySplines") }} attribute.
    
-
    
-
    Example
    
-
    Elements
    
-
    The following elements can use the calcMode attribute
    
-
       
    • {{ SVGElement("animate") }}
      •  
    • {{ SVGElement("animateColor") }}
      •  
    • {{ SVGElement("animateMotion") }}
      •  
    • {{ SVGElement("animateTransform") }}
      • 
-
    
-
-
    规范
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
+
+This attribute specifies the interpolation mode for the animation. The default mode is **linear**, however if the attribute does not support linear interpolation (e.g. for strings), the `calcMode` attribute is ignored and discrete interpolation is used.
+
+## Usage context
+
+| Categories         | Animation value attribute                                                        |
+| ------------------ | -------------------------------------------------------------------------------- |
+| Value              | discrete \| linear \| paced \| spline                                            |
+| Animatable         | No                                                                               |
+| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute) |
+
+- discrete
+  - : This specifies that the animation function will jump from one value to the next without any interpolation.
+- linear
+  - : Simple linear interpolation between values is used to calculate the animation function. Except for {{ SVGElement("animateMotion") }}, this is the default value.
+- paced
+  - : Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any {{ SVGAttr("keyTimes") }} or {{ SVGAttr("keySplines") }} will be ignored. For {{ SVGElement("animateMotion") }}, this is the default value.
+- spline
+  - : Interpolates from one value in the {{ SVGAttr("values") }} list to the next according to a time function defined by a cubic Bézier spline. The points of the spline are defined in the {{ SVGAttr("keyTimes") }} attribute, and the control points for each interval are defined in the {{ SVGAttr("keySplines") }} attribute.
+
+## Example
+
+## Elements
+
+The following elements can use the `calcMode` attribute
+
+- {{ SVGElement("animate") }}
+- {{ SVGElement("animateColor") }}
+- {{ SVGElement("animateMotion") }}
+- {{ SVGElement("animateTransform") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/clip-path/index.md b/files/zh-cn/web/svg/attribute/clip-path/index.md
index b239d0d2947925..30a63c789cfb59 100644
--- a/files/zh-cn/web/svg/attribute/clip-path/index.md
+++ b/files/zh-cn/web/svg/attribute/clip-path/index.md
@@ -6,82 +6,70 @@ tags:
   - SVG 属性
 translation_of: Web/SVG/Attribute/clip-path
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    元素的表现属性 clip-path 为其定义或关联一条剪切路径。
    
+元素的表现属性 **`clip-path`** 为其定义或关联一条剪切路径。
 
-
    注意：clip-path 是一个表现属性，可以作为 CSS 属性使用。
    
+**注意：**`clip-path` 是一个表现属性，可以作为 CSS 属性使用。
 
-
    作为一种表现属性，clip-path 可以用于任何元素，不过效果最明显的是下列十九种元素：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}
    
+作为一种表现属性，`clip-path` 可以用于任何元素，不过效果最明显的是下列十九种元素：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}
 
-
    示例
    
+## 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
-    <circle cx=".5" cy=".5" r=".5" />
-  </clipPath>
+```html
+
+  
+    
+  
 
-  <!-- 左上：应用自定义的剪切路径 -->
-  <rect x="1" y="1" width="8" height="8" stroke="green"
-        clip-path="url(#myClip)" />
+  
+  
 
-  <!-- 右上：应用 CSS 基本形状和 fill-box 几何。
+  
+  
 
-  <!-- 左下 -->
-  <rect x="1" y="11" width="8" height="8" stroke="green"
-        clip-path="circle() stroke-box" />
+  
+  
 
-  <!-- 右下：应用 CSS 基本形状和 view-box 几何。
+  
+  
+
+```
+
+{{EmbedLiveSample('示例', '100%', 200)}}
+
+## Usage notes
+
+| 值         | {{cssxref('url')}} \| [ {{cssxref('basic-shape')}} \|\| `` ] \| `none` |
+| ---------- | ---------------------------------------------------------------------------------------------------- |
+| 默认值     | `none`                                                                                               |
+| Animatable | 是                                                                                                   |
+
+- \
+  - : geometry-box 是应用 {{cssxref('basic-shape')}} 的额外信息，用于区分 CSS 基本形状如何应用于元素上：`fill-box` 表示将对象的包围框作为参照框；`stroke-box` 表示将对象的包围框加上描边的范围作为参照框；`view-box` 表示使用最近的 SVG 视窗作为参照框。
+
+**注意：**clip-path 语法的更多细节可参考 CSS 属性 {{cssxref('clip-path')}} 的参考页面。
+
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    See also
    
+## See also
 
-
      
- 
    • The CSS {{cssxref("clip-path")}} property
      • 
-
    
+- The CSS {{cssxref("clip-path")}} property
diff --git a/files/zh-cn/web/svg/attribute/clip/index.md b/files/zh-cn/web/svg/attribute/clip/index.md
index c9aa43d7fa44bf..f2ae4433db1d6f 100644
--- a/files/zh-cn/web/svg/attribute/clip/index.md
+++ b/files/zh-cn/web/svg/attribute/clip/index.md
@@ -6,63 +6,55 @@ tags:
   - SVG 属性
 translation_of: Web/SVG/Attribute/clip
 ---
-
    {{SVGRef}}{{deprecated_header}}
    
+{{SVGRef}}{{deprecated_header}}
 
-
    clip 属性是定义元素可见区域的属性。
    
+**`clip`** 属性是定义元素可见区域的属性。
 
-
    clip 属性的参数值与 {{ cssxref("clip","CSS clip property") }} 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 <shape> 的坐标值上。auto 值定义了一个剪切路径，其边界沿着由给定元素创建的视口的边界。
    
+`clip` 属性的参数值与 {{ cssxref("clip","CSS clip property") }} 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 `` 的坐标值上。`auto` 值定义了一个剪切路径，其边界沿着由给定元素创建的视口的边界。
 
-
    As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, {{ SVGElement("image") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("pattern") }}, {{ SVGElement("marker") }}
    
+As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, {{ SVGElement("image") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("pattern") }}, {{ SVGElement("marker") }}
 
-
    示例
    
+## 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
-  <!-- Auto clipping -->
-  <svg x="0" width="10" height="10"
-       clip="auto">
-    <circle cx="5" cy="5" r="4" stroke="green" />
-  </svg>
+```html
+
+  
+  
+    
+  
 
-  <!-- Rect(top, right, bottom, left) clipping -->
-  <svg x="10" width="10" height="10"
-       clip="rect(1, 9, 8, 2)">
-    <circle cx="5" cy="5" r="4" stroke="green" />
-  </svg>
-</svg>
    
+  
+  
+    
+  
+
+```
 
-
    {{EmbedLiveSample('示例', '100%', 150)}}
    
+{{EmbedLiveSample('示例', '100%', 150)}}
 
-
    用法
    
+## 用法
 
-
    Warning: This property is deprecated. Use {{cssxref("clip-path")}} instead.
    
+**Warning:** This property is deprecated. Use {{cssxref("clip-path")}} instead.
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    可用值auto | <shape> | inherit
    默认值Yes
    AnimatableYes
    
+| 可用值     | **auto** \|  \| inherit |
+| ---------- | ------------------------------ |
+| 默认值     | Yes                            |
+| Animatable | Yes                            |
 
-
    The value auto defines a clipping path along the bounds of the viewport created by the given element.
    
+The value `auto` defines a clipping path along the bounds of the viewport created by the given element.
 
-
    The value rect() defines a clipping rectangle following the following syntax: rect(<top>, <right>, <bottom>, <left>). The <top> and <bottom> values specify offsets from the top border edge of the element viewport, while <right> and <left> specify offsets from the left border edge of the element viewport.
    
+The value `rect()` defines a clipping rectangle following the following syntax: `rect(, , , )`. The `` and `` values specify offsets from the _top border edge_ of the element viewport, while `` and `` specify offsets from the _left border edge_ of the element viewport.
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/color/index.md b/files/zh-cn/web/svg/attribute/color/index.md
index 5b2000c29cb0f6..c4f8979e32aa17 100644
--- a/files/zh-cn/web/svg/attribute/color/index.md
+++ b/files/zh-cn/web/svg/attribute/color/index.md
@@ -6,60 +6,47 @@ tags:
   - SVG 属性
 translation_of: Web/SVG/Attribute/color
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    color 属性用来为 {{ SVGAttr("fill") }} 属性、{{ SVGAttr("stroke") }} 属性、{{ SvgAttr("stop-color") }} 属性、{{ SVGAttr("flood-color") }} 属性和 {{ SVGAttr("lighting-color") }} 属性提供一个潜在的间接值（currentColor）。
    
+`color` 属性用来为 {{ SVGAttr("fill") }} 属性、{{ SVGAttr("stroke") }} 属性、{{ SvgAttr("stop-color") }} 属性、{{ SVGAttr("flood-color") }} 属性和 {{ SVGAttr("lighting-color") }} 属性提供一个潜在的间接值（`currentColor`）。
 
-
    作为一个外观属性，它还可以直接用作 CSS 样式表的属性。请阅读 {{ cssxref("color","CSS color") }} 以了解更多信息。
    
+作为一个外观属性，它还可以直接用作 CSS 样式表的属性。请阅读 {{ cssxref("color","CSS color") }} 以了解更多信息。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<color> | inherit
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 外观属性                                                                     |
+| -------- | ---------------------------------------------------------------------------- |
+| 值       | [](/en/SVG/Content_type#Color) \| inherit                             |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/color.html#ColorProperty) |
 
-
    示例
    
+## 示例
 
-
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <g color="green">
-    <rect width="50" height="50" fill="currentColor" />
-    <circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" />
-  </g>
-</svg>
-
    
+```html
+
+  
+    
+    
+  
+
+```
 
-
    {{ EmbedLiveSample('Example', '100%', '110') }}
    
+{{ EmbedLiveSample('Example', '100%', '110') }}
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用color属性：
    
+下列元素可以使用`color`属性：
 
-
      
- 
    • 文本内容元素 »
      • 
- 
    • 形状元素 »
      • 
- 
    • {{ SVGElement("stop") }}
      • 
- 
    • {{ SVGElement("feFlood") }}
      • 
- 
    • {{ SVGElement("feDiffuseLighting") }}
      • 
- 
    • {{ SVGElement("feSpecularLighting") }}
      • 
-
    
+- [文本内容元素](/en/SVG/Element#Text_content_elements) »
+- [形状元素](/en/SVG/Element#Shape_elements) »
+- {{ SVGElement("stop") }}
+- {{ SVGElement("feFlood") }}
+- {{ SVGElement("feDiffuseLighting") }}
+- {{ SVGElement("feSpecularLighting") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/cx/index.md b/files/zh-cn/web/svg/attribute/cx/index.md
index 8e31f398df6c75..335d85eeefb0ea 100644
--- a/files/zh-cn/web/svg/attribute/cx/index.md
+++ b/files/zh-cn/web/svg/attribute/cx/index.md
@@ -6,128 +6,100 @@ tags:
   - 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('示例', 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('径向渐变', 150, '100%')}}
    
-
-
    规范
    
+{{SVGRef}}
+
+**`cx`** 属性定义一个中心点的 x 轴坐标。
+
+有三个元素在使用此属性：{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, 和 {{SVGElement("radialGradient")}}
+
+## 示例
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+    
+    
+  
+
+  
+  
+  
+
+```
+
+{{EmbedLiveSample('示例', 100, 100)}}
+
+## 圆
+
+对于 {{SVGElement('circle')}}，`cx` 用来定义图形中心的 x 轴坐标。
+
+| 值     | **[](/docs/Web/SVG/Content_type#Length)** \| **[](/docs/Web/SVG/Content_type#Percentage)** |
+| ------ | -------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                            |
+| 可变性 | Yes                                                                                                            |
+
+注：起始于 SVG2 `cx`，是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
+
+## 椭圆
+
+对于 {{SVGElement('ellipse')}}，`cx` 用来定义图形中心的 x 轴坐标。
+
+| 值     | **[](/docs/Web/SVG/Content_type#Length)** \| **[](/docs/Web/SVG/Content_type#Percentage)** |
+| ------ | -------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                            |
+| 可变性 | Yes                                                                                                            |
+
+**注：** 起始于 SVG2 `cx`，是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。
+
+## 径向渐变
+
+对于 {{SVGElement('radialGradient')}}, `cx` 用来定义径向渐变终止圆的 x 轴坐标。
+
+| 值     | **[](/docs/Web/SVG/Content_type#Length)** |
+| ------ | ------------------------------------------------- |
+| 默认值 | `50%`                                             |
+| 可变性 | Yes                                               |
+
+#### 示例
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+    
+      
+      
+      
+    
+
+    
+      
+      
+      
+    
+
+    
+      
+      
+      
+    
+  
+
+  
+  
+  
+
+```
+
+{{EmbedLiveSample('径向渐变', 150, '100%')}}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/cy/index.md b/files/zh-cn/web/svg/attribute/cy/index.md
index f0e0c0eb8f75ee..bf4df2455133df 100644
--- a/files/zh-cn/web/svg/attribute/cy/index.md
+++ b/files/zh-cn/web/svg/attribute/cy/index.md
@@ -6,128 +6,100 @@ tags:
   - SVG 属性
 translation_of: Web/SVG/Attribute/cy
 ---
-
    {{SVGRef}}
    
-
-
    cy 属性定义一个中心点的 y 轴坐标。
    
-
-
    有三个元素在使用此属性：{{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('示例', '100%', 300)}}
    
-
-
    圆
    
-
-
    对于 {{SVGElement('circle')}}，cy 用来定义图形中心的 y 轴坐标。
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值<length> | <percentage>
    默认值0
    可变性Yes
    
-
-
    注：起始于 SVG2，cy 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
    
-
-
    椭圆
    
-
-
    对于 {{SVGElement('ellipse')}}，cy 用来定义图形中心的 y 轴坐标。
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值<length> | <percentage>
    默认值0
    可变性Yes
    
-
-
    注：起始于 SVG2，cy 是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。
    
-
-
    径向渐变
    
-
-
    对于 {{SVGElement('radialGradient')}}，cy 用来定义径向渐变终止圆的 y 轴坐标。
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值<length>
    默认值50%
    可变性Yes
    
-
-
    示例
    
-
-
-
-
    <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('径向渐变', 150, '100%')}}
    
-
-
    规范
    
+{{SVGRef}}
+
+**`cy`** 属性定义一个中心点的 y 轴坐标。
+
+有三个元素在使用此属性：{{SVGElement("circle")}}，{{SVGElement("ellipse")}} 和 {{SVGElement("radialGradient")}}
+
+## 示例
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+    
+    
+  
+
+  
+  
+  
+
+```
+
+{{EmbedLiveSample('示例', '100%', 300)}}
+
+## 圆
+
+对于 {{SVGElement('circle')}}，`cy` 用来定义图形中心的 y 轴坐标。
+
+| 值     | **[](/docs/Web/SVG/Content_type#Length)** \| **[](/docs/Web/SVG/Content_type#Percentage)** |
+| ------ | -------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                            |
+| 可变性 | Yes                                                                                                            |
+
+**注：**起始于 SVG2，`cy` 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
+
+## 椭圆
+
+对于 {{SVGElement('ellipse')}}，`cy` 用来定义图形中心的 y 轴坐标。
+
+| 值     | **[](/docs/Web/SVG/Content_type#Length)** \| **[](/docs/Web/SVG/Content_type#Percentage)** |
+| ------ | -------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                            |
+| 可变性 | Yes                                                                                                            |
+
+**注：**起始于 SVG2，`cy` 是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。
+
+## 径向渐变
+
+对于 {{SVGElement('radialGradient')}}，`cy` 用来定义径向渐变终止圆的 y 轴坐标。
+
+| 值     | **[](/docs/Web/SVG/Content_type#Length)** |
+| ------ | ------------------------------------------------- |
+| 默认值 | `50%`                                             |
+| 可变性 | Yes                                               |
+
+#### 示例
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+    
+      
+      
+      
+    
+
+    
+      
+      
+      
+    
+
+    
+      
+      
+      
+    
+  
+
+  
+  
+  
+
+```
+
+{{EmbedLiveSample('径向渐变', 150, '100%')}}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/d/index.md b/files/zh-cn/web/svg/attribute/d/index.md
index 4f14cfd67b319e..934ff0964ad284 100644
--- a/files/zh-cn/web/svg/attribute/d/index.md
+++ b/files/zh-cn/web/svg/attribute/d/index.md
@@ -7,196 +7,158 @@ tags:
   - 参考
 translation_of: Web/SVG/Attribute/d
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/zh-CN/docs/Web/SVG/Attribute)
 
-
    该属性定义了一个路径。
    
+该属性定义了一个路径。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别路径定义属性
    值 
    可变性Yes
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 路径定义属性                                                                |
+| -------- | --------------------------------------------------------------------------- |
+| 值       |                                                                             |
+| 可变性   | Yes                                                                         |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#DurAttribute) |
 
-
    属性d实际上是一个字符串，包含了一系列路径描述。这些路径由下面这些指令组成：
    
+属性`d`实际上是一个字符串，包含了一系列路径描述。这些路径由下面这些指令组成：
 
-
      
- 
    • Moveto
      • 
- 
    • Lineto
      • 
- 
    • Curveto
      • 
- 
    • Arcto
      • 
- 
    • ClosePath
      • 
-
    
+- Moveto
+- Lineto
+- Curveto
+- Arcto
+- ClosePath
 
-
    这些组合在一个字符串中。这些不同的命令是大小写敏感的；一个大写的命令指明它的参数是绝对位置，而小写的命令指明相对于当前位置的点。可以指定一个负数值作为命令的参数：负角度将是逆时针的，绝对 x 和 y 位置将视为负坐标。负相对 x 值将会往左移，而负相对 y 值将会向上移。
    
+这些组合在一个字符串中。这些不同的命令是大小写敏感的；一个大写的命令指明它的参数是绝对位置，而小写的命令指明相对于当前位置的点。可以指定一个负数值作为命令的参数：负角度将是逆时针的，绝对 x 和 y 位置将视为负坐标。负相对 x 值将会往左移，而负相对 y 值将会向上移。
 
-
    Moveto
    
+## Moveto
 
-
    Moveto指令可以被想象成拎起绘图笔，落脚到另一处。在上一个点和这个指定点之间没有线段绘制。用一个 Moveto 命令开始一个路径是好的作法，因为如果没有一个初始化的 Moveto，执行命令时开始点会是上一个操作发生过的地方，这样可能造成不确定的行为。
    
+`Moveto`指令可以被想象成拎起绘图笔，落脚到另一处。在上一个点和这个指定点之间没有线段绘制。用一个 Moveto 命令开始一个路径是好的作法，因为如果没有一个初始化的 Moveto，执行命令时开始点会是上一个操作发生过的地方，这样可能造成不确定的行为。
 
-
    句法：
    
+句法：
 
-
      
- 
    • M x,y 在这里 x 和 y 是绝对坐标，分别代表水平坐标和垂直坐标。
      • 
- 
    • m dx,dy 在这里 dx 和 dy 是相对于当前点的距离，分别是向右和向下的距离。
      • 
-
    
-
-
    示例：
    
-
-
      
- 
    • 位于绝对位置 x=50, y= 100：<path d="M50,100..." />
      • 
- 
    • 往右移 50，往下移 100：<path d="m50,100..." />
      • 
-
    
-
-
    Lineto
    
-
-
    和Moveto指令不同，Lineto指令将绘制一条直线段。这个直线段从当前位置移到指定位置。原生的Lineto命令的句法是”L x, y“或者”l dx, dy“，在这里 x 和 y 是绝对坐标，而 dx 和 dy 分别是向右和向下的距离。还有字母 H 和 V，分别指定水平和垂直移动。它们的句法与 L 相同，它的小写版本是相对距离，大写版本是绝对位置。
    
-
-
    Curveto
    
-
-
    Curvto 命令指定了一个贝塞尔曲线。有两种类型的贝塞尔曲线：立方曲线和二次方曲线。二次方贝塞尔曲线是一种特殊的立方贝塞尔曲线，在这里，控制点的两端是相同的。二次方贝塞尔曲线的句法是”Q cx, cy  x, y“或”q dcx, dcy dx, dy“。cx 和 cy 都是控制点的绝对坐标，而 dcx 和 dcy 分别是控制点在 x 和 y 方向上的距离。
    
-
-
    
-
    立方贝赛尔曲线遵守二次方贝赛尔曲线同样的概念，但是它需要考虑两个控制点。立方贝塞尔曲线的句法是：”C c1x,c1y c2x,c2y x,y“或者”c dc1x,dc1y dc2x,dc2y dx,dy“，在这里，c1x、c1y 和 c2x、c2y 是分别是初始点和结束点的控制点的绝对坐标。dc1x、dc1y 和 dc2x、dc2y 都是相对于初始点，而不是相对于结束点的。dx 和 dy 分别是向右和向下的距离。
    
-
-
    为了连缀平滑的贝塞尔曲线，还可以使用 T 和 S 命令。它们的语法比别的 Curveto 命令简单，因为它假定第一个控制点是从前一个控制点关于前一个点的反射，或者说如果没有前一个控制点的话它实际上就是前一个点。T 的句法是”T x,y“或者”t dx,dy“，分别对应于绝对坐标和相对距离，用来创建二次方贝塞尔曲线。S 用来创建立方贝塞尔曲线，语法是”S cx,cy x,y“或者”s dcx,dcy dx,dy“，在这里 (d)cx 指定第二个控制点。
    
-
-
    最后，所有的贝塞尔曲线命令可以制作出一个多边贝塞尔图形，先初始化命令，然后多次指定所有的参数，就可以制作出一个多边贝赛尔图形。因此，下面的两个命令可以创建完全相同的路径：
    
-
-
    <path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" />
-<path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" />
    
-
-
    Arcto
    
-
-
    有时候描述一个椭圆弧曲线路径要比描述一个贝塞尔曲线路径更简单。说到底，path 元素支持 Arcto 命令。圆弧的中心由别的变量计算出。一个 arcto 的声明相对而言有点复 Visual Studio：”A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y“。解构它，rx 和 ry 分别是 x 和 y 方向的半径，而 LargeArcFlag 的值要到是 0 要么是 1，用来确定是要画小弧（0）还是画大弧（1）。SweepFlag 也要么是 0 要么是 1，用来确定弧是顺时针方向（1）还是逆时针方向（0）。x 和 y 是目的地的坐标。虽然 xAxisRotate 支持改变 x 轴相对于当前引用框架的方向，但是在 Gecko 7 中，这个参数看起来没什么效果。
    
-
-
    ClosePath
    
-
-
    ClosePath 命令将在当前路径从，从当前点到第一个点简单画一条直线。它是最简单的命令，而且不带有任何参数。它沿着到开始点的最短的线性路径，如果别的路径落在这路上，将可能路径相交。句法是”Z“或”z“，两种写法作用都一样。
    
-
    
-
-
    元素
    
-
-
    以下元素可以使用d属性：
    
-
-
      
- 
    • {{SVGElement("path")}} »
      • 
- 
    • {{SVGElement("glyph")}} »
      • 
-
    
-
-
    同样的规则可以应用到{{SVGElement("animate")}}动画路径上。
    
-
-
    提醒
    
-
-
    原点（坐标系 0,0 点）经常是上下文的左上角。然而{{SVGElement("glyph")}}元素的原点在它的字母框的左下角。
    
-
-
    在任何两个数字之间允许加一个逗号，但是在别的地方不允许加逗号。
    
-
-
    示例
    
-
-
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-    	 viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
-    <path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
-</svg>
    
-
-
    为了演示d="M37,17v15H14V17H37z M50,0H0v50h50V0z"的实际意义，我们来讨论这个字符串的每一小段。
    
-
-
    enter image description here
    
-
-
      
- 
    • d=" M37,17 || v15 || H14 || V17 || H37 ||z // M50,0 || H0 || v50 || h50 || V0 || z"
      • 
- 
    • d=
-  
        
-   
      • 这个属性包含了构成整个 SVG 的字符串。
        • 
-  
      
- 
      • 
- 
    • M37,17
-  
        
-   
      • M 是 MoveTo 的缩写。大写的“M”意味着绝对坐标，小写的“m”意味着相对距离。它暗含着是基于开始坐标，线在框里面，而且你在方框内矩形的右上角开始。
        • 
-   
      • 37 是开始 svg 位置的缩写，在 X 轴坐标 37 像素处。
        • 
-   
      • 17 开始 svg 位置，在 y 轴的 17 像素处。
        • 
-  
      
- 
      • 
- 
    • v15
-  
        
-   
      • v 代表垂直。大写的 V 意味着绝对坐标，小写的 v 表示相对的长度、距离。dx/dy 和 x/y 可以用在 H/V 和 h/v 相应的位置里。
        • 
-   
      • 这里是表示相对于给定坐标画一条 15 像素的垂直线。它意味着你向下画 15 像素，到坐标 37,32。
        • 
-  
      
- 
      • 
- 
    • H14
-  
        
-   
      • H 代表水平，它是绝对坐标，因为它是大写的。
        • 
-   
      • 从 v15 的终点开始，画一条水平线直到到达绝对坐标 14，当到达 x 坐标 14 时结束画线。笔触位于坐标 14,32。
        • 
-  
      
- 
      • 
- 
    • V17
-  
        
-   
      • 就像前面那样，从上一条线的终点开始，画一条垂直线，直到到达 y 轴坐标 17。笔触位于坐标 14,17。
        • 
-  
      
- 
      • 
- 
    • H37
-  
        
-   
      • 最后，从 14,17 开始，画一条水平线，直到到达 x 轴坐标 37。笔触位于坐标 37,17（M 的值）
        • 
-  
      
- 
      • 
- 
    • z
-  
        
-   
      • 小写的 z 和大写的 Z 都是闭合一系列 svg 线段。
        • 
-  
      
- 
      • 
- 
    • ,
-  
        
-   
      • 逗号开始下一串简单矢量图形线段。下一系列简单矢量线段将制作外层方框。
        • 
-  
      
- 
      • 
- 
    • M50,0
-  
        
-   
      • 在 x 轴 50 和 y 轴 0 处开始。
        • 
-  
      
- 
      • 
- 
    • H0
-  
        
-   
      • 画一条直线直到 (0,0)。
        • 
-  
      
- 
      • 
- 
    • v50
-  
        
-   
      • 相对于 0,0 画一条 50 像素的垂直线。这条线将画到 (0,50)。
        • 
-  
      
- 
      • 
- 
    • h50
-  
        
-   
      • 相对于 (0,-50) 画一条 50 像素的水平线。这条线将向右画到 (50,50)。
        • 
-  
      
- 
      • 
- 
    • V0
-  
        
-   
      • 画一条垂直线直到到达 y 轴坐标 0。这将画线到 (50,0)，即 M 的值。
        • 
-  
      
- 
      • 
- 
    • z
-  
        
-   
      • 小写的 z 和大写的 Z 都是闭合一系列 svg 线段。
        • 
-  
      
- 
      • 
-
    
-
-
    规范
    
+- `M x,y` 在这里 x 和 y 是绝对坐标，分别代表水平坐标和垂直坐标。
+- `m dx,dy` 在这里 dx 和 dy 是相对于当前点的距离，分别是向右和向下的距离。
+
+示例：
+
+- 位于绝对位置 x=50, y= 100：``
+- 往右移 50，往下移 100：``
+
+## Lineto
+
+和`Moveto`指令不同，`Lineto`指令将绘制一条直线段。这个直线段从当前位置移到指定位置。原生的`Lineto`命令的句法是”L x, y“或者”l dx, dy“，在这里 x 和 y 是绝对坐标，而 dx 和 dy 分别是向右和向下的距离。还有字母 H 和 V，分别指定水平和垂直移动。它们的句法与 L 相同，它的小写版本是相对距离，大写版本是绝对位置。
+
+## Curveto
+
+Curvto 命令指定了一个[贝塞尔曲线](/User:Jt//Sandbox/Curves_in_Paths)。有两种类型的贝塞尔曲线：立方曲线和二次方曲线。二次方贝塞尔曲线是一种特殊的立方贝塞尔曲线，在这里，控制点的两端是相同的。二次方贝塞尔曲线的句法是”Q cx, cy x, y“或”q dcx, dcy dx, dy“。cx 和 cy 都是控制点的绝对坐标，而 dcx 和 dcy 分别是控制点在 x 和 y 方向上的距离。
+
+立方贝赛尔曲线遵守二次方贝赛尔曲线同样的概念，但是它需要考虑两个控制点。立方贝塞尔曲线的句法是：”C c1x,c1y c2x,c2y x,y“或者”c dc1x,dc1y dc2x,dc2y dx,dy“，在这里，c1x、c1y 和 c2x、c2y 是分别是初始点和结束点的控制点的绝对坐标。dc1x、dc1y 和 dc2x、dc2y 都是相对于初始点，而不是相对于结束点的。dx 和 dy 分别是向右和向下的距离。
+
+为了连缀平滑的贝塞尔曲线，还可以使用 T 和 S 命令。它们的语法比别的 Curveto 命令简单，因为它假定第一个控制点是从前一个控制点关于前一个点的反射，或者说如果没有前一个控制点的话它实际上就是前一个点。T 的句法是”T x,y“或者”t dx,dy“，分别对应于绝对坐标和相对距离，用来创建二次方贝塞尔曲线。S 用来创建立方贝塞尔曲线，语法是”S cx,cy x,y“或者”s dcx,dcy dx,dy“，在这里 (d)cx 指定第二个控制点。
+
+最后，所有的贝塞尔曲线命令可以制作出一个多边贝塞尔图形，先初始化命令，然后多次指定所有的参数，就可以制作出一个多边贝赛尔图形。因此，下面的两个命令可以创建完全相同的路径：
+
+```svg
+
+
+```
+
+## Arcto
+
+有时候描述一个椭圆弧曲线路径要比描述一个贝塞尔曲线路径更简单。说到底，path 元素支持 Arcto 命令。圆弧的中心由别的变量计算出。一个 arcto 的声明相对而言有点复 Visual Studio：”A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y“。解构它，rx 和 ry 分别是 x 和 y 方向的半径，而 LargeArcFlag 的值要到是 0 要么是 1，用来确定是要画小弧（0）还是画大弧（1）。SweepFlag 也要么是 0 要么是 1，用来确定弧是顺时针方向（1）还是逆时针方向（0）。x 和 y 是目的地的坐标。虽然 xAxisRotate 支持改变 x 轴相对于当前引用框架的方向，但是在 Gecko 7 中，这个参数看起来没什么效果。
+
+## ClosePath
+
+ClosePath 命令将在当前路径从，从当前点到第一个点简单画一条直线。它是最简单的命令，而且不带有任何参数。它沿着到开始点的最短的线性路径，如果别的路径落在这路上，将可能路径相交。句法是”Z“或”z“，两种写法作用都一样。
+
+## 元素
+
+以下元素可以使用`d`属性：
+
+- {{SVGElement("path")}} »
+- {{SVGElement("glyph")}} »
+
+同样的规则可以应用到{{SVGElement("animate")}}动画路径上。
+
+## 提醒
+
+原点（坐标系 0,0 点）经常是上下文的**左上角**。然而{{SVGElement("glyph")}}元素的原点在它的字母框的**左下角**。
+
+在任何两个数字之间允许加一个逗号，但是在别的地方不允许加逗号。
+
+## 示例
+
+```plain
+
+    
+
+```
+
+为了演示`d="M37,17v15H14V17H37z M50,0H0v50h50V0z"的实际意义，我们来讨论这个字符串的每一小段。`
+
+![enter image description here](http://img3.douban.com/view/photo/large/public/p2316231190.jpg)
+
+- `d=" M37,17 || v15 || H14 || V17 || H37 ||z // M50,0 || H0 || v50 || h50 || V0 || z"`
+- `d=`
+
+  - 这个属性包含了构成整个 SVG 的字符串。
+
+- `M37,17`
+
+  - M 是 MoveTo 的缩写。大写的“M”意味着绝对坐标，小写的“m”意味着相对距离。它暗含着是基于开始坐标，线在框里面，而且你在方框内矩形的右上角开始。
+  - 37 是开始 svg 位置的缩写，在 X 轴坐标 37 像素处。
+  - `17 开始 svg 位置，在 y 轴的 17 像素处。`
+
+- v15
+
+  - v 代表垂直。大写的 V 意味着绝对坐标，小写的 v 表示相对的长度、距离。dx/dy 和 x/y 可以用在 H/V 和 h/v 相应的位置里。
+  - 这里是表示相对于给定坐标画一条 15 像素的垂直线。它意味着你向下画 15 像素，到坐标 37,32。
+
+- `H14`
+
+  - H 代表水平，它是绝对坐标，因为它是大写的。
+  - 从 v15 的终点开始，画一条水平线直到到达绝对坐标 14，当到达 x 坐标 14 时结束画线。笔触位于坐标 14,32。
+
+- `V17`
+
+  - 就像前面那样，从上一条线的终点开始，画一条垂直线，直到到达 y 轴坐标 17。笔触位于坐标 14,17。
+
+- H37
+
+  - 最后，从 14,17 开始，画一条水平线，直到到达 x 轴坐标 37。笔触位于坐标 37,17（M 的值）
+
+- `z`
+
+  - 小写的 z 和大写的 Z 都是闭合一系列 svg 线段。
+
+- `,`
+
+  - 逗号开始下一串简单矢量图形线段。下一系列简单矢量线段将制作外层方框。
+
+- `M50,0`
+
+  - 在 x 轴 50 和 y 轴 0 处开始。
+
+- `H0`
+
+  - 画一条直线直到 (0,0)。
+
+- `v50`
+
+  - 相对于 0,0 画一条 50 像素的垂直线。这条线将画到 (0,50)。
+
+- `h50`
+
+  - 相对于 (0,-50) 画一条 50 像素的水平线。这条线将向右画到 (50,50)。
+
+- `V0`
+
+  - 画一条垂直线直到到达 y 轴坐标 0。这将画线到 (50,0)，即 M 的值。
+
+- `z`
+
+  - 小写的 z 和大写的 Z 都是闭合一系列 svg 线段。
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/display/index.md b/files/zh-cn/web/svg/attribute/display/index.md
index 78232904ddd8cf..da2d76ca21c4ad 100644
--- a/files/zh-cn/web/svg/attribute/display/index.md
+++ b/files/zh-cn/web/svg/attribute/display/index.md
@@ -3,104 +3,88 @@ title: display
 slug: Web/SVG/Attribute/display
 translation_of: Web/SVG/Attribute/display
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    The display attribute lets you control the rendering of graphical or container elements.
    
+The **`display`** attribute lets you control the rendering of graphical or container elements.
 
-
    display属性让你可以控制图形元素或容器元素的渲染。
    
+**`display`**属性让你可以控制图形元素或容器元素的渲染。
 
-
    A value of display="none" indicates that the given element and its children will not be rendered. Any value other than none or inherit indicates that the given element will be rendered by the browser.
    
+A value of `display="none"` indicates that the given element and its children will not be rendered. Any value other than `none` or `inherit` indicates that the given element will be rendered by the browser.
 
-
    display="none"表示该元素和它的子元素不会被渲染。而非none或inherit的值表示元素会被浏览器渲染。
    
+`display="none"`表示该元素和它的子元素不会被渲染。而非`none`或`inherit`的值表示元素会被浏览器渲染。
 
-
    When applied to a container element, setting display to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none.
    
+When applied to a container element, setting `display` to `none` causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with `display="none"` will never be rendered even if the child has a value for `display` other than `none`.
 
-
    当应用到容器元素时，将display设为none会导致容器与它所有的子元素不可见，如此看来，它在一组元素中表现地像一个元素组。这表示具有display="none"属性元素的所有子元素都不会被渲染，即使子元素的display并不是none。
    
+当应用到容器元素时，将`display`设为`none`会导致容器与它所有的子元素不可见，如此看来，它在一组元素中表现地像一个元素组。这表示具有`display="none"`属性元素的所有子元素都不会被渲染，即使子元素的`display`并不是`none`。
 
-
    When the display attribute is set to none, then the given element does not become part of the rendering tree. It has implications for the {{SVGElement("tspan")}}, {{SVGElement("tref")}}, and {{SVGElement("altGlyph")}} elements, event processing, for bounding box calculations and for calculation of clipping paths:
    
+When the `display` attribute is set to `none`, then the given element does not become part of the rendering tree. It has implications for the {{SVGElement("tspan")}}, {{SVGElement("tref")}}, and {{SVGElement("altGlyph")}} elements, event processing, for bounding box calculations and for calculation of clipping paths:
 
-
    display属性被设为none的元素不会成为渲染树的一部分。它涉及到{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 和 {{SVGElement("altGlyph")}}元素、用于盒边界与路径剪裁计算的事件处理。
    
+`display`属性被设为`none`的元素不会成为渲染树的一部分。它涉及到{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 和 {{SVGElement("altGlyph")}}元素、用于盒边界与路径剪裁计算的事件处理。
 
-
      
- 
    • If display is set to none on a {{SVGElement("tspan")}}, {{SVGElement("tref")}}, or {{SVGElement("altGlyph")}} element, then the text string is ignored for the purposes of text layout.
      • 
-
    
+- If `display` is set to `none` on a {{SVGElement("tspan")}}, {{SVGElement("tref")}}, or {{SVGElement("altGlyph")}} element, then the text string is ignored for the purposes of text layout.
 
-
             如果在{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 或{{SVGElement("altGlyph")}}元素中display的属性值被设为none,则为了文字布局，文字字符串会被忽视掉。
    
+如果在{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 或{{SVGElement("altGlyph")}}元素中`display`的属性值被设为`none`,则为了文字布局，文字字符串会被忽视掉。
 
-
      
- 
    • Regarding events, if display is set to none, the element receives no events.
      • 
-
    
+- Regarding events, if `display` is set to `none`, the element receives no events.
 
-
             至于事件，如果display被设为none则该元素不接受任何事件。
    
+至于事件，如果`display`被设为`none`则该元素不接受任何事件。
 
-
      
- 
    • The geometry of a graphics element with display set to none is not included in bounding box and clipping paths calculations.
      • 
-
    
+- The geometry of a [graphics element](/zh-CN/docs/Web/SVG/Element#Graphics_elements) with `display` set to `none` is not included in bounding box and clipping paths calculations.
 
-
             图形元素的display属性被设为none则不会被盒边界和路径剪裁计算中包含进去。
    
+图形元素的`display`属性被设为`none`则不会被盒边界和路径剪裁计算中包含进去。
 
-
    The display attribute only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements. For example, setting it to none on a {{SVGElement("path")}} element will prevent that element from getting rendered directly onto the canvas, but the {{SVGElement("path")}} element can still be referenced by a {{SVGElement("textPath")}} element; furthermore, its geometry will be used in text-on-a-path processing even if the {{SVGElement("path")}} has a display value of none.
    
+The `display` attribute only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements. For example, setting it to `none` on a {{SVGElement("path")}} element will prevent that element from getting rendered directly onto the canvas, but the {{SVGElement("path")}} element can still be referenced by a {{SVGElement("textPath")}} element; furthermore, its geometry will be used in text-on-a-path processing even if the {{SVGElement("path")}} has a `display` value of `none`.
 
-
    display属性只影响能被直接渲染的元素，尽管它不能防止该元素被其他元素参考。例如：将{SVGElement("path")}}元素设为 none，会使得该元素不会被直接渲染到 canvas 上，但是{{SVGElement("textPath")}}元素依旧会参考{{SVGElement("path")}}。此外，即便{SVGElement("path")}}的display为none，它的形状在处理路径上的文本时仍然会被用到。
    
+`display`属性只影响能被直接渲染的元素，尽管它不能防止该元素被其他元素参考。例如：将{SVGElement("path")}}元素设为 none，会使得该元素不会被直接渲染到 canvas 上，但是{{SVGElement("textPath")}}元素依旧会参考{{SVGElement("path")}}。此外，即便{SVGElement("path")}}的`display`为`none`，它的形状在处理路径上的文本时仍然会被用到。
 
-
    This attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. Thus, setting display="none" on a child of a {{SVGElement("mask")}} will prevent the given child element from being rendered as part of the mask. Similarly, setting display="none" on a child of a {{SVGElement("clipPath")}} element will prevent the given child element from contributing to the clipping path.
    
+This attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. Thus, setting `display="none"` on a child of a {{SVGElement("mask")}} will prevent the given child element from being rendered as part of the mask. Similarly, setting `display="none"` on a child of a {{SVGElement("clipPath")}} element will prevent the given child element from contributing to the clipping path.
 
-
    这个属性也能影响直接渲染到屏幕外的画布，比如遮罩或路径剪裁。因此，把{{SVGElement("mask")}}元素的一个子元素设为display="none"将会阻止子元素参与到路径剪裁中。
    
+这个属性也能影响直接渲染到屏幕外的画布，比如遮罩或路径剪裁。因此，把{{SVGElement("mask")}}元素的一个子元素设为`display="none"`将会阻止子元素参与到路径剪裁中。
 
-
    Note: As a presentation attribute, display can be used as a CSS property. See {{cssxref("display", "CSS display")}} for further information.
    
+**Note:** As a presentation attribute, `display` can be used as a CSS property. See {{cssxref("display", "CSS display")}} for further information.
 
-
    As a presentation attribute, it can be applied to any element.
    
+As a presentation attribute, it can be applied to any element.
 
-
    示例
    
+## 示例
 
-
-
-
    <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Here the yellow rectangle is displayed -->
-  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
-  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>
-
-  <!-- Here the yellow rectangle is not displayed -->
-  <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
-  <rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect>
-</svg>
    
-
-
    {{EmbedLiveSample("示例", "240", "120")}}
    
-
-
    Usage notes
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Default valueinline
    Value{{csssyntax("display")}}
    AnimatableYes
    
-
-
    For a description of the values, please refer to the {{cssxref("display", "CSS display")}} property.
    
-
-
    Specifications
    
+}
+```
+
+```html
+
+  
+  
+  
+
+  
+  
+  
+
+```
+
+{{EmbedLiveSample("示例", "240", "120")}}
+
+## Usage notes
+
+| Default value | `inline`                         |
+| ------------- | -------------------------------- |
+| Value         | {{csssyntax("display")}} |
+| Animatable    | Yes                              |
+
+For a description of the values, please refer to the {{cssxref("display", "CSS display")}} property.
+
+## Specifications
 
 {{Specifications}}
 
-
    Browser compatibility
    
+## Browser compatibility
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    See also
    
+## See also
 
-
      
- 
    • {{SVGAttr("visibility")}} attribute
      • 
- 
    • {{cssxref("display", "CSS display")}}
      • 
-
    
+- {{SVGAttr("visibility")}} attribute
+- {{cssxref("display", "CSS display")}}
diff --git a/files/zh-cn/web/svg/attribute/dominant-baseline/index.md b/files/zh-cn/web/svg/attribute/dominant-baseline/index.md
index 1d814c2c0cd3af..ebd04690d589e0 100644
--- a/files/zh-cn/web/svg/attribute/dominant-baseline/index.md
+++ b/files/zh-cn/web/svg/attribute/dominant-baseline/index.md
@@ -3,95 +3,59 @@ title: dominant-baseline
 slug: Web/SVG/Attribute/dominant-baseline
 translation_of: Web/SVG/Attribute/dominant-baseline
 ---
-
    « SVG Attribute reference home
    
-
    The dominant-baseline attribute is used to determine or re-determine a scaled-baseline-table. A scaled-baseline-table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-table and a baseline-table font-size. Some values of the property re-determine all three values; other only re-establish the baseline-table font-size. When the initial value, auto, would give an undesired result, this property can be used to explicitly set the desire scaled-baseline-table.
    
-
    If there is no baseline table in the nominal font or if the baseline table lacks an entry for the desired baseline, then the browser may use heuristics to determine the position of the desired baseline.
    
-
    As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("dominant-baseline","CSS dominant-baseline") }} for further information.
    
-
    Usage context
    
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesPresentation attribute
    Valueauto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit
    AnimatableYes
    Normative documentSVG 1.1 (2nd Edition)
    
-
    
- 
    
-  auto
    
- 
    
-  
    If this property occurs on a {{ SVGElement("text") }} element, then the computed value depends on the value of the {{ SVGAttr("writing-mode") }} attribute. If the {{ SVGAttr("writing-mode") }} is horizontal, then the value of the dominant-baseline component is alphabetic, else if the {{ SVGAttr("writing-mode") }} is vertical, then the value of the dominant-baseline component is central. 
    
-  
    If this property occurs on a {{ SVGElement("tspan") }}, {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }} or {{ SVGElement("textPath") }} element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element. If the computed {{ SVGAttr("baseline-shift") }} value actually shifts the baseline, then the baseline-table font-size component is set to the value of the {{ SVGAttr("font-size") }} attribute on the element on which the dominant-baseline attribute occurs, otherwise the baseline-table font-size remains the same as that of the element. If there is no parent text content element, the scaled-baseline-table value is constructed as above for {{ SVGElement("text") }} elements.
    
- 
    
- 
    
-  use-script
    
- 
    
-  The dominant-baseline and the baseline-table components are set by determining the predominant script of the character data content. The {{ SVGAttr("writing-mode") }}, whether horizontal or vertical, is used to select the appropriate set of baseline-tables and the dominant baseline is used to select the baseline-table that corresponds to that baseline. The baseline-table font-size component is set to the value of the {{ SVGAttr("font-size") }} attribute on the element on which the dominant-baseline attribute occurs.
    
- 
    
-  no-change
    
- 
    
-  The dominant-baseline, the baseline-table, and the baseline-table font-size remain the same as that of the parent text content element.
    
- 
    
-  reset-size
    
- 
    
-  The dominant-baseline and the baseline-table remain the same, but the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element. This re-scales the baseline-table for the current {{ SVGAttr("font-size") }}.
    
- 
    
-  ideographic
    
- 
    
-  The baseline-identifier for the dominant-baseline is set to be ideographic, the derived baseline-table is constructed using the ideographic baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
    
- 
    
-  alphabetic
    
- 
    
-  The baseline-identifier for the dominant-baseline is set to be alphabetic, the derived baseline-table is constructed using the alphabetic baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
    
- 
    
-  hanging
    
- 
    
-  The baseline-identifier for the dominant-baseline is set to be hanging, the derived baseline-table is constructed using the hanging baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
    
- 
    
-  mathematical
    
- 
    
-  The baseline-identifier for the dominant-baseline is set to be mathematical, the derived baseline-table is constructed using the mathematical baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
    
- 
    
-  central
    
- 
    
-  The baseline-identifier for the dominant-baseline is set to be central. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: ideographic, alphabetic, hanging, mathematical. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
    
- 
    
-  middle
    
- 
    
-  The baseline-identifier for the dominant-baseline is set to be middle. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: alphabetic, ideographic, hanging, mathematical. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
    
- 
    
-  text-after-edge
    
- 
    
-  The baseline-identifier for the dominant-baseline is set to be text-after-edge. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which font baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
    
- 
    
-  text-before-edge
    
- 
    
-  The baseline-identifier for the dominant-baseline is set to be text-before-edge. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
    
-
    
-
    Example
    
-
    Elements
    
-
    The following elements can use the dominant-baseline-shift attribute
    
-
+« [SVG Attribute reference home](/en/SVG/Attribute)
 
-
    规范
    
+The `dominant-baseline` attribute is used to determine or re-determine a scaled-baseline-table. A scaled-baseline-table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-table and a baseline-table font-size. Some values of the property re-determine all three values; other only re-establish the baseline-table font-size. When the initial value, auto, would give an undesired result, this property can be used to explicitly set the desire scaled-baseline-table.
+
+If there is no baseline table in the nominal font or if the baseline table lacks an entry for the desired baseline, then the browser may use heuristics to determine the position of the desired baseline.
+
+As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("dominant-baseline","CSS dominant-baseline") }} for further information.
+
+## Usage context
+
+| Categories         | Presentation attribute                                                                                                                                                           |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Value              | **auto** \| use-script \| no-change \| reset-size \| ideographic \| alphabetic \| hanging \| mathematical \| central \| middle \| text-after-edge \| text-before-edge \| inherit |
+| Animatable         | Yes                                                                                                                                                                              |
+| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#DominantBaselineProperty)                                                                                           |
+
+- auto
+  - : If this property occurs on a {{ SVGElement("text") }} element, then the computed value depends on the value of the {{ SVGAttr("writing-mode") }} attribute. If the {{ SVGAttr("writing-mode") }} is horizontal, then the value of the dominant-baseline component is `alphabetic`, else if the {{ SVGAttr("writing-mode") }} is vertical, then the value of the dominant-baseline component is `central`.If this property occurs on a {{ SVGElement("tspan") }}, {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }} or {{ SVGElement("textPath") }} element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element. If the computed {{ SVGAttr("baseline-shift") }} value actually shifts the baseline, then the baseline-table font-size component is set to the value of the {{ SVGAttr("font-size") }} attribute on the element on which the `dominant-baseline` attribute occurs, otherwise the baseline-table font-size remains the same as that of the element. If there is no parent text content element, the scaled-baseline-table value is constructed as above for {{ SVGElement("text") }} elements.
+- use-script
+  - : The dominant-baseline and the baseline-table components are set by determining the predominant script of the character data content. The {{ SVGAttr("writing-mode") }}, whether horizontal or vertical, is used to select the appropriate set of baseline-tables and the dominant baseline is used to select the baseline-table that corresponds to that baseline. The baseline-table font-size component is set to the value of the {{ SVGAttr("font-size") }} attribute on the element on which the `dominant-baseline` attribute occurs.
+- no-change
+  - : The dominant-baseline, the baseline-table, and the baseline-table font-size remain the same as that of the parent text content element.
+- reset-size
+  - : The dominant-baseline and the baseline-table remain the same, but the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element. This re-scales the baseline-table for the current {{ SVGAttr("font-size") }}.
+- ideographic
+  - : The baseline-identifier for the dominant-baseline is set to be `ideographic`, the derived baseline-table is constructed using the `ideographic` baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
+- alphabetic
+  - : The baseline-identifier for the dominant-baseline is set to be `alphabetic`, the derived baseline-table is constructed using the `alphabetic` baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
+- hanging
+  - : The baseline-identifier for the dominant-baseline is set to be `hanging`, the derived baseline-table is constructed using the `hanging` baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
+- mathematical
+  - : The baseline-identifier for the dominant-baseline is set to be `mathematical`, the derived baseline-table is constructed using the `mathematical` baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
+- central
+  - : The baseline-identifier for the dominant-baseline is set to be `central`. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: `ideographic`, `alphabetic`, `hanging`, `mathematical`. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
+- middle
+  - : The baseline-identifier for the dominant-baseline is set to be `middle`. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: `alphabetic`, `ideographic`, `hanging`, `mathematical`. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
+- text-after-edge
+  - : The baseline-identifier for the dominant-baseline is set to be `text-after-edge`. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which font baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
+- text-before-edge
+  - : The baseline-identifier for the dominant-baseline is set to be `text-before-edge`. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
+
+## Example
+
+## Elements
+
+The following elements can use the `dominant-baseline-shift` attribute
+
+- [Text content elements](/en/SVG/Element#Text_content_elements) »
+
+## 规范
 
 {{Specifications}}
 
-
    See also
    
-
      
- 
    • {{ cssxref("dominant-baseline","CSS dominant-baseline") }}
      • 
-
    
+## See also
+
+- {{ cssxref("dominant-baseline","CSS dominant-baseline") }}
diff --git a/files/zh-cn/web/svg/attribute/dur/index.md b/files/zh-cn/web/svg/attribute/dur/index.md
index 568c4265d67698..411556c1a76772 100644
--- a/files/zh-cn/web/svg/attribute/dur/index.md
+++ b/files/zh-cn/web/svg/attribute/dur/index.md
@@ -7,50 +7,31 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/dur
 ---
-
    « SVG 属性参考主页
    
-
-
    该属性标识了动画的简单持续时间。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画定时属性
    值<clock-value> | indefinite
    可变性No
    规范文档SVG 1.1 (2nd Edition)
    
-
-
    
- 
    <clock-value>
    
- 
    指定简单持续时间的时长。值必须大于 0。可以用小时（h）、分钟（m）、秒（s）、毫秒（ms）表达这个值。可以组合这些时间表达式以提供一个复合的持续时间，比如这样：hh:mm:ss.iii或者这样：mm:ss.iii。
    
-
    
-
-
    如果一个动画元素不带有dur属性，简单持续时间就是无限期的。请注意：如果一个简单持续时间是无限期的，则插值不能起作用（虽然它对 {{ SVGElement("set") }} 元素依然是有用的）。
    
-
-
    示例
    
-
-
    元素
    
-
-
    下列元素可以使用dur属性：
    
-
-
-
-
    规范
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
+
+该属性标识了动画的简单持续时间。
+
+## 用法
+
+| 类别     | 动画定时属性                                                                |
+| -------- | --------------------------------------------------------------------------- |
+| 值       | [](/en/SVG/Content_type#Clock-value) \| **indefinite**         |
+| 可变性   | No                                                                          |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#DurAttribute) |
+
+- [\](/en/SVG/Content_type#Clock-value)
+  - : 指定简单持续时间的时长。值必须大于 0。可以用小时（h）、分钟（m）、秒（s）、毫秒（ms）表达这个值。可以组合这些时间表达式以提供一个复合的持续时间，比如这样：`hh:mm:ss.iii`或者这样：`mm:ss.iii`。
+
+如果一个动画元素不带有`dur`属性，简单持续时间就是无限期的。请注意：如果一个简单持续时间是无限期的，则插值不能起作用（虽然它对 {{ SVGElement("set") }} 元素依然是有用的）。
+
+## 示例
+
+## 元素
+
+下列元素可以使用`dur`属性：
+
+- [动画元素](/en/SVG/Element#Animation) »
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/dx/index.md b/files/zh-cn/web/svg/attribute/dx/index.md
index f2da6f2feff35f..cca9f9be5b09c6 100644
--- a/files/zh-cn/web/svg/attribute/dx/index.md
+++ b/files/zh-cn/web/svg/attribute/dx/index.md
@@ -6,67 +6,44 @@ tags:
   - SVG 标签
 translation_of: Web/SVG/Attribute/dx
 ---
-
    « SVG 属性参考汇总
    
+« [SVG 属性参考汇总](/en/SVG/Attribute)
 
-
    dx 属性表示一个元素或其内容在 x 轴方向上的偏移，偏移量取决于设置该属性的元素。
    
+`dx 属性表示一个元素或其内容在 x 轴方向上的偏移，偏移量取决于设置该属性的元素。`
 
-
    对于{{SVGElement("feOffset")}}元素，它的值代表所有输入的图像的偏移量之和。这个总和被表达在由{{SVGElement("filter")}}元素的{{SVGAttr("primitiveUnits")}}属性定义的坐标系中。
    
+对于{{SVGElement("feOffset")}}元素，它的值代表所有输入的图像的偏移量之和。这个总和被表达在由{{SVGElement("filter")}}元素的{{SVGAttr("primitiveUnits")}}属性定义的坐标系中。
 
-
    对于{{SVGElement("glyphRef")}}元素，它的值代表该符号在字体坐标系中 x 轴上的相对坐标。
    
+对于{{SVGElement("glyphRef")}}元素，它的值代表该符号在字体坐标系中 x 轴上的相对坐标。
 
-
    对于{{SVGElement("text")}}、{{SVGElement("tspan")}}、{{SVGElement("tref")}}和{{SVGElement("altGlyph")}}元素，由于这些元素允许设置<list-of-length>，所以更复杂。
    
+对于{{SVGElement("text")}}、{{SVGElement("tspan")}}、{{SVGElement("tref")}}和{{SVGElement("altGlyph")}}元素，由于这些元素允许设置[\](/en/SVG/Content_type#List-of-Ts)，所以更复杂。
 
-
    如果只提供了一个<length>，当前文本位置会沿着坐标系内 x 轴方向偏移<length> 。
    
+如果只提供了一个[\](/en/SVG/Content_type#Length)，当前文本位置会沿着坐标系内 x 轴方向偏移[\](/en/SVG/Content_type#Length) 。
 
-
    如果提供了一个由逗号或者空格分隔的<length>列表，列表中的值将会表示前 n 个字符沿 x 轴方向偏移的增量。因此，当前文本位置也因为绘制当前{{SVGElement("text")}}元素而沿 x 轴方向偏移。
    
+如果提供了一个由逗号或者空格分隔的[\](/en/SVG/Content_type#Length)列表，列表中的值将会表示前 n 个字符沿 x 轴方向偏移的增量。因此，当前文本位置也因为绘制当前{{SVGElement("text")}}元素而沿 x 轴方向偏移。
 
-
    如果在<length>列表中有更多的字符，那么对于每个字符，都有
    
+如果在[\](/en/SVG/Content_type#Length)列表中有更多的字符，那么对于每个字符，都有
 
-
      
- 
    • 如果祖先{{SVGElement("text")}}或{{SVGElement("tspan")}}元素对于给定的字符，通过 dx 的属性指定了相对 x 坐标，那么当前文本位置会沿坐标系的 x 轴方向偏移该数值（最近的祖先具有优先级）
      • 
- 
    • 否则没有额外的 x 轴方向的偏移发生
      • 
-
    
+- 如果祖先{{SVGElement("text")}}或{{SVGElement("tspan")}}元素对于给定的字符，通过 dx 的属性指定了相对 x 坐标，那么当前文本位置会沿坐标系的 x 轴方向偏移该数值（最近的祖先具有优先级）
+- 否则没有额外的 x 轴方向的偏移发生
 
-
    用法上下文
    
+## 用法上下文
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    分类无
    数值类型<number> | T<.2Fvar>s"><list-of-length>
    可变是
    规范文档SVG 1.1 (2nd Edition): altGlyph element
    
-    SVG 1.1 (2nd Edition): feOffset element
    
-    SVG 1.1 (2nd Edition): glyphRef element
    
-    SVG 1.1 (2nd Edition): text element
    
-    SVG 1.1 (2nd Edition): tspan element
    
+| 分类     | 无                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| 数值类型 | [](/en/SVG/Content_type#Number) \| [T<.2Fvar>s">](/en/SVG/Content_type#List-of-T<.2Fvar>s)                                                                                                                                                                                                                                                                                                                                                                                                              |
+| 可变     | 是                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| 规范文档 | [SVG 1.1 (2nd Edition): altGlyph element](http://www.w3.org/TR/SVG11/text.html#AltGlyphElementDXAttribute) [SVG 1.1 (2nd Edition): feOffset element](http://www.w3.org/TR/SVG11/filters.html#feOffsetDxAttribute) [SVG 1.1 (2nd Edition): glyphRef element](http://www.w3.org/TR/SVG11/text.html#GlyphRefElementDXAttribute) [SVG 1.1 (2nd Edition): text element](http://www.w3.org/TR/SVG11/text.html#TextElementDXAttribute) [SVG 1.1 (2nd Edition): tspan element](http://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute) |
 
-
    元素
    
+## 元素
 
-
    这些元素可以使用 dx 属性
    
+这些元素可以使用 dx 属性
 
-
      
- 
    • {{ SVGElement("altGlyph") }}
      • 
- 
    • {{ SVGElement("feOffset") }}
      • 
- 
    • {{ SVGElement("glyphRef") }}
      • 
- 
    • {{ SVGElement("text") }}
      • 
- 
    • {{ SVGElement("tref") }}
      • 
- 
    • {{ SVGElement("tspan") }}
      • 
-
    
+- {{ SVGElement("altGlyph") }}
+- {{ SVGElement("feOffset") }}
+- {{ SVGElement("glyphRef") }}
+- {{ SVGElement("text") }}
+- {{ SVGElement("tref") }}
+- {{ SVGElement("tspan") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/edgemode/index.md b/files/zh-cn/web/svg/attribute/edgemode/index.md
index c36cdfa55218c5..8ba5aa520e2adc 100644
--- a/files/zh-cn/web/svg/attribute/edgemode/index.md
+++ b/files/zh-cn/web/svg/attribute/edgemode/index.md
@@ -9,54 +9,35 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Attribute/edgeMode
 ---
-
    « SVG 属性参考主页
    
-
-
    edgeMode属性确定了当核心位于输入图像的边缘或贴近输入图像的边缘时，如何取用颜色值用于扩展输入图像，从而可以应用矩阵操作。
    
-
-
    如果没有指定edgeMode属性，等效于值被指定为duplicate。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值duplicate | wrap | none
    可变性Yes
    规范文档SVG 1.1 (2nd Edition)
    
-
-
    
- 
    duplicate
    
- 
    它指示输入图像沿着每条边扩展，复制输入图像的给定边缘上的颜色值。
    
- 
    wrap
    
- 
    它指示扩展输入图像，从图像相对的边缘取色。
    
- 
    none
    
- 
    它指示扩展输入图像，用 0 作为 RGBA 的像素值。
    
-
    
-
-
    示例
    
-
-
    元素
    
-
-
    以下元素可以使用edgeMode属性：
    
-
-
      
- 
    • {{ SVGElement("feConvolveMatrix") }}
      • 
-
    
-
-
    规范
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
+
+`edgeMode`属性确定了当核心位于输入图像的边缘或贴近输入图像的边缘时，如何取用颜色值用于扩展输入图像，从而可以应用矩阵操作。
+
+如果没有指定`edgeMode`属性，等效于值被指定为`duplicate`。
+
+## 用法
+
+| 类别     | 无                                                                                                        |
+| -------- | --------------------------------------------------------------------------------------------------------- |
+| 值       | **duplicate** \| wrap \| none                                                                             |
+| 可变性   | Yes                                                                                                       |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementEdgeModeAttribute) |
+
+- duplicate
+  - : 它指示输入图像沿着每条边扩展，复制输入图像的给定边缘上的颜色值。
+- wrap
+  - : 它指示扩展输入图像，从图像相对的边缘取色。
+- none
+  - : 它指示扩展输入图像，用 0 作为 RGBA 的像素值。
+
+## 示例
+
+## 元素
+
+以下元素可以使用`edgeMode`属性：
+
+- {{ SVGElement("feConvolveMatrix") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/enable-background/index.md b/files/zh-cn/web/svg/attribute/enable-background/index.md
index ae270d3938f146..0c58f0bdeb697c 100644
--- a/files/zh-cn/web/svg/attribute/enable-background/index.md
+++ b/files/zh-cn/web/svg/attribute/enable-background/index.md
@@ -3,55 +3,31 @@ title: enable-background
 slug: Web/SVG/Attribute/enable-background
 translation_of: Web/SVG/Attribute/enable-background
 ---
-
    {{SVGRef}} {{deprecated_header("SVG 2")}}
    
+{{SVGRef}} {{deprecated_header("SVG 2")}}
 
-
    该enable-background属性指定如何管理背景图像的累积。
    
+该**`enable-background`**属性指定如何管理背景图像的累积。
 
-
    注意：作为演示文稿属性，enable-background可以用作 CSS 属性。
    
+**注意：**作为演示文稿属性，`enable-background`可以用作 CSS 属性。
 
-
    作为表示属性，它可以应用于任何元素，但仅对以下 11 个元素有效：{{SVGElement("a")}}，{{SVGElement("defs")}}，{{SVGElement("字形")}}，{{SVGElement("g")}}，{{SVGElement("marker")}}，{{SVGElement("mask")}}，{{SVGElement("missing-glyph")}}，{{SVGElement("pattern")}}，{{SVGElement("svg")}}，{{SVGElement("switch")}}和{{SVGElement("symbol")}}}
    
+作为表示属性，它可以应用于任何元素，但仅对以下 11 个元素有效：{{SVGElement("a")}}，{{SVGElement("defs")}}，{{SVGElement("字形")}}，{{SVGElement("g")}}，{{SVGElement("marker")}}，{{SVGElement("mask")}}，{{SVGElement("missing-glyph")}}，{{SVGElement("pattern")}}，{{SVGElement("svg")}}，{{SVGElement("switch")}}和{{SVGElement("symbol")}}}
 
-
    上下文注释
    
+## 上下文注释
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值accumulate| new[ <x> <y> <width> <height>]？
    默认值accumulate
    可动画的没有
    
+| 值       | `accumulate`\| `new`[ `` `` `` ``]？ |
+| -------- | --------------------------------------------------------- |
+| 默认值   | `accumulate`                                              |
+| 可动画的 | 没有                                                      |
 
-
    
- 
    accumulate
    
- 
    
- 
    如果祖先容器元素的属性值为enable-background: new，则当前容器元素内的所有图形元素都将呈现到父容器元素的背景图像画布上以及目标设备上。
    
+- `accumulate`
+  - : 如果祖先容器元素的属性值为`enable-background: new`，则当前容器元素内的所有图形元素都将呈现到父容器元素的背景图像画布上以及目标设备上。否则，没有当前的背景图像画布，因此图形元素仅渲染到目标设备上。
+- `new [     ]?`
+  - : 该值使当前容器元素的子代能够访问背景图像。它还指示建立了新的（即最初为透明的黑色）背景图像画布，并且实际上，除了将当前容器元素的所有子对象呈现到目标设备上之外，还应将其呈现到新的背景图像画布中。The optional ``, ``, ``, and `` parameters are [``](/en-US/docs/Web/SVG/Content_type#Number) values that indicate the subregion of the container elementʼs user space where access to the background image is allowed to happen. Those values act as a clipping rectangle on the background image canvas.
+    Negative values for `` or `` are forbidden. If one, two, or three values are specified or if neither `` nor `` are specified, the `BackgroundImage` and `BackgroundAlpha` of a filter primitive are processed as if background image processing were not enabled.
 
- 
    否则，没有当前的背景图像画布，因此图形元素仅渲染到目标设备上。
    
- 
    
- 
    new [ <x> <y> <width> <height> ]?
    
- 
    
- 
    该值使当前容器元素的子代能够访问背景图像。
    
-
- 
    它还指示建立了新的（即最初为透明的黑色）背景图像画布，并且实际上，除了将当前容器元素的所有子对象呈现到目标设备上之外，还应将其呈现到新的背景图像画布中。
    
-
- 
    The optional <x>, <y>, <width>, and <height> parameters are <number> values that indicate the subregion of the container elementʼs user space where access to the background image is allowed to happen. Those values act as a clipping rectangle on the background image canvas.
    
-  Negative values for <width> or <height> are forbidden. If one, two, or three values are specified or if neither <width> nor <height> are specified, the BackgroundImage and BackgroundAlpha of a filter primitive are processed as if background image processing were not enabled.
    
- 
    
-
    
-
-
    Specifications
    
+## Specifications
 
 {{Specifications}}
 
-
    Browser compatibility
    
+## Browser compatibility
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/end/index.md b/files/zh-cn/web/svg/attribute/end/index.md
index 30307596b8e8c6..3aab401ebaa0dc 100644
--- a/files/zh-cn/web/svg/attribute/end/index.md
+++ b/files/zh-cn/web/svg/attribute/end/index.md
@@ -7,47 +7,30 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/end
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    这个属性定义了一个动画的结束值，可以约束激活持续时间。
    
+这个属性定义了一个动画的结束值，可以约束激活持续时间。
 
-
    这个属性值是一个分号分隔的数列值。每个单独值可以是定义在{{ SVGAttr("begin") }}属性中同种类型。
    
+这个属性值是一个分号分隔的数列值。每个单独值可以是定义在{{ SVGAttr("begin") }}属性中同种类型。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画定时属性
    值<End-value-list>
    可变性No
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 动画定时属性                                                                |
+| -------- | --------------------------------------------------------------------------- |
+| 值       |                                                             |
+| 可变性   | No                                                                          |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#EndAttribute) |
 
-
    欲知在<end-value-list>中允许用哪些值，请阅读{{ SVGAttr("begin") }}属性。
    
+欲知在``中允许用哪些值，请阅读{{ SVGAttr("begin") }}属性。
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用end属性：
    
+下列元素可以使用`end`属性：
 
-
+- [Animation elements](/en/SVG/Element#Animation) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/fill-opacity/index.md b/files/zh-cn/web/svg/attribute/fill-opacity/index.md
index 179c5b3a2d2ea6..770f1ec51e63a8 100644
--- a/files/zh-cn/web/svg/attribute/fill-opacity/index.md
+++ b/files/zh-cn/web/svg/attribute/fill-opacity/index.md
@@ -8,55 +8,33 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/fill-opacity
 ---
-
    « SVG 属性参考主页
    
-
-
    该属性指定了填色的不透明度或当前对象的内容物的不透明度。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<opacity-value> | inherit
    初始值1
    可变性Yes
    规范文档SVG 1.1 (2nd Edition)
    
-
-
    示例
    
-
-
    元素
    
-
-
    下列元素可以使用fill-opacity属性：
    
-
-
-
-
    规范
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
+
+该属性指定了填色的不透明度或当前对象的内容物的不透明度。
+
+## 用法
+
+| 类别     | 外观属性                                                                            |
+| -------- | ----------------------------------------------------------------------------------- |
+| 值       | [](/en/SVG/Content_type#Opacity_value) \| inherit                    |
+| 初始值   | 1                                                                                   |
+| 可变性   | Yes                                                                                 |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty) |
+
+## 示例
+
+## 元素
+
+下列元素可以使用`fill-opacity`属性：
+
+- [元素元素](/en/SVG/Element#Shape) »
+- [文本内容元素](/en/SVG/Element#TextContent) »
+
+## 规范
 
 {{Specifications}}
 
-
    参见
    
+## 参见
 
-
      
- 
    • {{ SVGAttr("stroke-opacity") }}
      • 
- 
    • {{ SVGAttr("opacity") }}
      • 
-
    
+- {{ SVGAttr("stroke-opacity") }}
+- {{ SVGAttr("opacity") }}
diff --git a/files/zh-cn/web/svg/attribute/fill-rule/index.md b/files/zh-cn/web/svg/attribute/fill-rule/index.md
index 7a2092c533a8f5..6619ba423eaa24 100644
--- a/files/zh-cn/web/svg/attribute/fill-rule/index.md
+++ b/files/zh-cn/web/svg/attribute/fill-rule/index.md
@@ -9,134 +9,126 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Attribute/fill-rule
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    fill-rule  是一个外观属性，它定义了用来确定一个多边形内部区域的算法。
    
+**`fill-rule`** 是一个外观属性，它定义了用来确定一个多边形内部区域的算法。
 
-
    
-
    备注： 作为一个外观属性，fill-rule 可以被用于 CSS。
    
-
    
+> **备注：** 作为一个外观属性，fill-rule 可以被用于 CSS。
 
-
    作为一个外观属性，它可以被应用于任何元素，但只会在这八个元素中有效：{{SVGElement('altGlyph')}}、{{SVGElement('path')}}、{{SVGElement('polygon')}}、{{SVGElement('polyline')}}、{{SVGElement('text')}}、{{SVGElement('textPath')}}、{{SVGElement('tref')}} 和 {{SVGElement('tspan')}}。
    
+作为一个外观属性，它可以被应用于任何元素，但只会在这八个元素中有效：{{SVGElement('altGlyph')}}、{{SVGElement('path')}}、{{SVGElement('polygon')}}、{{SVGElement('polyline')}}、{{SVGElement('text')}}、{{SVGElement('textPath')}}、{{SVGElement('tref')}} 和 {{SVGElement('tspan')}}。
 
-
    如何判断一个路径组成的多边形的内部区域，从而给它上色，对于一个简单的、没有交错的路径来说，是很显然的；然而，对于一个更为复杂的路径，比如一条与自身相交的路径，或者是这条路径上的其中一段将另一段包围着，要解释什么是“内部”，就不再这么显然了。
    
+如何判断一个路径组成的多边形的内部区域，从而给它上色，对于一个简单的、没有交错的路径来说，是很显然的；然而，对于一个更为复杂的路径，比如一条与自身相交的路径，或者是这条路径上的其中一段将另一段包围着，要解释什么是“内部”，就不再这么显然了。
 
-
    示例
    
+## 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
-  <!-- fill-rule 的默认值 -->
-  <polygon fill-rule="nonzero" stroke="red"
-   points="50,0 21,90 98,35 2,35 79,90"/>
+```html
+
+  
+  
 
-  <!--
+  
+  
+
+```
+
+{{EmbedLiveSample('示例', '100%', 200)}}
+
+## 用法
+
+| 类别     | 外观属性                                                                         |
+| -------- | -------------------------------------------------------------------------------- |
+| 值       | nonzero \| evenodd                                                               |
+| 默认值   | nonzero                                                                          |
+| 可变性   | Yes                                                                              |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillRuleProperty) |
+
+`fill-rule` 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值：
+
+### nonzero
+
+这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。
+
+#### Example
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+  
+
+  
+  
 
-  <!--
+  
+  
+           M230,20 v50 h50 v-50 z"/>
+
+```
 
-
    {{EmbedLiveSample('nonzero', '100%', 200)}}
    
+{{EmbedLiveSample('nonzero', '100%', 200)}}
 
-
    evenodd
    
+### evenodd
 
-
    这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。
    
+这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。
 
-
    Example
    
+#### Example
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
-  <!-- evenodd 填充规则被用于路径段会相交的形状上的效果 -->
-  <polygon fill-rule="evenodd" stroke="red"
-           points="50,0 21,90 98,35 2,35 79,90"/>
+```html
+
+  
+  
 
-  <!--
+  
+  
 
-  <!--
+  
+  
+           M230,20 v50 h50 v-50 z"/>
+
+```
 
-
    {{EmbedLiveSample('evenodd', '100%', 200)}}
    
+{{EmbedLiveSample('evenodd', '100%', 200)}}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/fill/index.md b/files/zh-cn/web/svg/attribute/fill/index.md
index de0b1d8ea6742f..11ab9b7123179f 100644
--- a/files/zh-cn/web/svg/attribute/fill/index.md
+++ b/files/zh-cn/web/svg/attribute/fill/index.md
@@ -7,77 +7,43 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/fill
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    fill属性根据它的使用环境，拥有两个意义。
    
+`fill`属性根据它的使用环境，拥有两个意义。
 
-
    默认地，当动画元素结束时，目标元素的外观属性不再应用该效果。在动画元素结束后，要还保持这个动画的的值，就需要用到fill属性。
    
+默认地，当动画元素结束时，目标元素的外观属性不再应用该效果。在动画元素结束后，要还保持这个动画的的值，就需要用到`fill`属性。
 
-
    对于形状元素和文本，fill属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及{{ SVGAttr("fill-rule") }} 属性的值。作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
    
+对于形状元素和文本，`fill`属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及{{ SVGAttr("fill-rule") }} 属性的值。作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
 
-
    用法
    
+## 用法
 
-
    对动画元素
    
+### 对动画元素
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画定时属性
    值remove | freeze
    可变性No
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 动画定时属性                                                                 |
+| -------- | ---------------------------------------------------------------------------- |
+| 值       | **remove** \| freeze                                                         |
+| 可变性   | No                                                                           |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#FillAttribute) |
 
-
    
- 
    remove（默认值）
    
- 
    在动画的激活持续时间结束后，动画效果会移除（不再应用）。在动画的激活结束后，动画不再对目标元素有影响（除非动画重新开始）。
    
- 
    freeze
    
- 
    在动画激活持续时间结束后，文档持续时间的剩余时间里（或者直到动画重新开始）动画效果会“冻结”着。
    
-
    
+- remove（默认值）
+  - : 在动画的激活持续时间结束后，动画效果会移除（不再应用）。在动画的激活结束后，动画不再对目标元素有影响（除非动画重新开始）。
+- freeze
+  - : 在动画激活持续时间结束后，文档持续时间的剩余时间里（或者直到动画重新开始）动画效果会“冻结”着。
 
-
    对形状元素
    
+### 对形状元素
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<paint>
    可变性Yes
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 外观属性                                                                     |
+| -------- | ---------------------------------------------------------------------------- |
+| 值       | [](/en/SVG/Content_type#Paint)                                        |
+| 可变性   | Yes                                                                          |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillProperty) |
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用fill属性：
    
+下列元素可以使用`fill`属性：
 
-
+- [动画元素](/en/SVG/Element#Animation_elements) »
+- [形状元素](/en/SVG/Element#Shape) »
+- [文本内容元素](/en/SVG/Element#TextContent) »
diff --git a/files/zh-cn/web/svg/attribute/filter/index.md b/files/zh-cn/web/svg/attribute/filter/index.md
index 509810dc2cd6ba..f7ac39ec5681d9 100644
--- a/files/zh-cn/web/svg/attribute/filter/index.md
+++ b/files/zh-cn/web/svg/attribute/filter/index.md
@@ -7,66 +7,45 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/filter
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    属性filter定义了由{{ SVGElement("filter") }}元素定义滤镜效果，该滤镜效果将应用到该元素上。
    
+属性`filter`定义了由{{ SVGElement("filter") }}元素定义滤镜效果，该滤镜效果将应用到该元素上。
 
-
    作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。请阅读{{ cssxref("filter","CSS filter") }}以了解更多信息。
    
+作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。请阅读{{ cssxref("filter","CSS filter") }}以了解更多信息。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<funciri> | none | inherit
    可变性Yes
    规范文档SVG 1.1 (2nd Edition)
    
+| 类别     | 外观属性                                                                        |
+| -------- | ------------------------------------------------------------------------------- |
+| 值       | [](/en/SVG/Content_type#FuncIRI) \| **none** \| inherit                |
+| 可变性   | Yes                                                                             |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#FilterProperty) |
 
-
    
- 
    <funciri>
    
- 
    元素的引用，它定义了将要应用到该元素的滤镜效果。
    
- 
    none
    
- 
    不对该元素应用任何滤镜效果。
    
-
    
+- [\](/en/SVG/Content_type#FuncIRI)
+  - : 元素的引用，它定义了将要应用到该元素的滤镜效果。
+- none
+  - : 不对该元素应用任何滤镜效果。
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用filter属性：
    
+下列元素可以使用`filter`属性：
 
-
      
- 
    • 图形元素 »
      • 
- 
    • {{ SVGElement("a") }}
      • 
- 
    • {{ SVGElement("defs") }}
      • 
- 
    • {{ SVGElement("glyph") }}
      • 
- 
    • {{ SVGElement("g") }}
      • 
- 
    • {{ SVGElement("marker") }}
      • 
- 
    • {{ SVGElement("missing-glyph") }}
      • 
- 
    • {{ SVGElement("pattern") }}
      • 
- 
    • {{ SVGElement("svg") }}
      • 
- 
    • {{ SVGElement("switch") }}
      • 
- 
    • {{ SVGElement("symbol") }}
      • 
-
    
+- [图形元素](/en/SVG/Element#Graphics_elements) »
+- {{ SVGElement("a") }}
+- {{ SVGElement("defs") }}
+- {{ SVGElement("glyph") }}
+- {{ SVGElement("g") }}
+- {{ SVGElement("marker") }}
+- {{ SVGElement("missing-glyph") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("svg") }}
+- {{ SVGElement("switch") }}
+- {{ SVGElement("symbol") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    参见
    
+## 参见
 
-
      
- 
    • {{ cssxref("filter","CSS filter") }}
      • 
-
    
+- {{ cssxref("filter","CSS filter") }}
diff --git a/files/zh-cn/web/svg/attribute/filterunits/index.md b/files/zh-cn/web/svg/attribute/filterunits/index.md
index b745ae879297d8..578acf1d97eed3 100644
--- a/files/zh-cn/web/svg/attribute/filterunits/index.md
+++ b/files/zh-cn/web/svg/attribute/filterunits/index.md
@@ -3,52 +3,33 @@ title: filterUnits
 slug: Web/SVG/Attribute/filterUnits
 translation_of: Web/SVG/Attribute/filterUnits
 ---
-
    « SVG Attribute reference home
    
-
-
    filterUnits 属性定义{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和{{ SVGAttr("height") }}使用的坐标系系统。
    
-
-
    如果 filterUnits 属性未指定，那么效果如同指定了值为objectBoundingBox.
    
-
-
    Usage context
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    ValueuserSpaceOnUse | objectBoundingBox
    AnimatableYes
    Normative documentSVG 1.1 (2nd Edition)
    
-
-
    
- 
    userSpaceOnUse
    
- 
    {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }} 表示当前坐标系统中的值，这些值表示{{ SVGElement("filter") }}元素在当前用户坐标系中的位置和大小 (例如通过{{ SVGAttr("filter") }}引用该{{ SVGElement("filter") }}元素的元素所在的坐标系系统).
    
- 
    objectBoundingBox
    
- 
    在这种情况下，{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }}biao 表示引用{{ SVGElement("filter") }}元素的元素的 baow 包围盒的分数或百分比。
    
-
    
-
-
    Examples
    
-
-
    Elements
    
-
-
    下面这些元素可以使用 filterUnits 属性：
    
-
-
      
- 
    • {{ SVGElement("filter") }}
      • 
-
    
-
-
    规范
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
+
+filterUnits 属性定义{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和{{ SVGAttr("height") }}使用的坐标系系统。
+
+如果 filterUnits 属性未指定，那么效果如同指定了值为`objectBoundingBox.`
+
+## Usage context
+
+| Categories         | _None_                                                                                             |
+| ------------------ | -------------------------------------------------------------------------------------------------- |
+| Value              | `userSpaceOnUse` \| **`objectBoundingBox`**                                                        |
+| Animatable         | Yes                                                                                                |
+| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#FilterElementFilterUnitsAttribute) |
+
+- userSpaceOnUse
+  - : {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }} 表示当前坐标系统中的值，这些值表示{{ SVGElement("filter") }}元素在当前用户坐标系中的位置和大小 (例如通过{{ SVGAttr("filter") }}引用该{{ SVGElement("filter") }}元素的元素所在的坐标系系统).
+- objectBoundingBox
+  - : 在这种情况下，{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }}biao 表示引用{{ SVGElement("filter") }}元素的元素的 baow 包围盒的分数或百分比。
+
+## Examples
+
+## Elements
+
+下面这些元素可以使用 filterUnits 属性：
+
+- {{ SVGElement("filter") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/font-family/index.md b/files/zh-cn/web/svg/attribute/font-family/index.md
index 48827e024f7fcc..f67d0bf4d829c4 100644
--- a/files/zh-cn/web/svg/attribute/font-family/index.md
+++ b/files/zh-cn/web/svg/attribute/font-family/index.md
@@ -5,50 +5,46 @@ tags:
   - SVG 属性
 translation_of: Web/SVG/Attribute/font-family
 ---
-
    « SVG Attribute reference home
    
-
    font-family 属性 (attribute) 指出哪个字体集将被用来渲染文字， 在带优先级的字体集名称列表被指定，还有或没有泛指的字符集名称。(specified as a prioritized list of font family names and/or generic family names)。
    
-
    作为一个表现层的属性，font-family属性也可以被直接用在 CSS 样式表中，详见 {{ cssxref("font-family","CSS font-family") }} 。
    
-
    使用上下文
    
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    分类Presentation attribute
    值[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] | inherit
    可动画 AnimatableYes
    规范文档SVG 1.1 (2nd Edition)
    
-
    例子
    
-
    CSS
    
-
    p.class1{font-family:"Times New Roman",Times,serif;}
+« [SVG Attribute reference home](/en/SVG/Attribute)
+
+`font-family` 属性 (attribute) 指出哪个字体集将被用来渲染文字， 在带优先级的字体集名称列表被指定，还有或没有泛指的字符集名称。(specified as a prioritized list of font family names and/or generic family names)。
+
+作为一个表现层的属性，`font-family`属性也可以被直接用在 CSS 样式表中，详见 {{ cssxref("font-family","CSS font-family") }} 。
+
+## 使用上下文
+
+| 分类              | Presentation attribute                                                                  |
+| ----------------- | --------------------------------------------------------------------------------------- |
+| 值                | [[ \| ],]\* [ \| ] \| inherit |
+| 可动画 Animatable | Yes                                                                                     |
+| 规范文档          | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#FontFamilyProperty)        |
+
+## 例子
+
+#### CSS
+
+```plain
+p.class1{font-family:"Times New Roman",Times,serif;}
 p.class2{font-family:Arial,Helvetica;}
-
    
-
    HTML
    
-
    <p class="class1">This is a paragraph, shown in the Times New Roman font.</p>
-<p class="class2">This is a paragraph, shown in the Arial font.</p>
-
    
-
    元素
    
-
    以下元素可以使用font-family 属性 (attribute)
    
-
-
-
    规范
    
+```
+
+#### HTML
+
+```html
+
    This is a paragraph, shown in the Times New Roman font.
    
+
    This is a paragraph, shown in the Arial font.
    
+```
+
+## 元素
+
+以下元素可以使用`font-family` 属性 (attribute)
+
+- [Text content elements](/en/SVG/Element#Text_content_elements) »
+
+## 规范
 
 {{Specifications}}
 
-
    另见
    
-
      
- 
    • {{ cssxref("font-family","CSS font-family") }}
      • 
-
    
+## 另见
+
+- {{ cssxref("font-family","CSS font-family") }}
diff --git a/files/zh-cn/web/svg/attribute/fr/index.md b/files/zh-cn/web/svg/attribute/fr/index.md
index 059e763ae3cd90..b9b17c913ffab2 100644
--- a/files/zh-cn/web/svg/attribute/fr/index.md
+++ b/files/zh-cn/web/svg/attribute/fr/index.md
@@ -7,66 +7,51 @@ tags:
   - SVG 径向渐变焦点
 translation_of: Web/SVG/Attribute/fr
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。
    
+对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<length>
    可变性非
    规范文档SVG 1.1 (2nd Edition): The radialGradient element
    
+| 类别     | 无                                                                                                                           |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 值       | [](/zh-CN/docs/Web/SVG/Content_type#Length)                                                                          |
+| 可变性   | 非                                                                                                                           |
+| 规范文档 | [SVG 1.1 (2nd Edition): The radialGradient element](http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute) |
 
-
    示例
    
+## 示例
 
-
    <?xml version="1.0" standalone="no"?>
+```html
+
 
-<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
+
+  
+      
+        
+        
+      
+  
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
+  
 
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+  
+  
+  
+  (fx,fy)
+  (cx,cy)
 
-</svg>
    
+
+```
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用 fr 属性：
    
+下列元素可以使用 `fr` 属性：
 
-
      
- 
    • {{ SVGElement("radialGradient") }}
      • 
-
    
+- {{ SVGElement("radialGradient") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/from/index.md b/files/zh-cn/web/svg/attribute/from/index.md
index 4224f896db1f26..200c78a96946a8 100644
--- a/files/zh-cn/web/svg/attribute/from/index.md
+++ b/files/zh-cn/web/svg/attribute/from/index.md
@@ -3,65 +3,50 @@ title: from
 slug: Web/SVG/Attribute/From
 translation_of: Web/SVG/Attribute/From
 ---
-
    « SVG 属性参考
    
+« [SVG 属性参考](/en/SVG/Attribute)
 
-
    这个属性是在 svg 动画发生过程中被修改的属性的初始值。当同时使用了这个属性和  to 属性，animation 将会修改这个这个设定的动画属性的值从 from 属性的值到 to 属性的值。
    
+这个属性是在 svg 动画发生过程中被修改的属性的初始值。当同时使用了这个属性和 [to](/zh-CN/docs/Web/SVG/Attribute/To) 属性，animation 将会修改这个这个设定的动画属性的值从 from 属性的值到 to 属性的值。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画属性值
    值<value>
    动画特征No
    标准化文档SVG 1.1 (2nd Edition)
    
+| 类别       | 动画属性值                                                                   |
+| ---------- | ---------------------------------------------------------------------------- |
+| 值         |                                                                       |
+| 动画特征   | No                                                                           |
+| 标准化文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#FromAttribute) |
 
-
    这个属性的准确的值类型取决于这个属性将要被用作动画的属性的值。
    
+这个属性的准确的值类型取决于这个属性将要被用作动画的属性的值。
 
-
    例子
    
+## 例子
 
-
    这个例子给 from 属性了一个 100 的值，让动画从 100 的宽度开始运行。
    
+这个例子给 from 属性了一个 100 的值，让动画从 100 的宽度开始运行。
 
-
    <?xml version="1.0"?>
-<svg width="200" height="200"
+```xml
+
+
 
-  <rect x="10" y="10" width="100" height="100">
-    <animate attributeType="XML"
+  
+    
+  
 
-</svg>
    
+
+```
 
-
    元素
    
+## 元素
 
-
    如下的元素能使用 from 属性
    
+如下的元素能使用 from 属性
 
-
      
- 
    • {{ SVGElement("animate") }}
      • 
- 
    • {{ SVGElement("animateColor") }}
      • 
- 
    • {{ SVGElement("animateMotion") }}
      • 
- 
    • {{ SVGElement("animateTransform") }}
      • 
-
    
+- {{ SVGElement("animate") }}
+- {{ SVGElement("animateColor") }}
+- {{ SVGElement("animateMotion") }}
+- {{ SVGElement("animateTransform") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/fx/index.md b/files/zh-cn/web/svg/attribute/fx/index.md
index e85ff0709443de..363ff523acc20d 100644
--- a/files/zh-cn/web/svg/attribute/fx/index.md
+++ b/files/zh-cn/web/svg/attribute/fx/index.md
@@ -9,66 +9,51 @@ tags:
   - SVG 渐变焦点
 translation_of: Web/SVG/Attribute/fx
 ---
-
    «  SVG 属性参考主页
    
+« [SVG 属性参考主页](/zh-CN/docs/web/SVG/Attribute)
 
-
    对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
    
+对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<coordinate>
    可变性非
    规范文档           SVG 1.1 (2nd Edition): The radialGradient element
    
+| 类别     | 无                                                                                                                           |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 值       | [](https://developer.mozilla.org/en/SVG/Content_type#Coordinate)                                                 |
+| 可变性   | 非                                                                                                                           |
+| 规范文档 | [SVG 1.1 (2nd Edition): The radialGradient element](http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute) |
 
-
    示例
    
+## 示例
 
-
    <?xml version="1.0" standalone="no"?>
+```html
+
 
-<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
+
+  
+      
+        
+        
+      
+  
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
+  
 
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+  
+  
+  
+  (fx,fy)
+  (cx,cy)
 
-</svg>
    
+
+```
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用 fx 属性：
    
+下列元素可以使用 `fx` 属性：
 
-
      
- 
    • {{ SVGElement("radialGradient") }}
      • 
-
    
+- {{ SVGElement("radialGradient") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/fy/index.md b/files/zh-cn/web/svg/attribute/fy/index.md
index 2f6c9b9000064b..6669eef23bc2f3 100644
--- a/files/zh-cn/web/svg/attribute/fy/index.md
+++ b/files/zh-cn/web/svg/attribute/fy/index.md
@@ -8,68 +8,53 @@ tags:
   - SVG 渐变属性
 translation_of: Web/SVG/Attribute/fy
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
    
+对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<coordinate>
    可变性非
    规范文档SVG 1.1 (2nd Edition): The radialGradient element
    
+| 类别     | 无                                                                                                                           |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 值       | [](/en/SVG/Content_type#Coordinate)                                                                              |
+| 可变性   | 非                                                                                                                           |
+| 规范文档 | [SVG 1.1 (2nd Edition): The radialGradient element](http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute) |
 
-
    {{ page("/en/SVG/Content_type","Coordinate") }}
    
+{{ page("/en/SVG/Content_type","Coordinate") }}
 
-
    示例
    
+## 示例
 
-
    <?xml version="1.0" standalone="no"?>
+```html
+
 
-<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
+
+  
+      
+        
+        
+      
+  
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
+  
 
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+  
+  
+  
+  (fx,fy)
+  (cx,cy)
 
-</svg>
    
+
+```
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用  fy 属性：
    
+下列元素可以使用 `fy` 属性：
 
-
      
- 
    • {{ SVGElement("radialGradient") }}
      • 
-
    
+- {{ SVGElement("radialGradient") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/height/index.md b/files/zh-cn/web/svg/attribute/height/index.md
index ac462c53ed4f3f..a03ceb1170321e 100644
--- a/files/zh-cn/web/svg/attribute/height/index.md
+++ b/files/zh-cn/web/svg/attribute/height/index.md
@@ -7,59 +7,47 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/height
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    该属性在用户坐标系统中标识了一个垂直长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的高度（请阅读每个元素的文档以了解例外情况）。
    
+该属性在用户坐标系统中标识了一个垂直长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的高度（请阅读每个元素的文档以了解例外情况）。
 
-
    除了{{ SVGElement("svg") }}元素之外，别的元素都必须指定该属性，{{ SVGElement("svg") }}的高度默认是100%，而{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素的默认高度是120%。
    
+除了{{ SVGElement("svg") }}元素之外，别的元素都必须指定该属性，{{ SVGElement("svg") }}的高度默认是**100%**，而{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素的默认高度是**120%**。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<length>
    可变性Yes
    
+| 类别   | 无                                      |
+| ------ | --------------------------------------- |
+| 值     | [](/en/SVG/Content_type#Length) |
+| 可变性 | Yes                                     |
 
-
    {{ page("/zh-CN/Content_type","Length") }}
    
+{{ page("/zh-CN/Content_type","Length") }}
 
-
    示例
    
+## 示例
 
-
    <?xml version="1.0"?>
-<svg width="120" height="120"
+```html
+
+
 
-  <rect x="10" y="10" width="100" height="100"/>
-</svg>
    
+  
+
+```
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用 height 属性：
    
+下列元素可以使用 `height `属性：
 
-
      
- 
    • 滤镜元素 »
      • 
- 
    • {{ SVGElement("filter") }}
      • 
- 
    • {{ SVGElement("foreignObject") }}
      • 
- 
    • {{ SVGElement("image") }}
      • 
- 
    • {{ SVGElement("pattern") }}
      • 
- 
    • {{ SVGElement("rect") }}
      • 
- 
    • {{ SVGElement("svg") }}
      • 
- 
    • {{ SVGElement("use") }}
      • 
- 
    • {{ SVGElement("mask") }}
      • 
-
    
+- [滤镜元素](/en/SVG/Element#FilterPrimitive) »
+- {{ SVGElement("filter") }}
+- {{ SVGElement("foreignObject") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("rect") }}
+- {{ SVGElement("svg") }}
+- {{ SVGElement("use") }}
+- {{ SVGElement("mask") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/id/index.md b/files/zh-cn/web/svg/attribute/id/index.md
index c46878c276dccf..647d79cb1ac1ab 100644
--- a/files/zh-cn/web/svg/attribute/id/index.md
+++ b/files/zh-cn/web/svg/attribute/id/index.md
@@ -3,72 +3,54 @@ title: id
 slug: Web/SVG/Attribute/id
 translation_of: Web/SVG/Attribute/id
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    id 属性给予元素一个唯一名称。
    
+**`id`** 属性给予元素一个唯一名称。
 
-
    所有元素均可使用该属性。
    
+所有元素均可使用该属性。
 
-
    示例
    
+## 示例
 
-
    <svg width="120" height="120" viewPort="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-  <style type="text/css">
-    <![CDATA[
+```html
+
+  
+
+  
+
+```
+
+{{EmbedLiveSample("示例", "120", "120")}}
+
+## 用法说明
+
+| 值     |    |
+| ------ | ------ |
+| 默认值 | _None_ |
+| 可动画 | No     |
+
+- \
+  - : 指定元素的 ID。 该 ID 在节点树中必须是唯一的，不能为空字符串，并且不能包含任何空格字符。
+
+    > **备注：** 应当避免使用会被解析为 SVG 视图规范的 `id` 值（如 `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`），或被解析为用作 URL 目标片段的基本媒体片段的 `id` 值。
+
+    该属性取值必须在 XML 文档中有效。 独立的 SVG 文档使用 XML 1.0 语法，该语法指定有效的 ID 仅包含指定的字符（字母，数字和一些标点符号），开头不能是数字，点（.）字符或 连字符减号（-）。
+
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    参考
    
+## 参考
 
-
      
- 
    • HTML id
      • 
- 
    • {{SVGAttr("class")}}
      • 
-
    
+- [HTML `id`](/zh-CN/docs/Web/HTML/Global_attributes/id)
+- {{SVGAttr("class")}}
diff --git a/files/zh-cn/web/svg/attribute/image-rendering/index.md b/files/zh-cn/web/svg/attribute/image-rendering/index.md
index eb85f2bec01584..06cb8cf6f2c841 100644
--- a/files/zh-cn/web/svg/attribute/image-rendering/index.md
+++ b/files/zh-cn/web/svg/attribute/image-rendering/index.md
@@ -6,53 +6,38 @@ tags:
   - SVG 属性
 translation_of: Web/SVG/Attribute/image-rendering
 ---
-
    « SVG Attribute reference home
    
-
    image-rendering 属性向浏览器提供了一个提示，即在图片处理时，如何进行速度 vs 质量之间的权衡。
    
- 
    
- 作为一个显示属性，它也可以在 CSS 样式文件中作为属性而存在，请参考  {{ cssxref("image-rendering","CSS image-rendering") }} 获取更多的信息
    
-
    使用语境
    
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别Presentation attribute
    值auto | optimizeSpeed | optimizeQuality | inherit
    动画效果Yes
    
-
    
- 
    
-  auto
    
- 
    
-  表示用户代理可以在速度和质量间做适当的权衡，但是质量将比速度更重要一些。
    
- 
    
-  optimizeSpeed
    
- 
    
-  表示用户代理应该更注重速度。
    
- 
    
-  optimizeQuality
    
- 
    
-  表示用户代理应该更注重质量
    
-
    
-
    示例
    
-
    元素
    
-
    下面的元素可以能够使用 image-rendering 属性
    
-
      
- 
    • {{ SVGElement("image") }}
      • 
-
    
-
-
    规范
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
+
+`image-rendering` 属性向浏览器提供了一个提示，即在图片处理时，如何进行速度 vs 质量之间的权衡。
+
+作为一个显示属性，它也可以在 CSS 样式文件中作为属性而存在，请参考 {{ cssxref("image-rendering","CSS image-rendering") }} 获取更多的信息
+
+## 使用语境
+
+| 类别     | Presentation attribute                                  |
+| -------- | ------------------------------------------------------- |
+| 值       | **auto** \| optimizeSpeed \| optimizeQuality \| inherit |
+| 动画效果 | Yes                                                     |
+
+- auto
+  - : 表示用户代理可以在速度和质量间做适当的权衡，但是质量将比速度更重要一些。
+- optimizeSpeed
+  - : 表示用户代理应该更注重速度。
+- optimizeQuality
+  - : 表示用户代理应该更注重质量
+
+## 示例
+
+## 元素
+
+下面的元素可以能够使用 `image-rendering` 属性
+
+- {{ SVGElement("image") }}
+
+## 规范
 
 {{Specifications}}
 
-
    参考
    
-
      
- 
    • {{ cssxref("image-rendering","CSS image-rendering") }}
      • 
-
    
+## 参考
+
+- {{ cssxref("image-rendering","CSS image-rendering") }}
diff --git a/files/zh-cn/web/svg/attribute/in/index.md b/files/zh-cn/web/svg/attribute/in/index.md
index 6bb56bd2c67a51..f8dfefda985752 100644
--- a/files/zh-cn/web/svg/attribute/in/index.md
+++ b/files/zh-cn/web/svg/attribute/in/index.md
@@ -3,103 +3,89 @@ title: in
 slug: Web/SVG/Attribute/in
 translation_of: Web/SVG/Attribute/in
 ---
-
    « SVG Attribute reference home
    
-
-
    in 属性标识输入的原语。
    
-
-
    其值可以是下面六种关键词中的一种，或者是一个字符串匹配在同一个{{SVGElement("filter")}}元素中前面的原语的{{SVGAttr("result")}} 属性值。如果没有提供值并且这是 filter 中第一个原语，那么原语将相当于使用 SourceGraphic 作为输入值。如果没有提供值并且这不是第一个原语，那么原语将使用前面原语的 result 属性值作为输入。
    
- 
    
- 如果{{SVGAttr("result")}}的值在同一个{{SVGElement("filter")}}中出现多次，那么将使用前面的距离使用该{{SVGAttr("result")}}值的原语最近的该 result 值的原语作为输入。
    
-
-
    除了 SourceGraphic 和<filter-primitive-reference> (引用原语) , 关键词都没有在现代浏览器中实现.(译者注:SourceAlpha 也被现代浏览器支持)
    
-
-
    Usage context
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    ValueSourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
    AnimatableYes
    
-
-
    
- 
    SourceGraphic
    
- 
    该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入。
    
- 
    SourceAlpha
    
- 
    该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入. SourceAlpha 与 SourceGraphic 具有相同的规则除了 SourceAlpha 只使用元素的透明度。
    
- 
    BackgroundImage
    
- 
    该关键词表示 filter 元素当前底下的区域的图形快照将被调用。
    
- 
    BackgroundAlpha
    
- 
    跟 BackgroundImage 相同除了只使用透明度。
    
- 
    FillPaint
    
- 
    This keyword represents the value of the {{SVGAttr("fill")}} property on the target element for the filter effect. In many cases, the FillPaint is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.
    
- 
    StrokePaint
    
- 
    This keyword represents the value of the {{SVGAttr("stroke")}} property on the target element for the filter effect. In many cases, the StrokePaint is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.
    
-
    
-
-
    BackgroundImage 的解决方案
    
-
-
    我们需要使用 < feimage >原语引入一个图像混合到过滤器本身内来替代使用"BackgroundImage".
    
-
-
    HTML Content
    
-
-
    <div style="width: 420px; height: 220px;">
-<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <filter id="backgroundMultiply">
-      <!-- This will not work. -->
-      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/>
-    </filter>
-  </defs>
-  <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
-  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" />
-</svg>
-
-<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <filter id="imageMultiply">
-      <!-- This is a workaround. -->
-      <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
-      <feBlend in2="SourceGraphic" mode="multiply"/>
-    </filter>
-  </defs>
-  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/>
-</svg>
-</div>
    
-
-
    效果
    
-
-
    {{ EmbedLiveSample('Workaround_for_backgroundImage') }}
    
-
-
    元素
    
-
-
    下列元素可以使用该属性
    
-
-
      
- 
    • {{SVGElement("feBlend")}}
      • 
- 
    • {{SVGElement("feColorMatrix")}}
      • 
- 
    • {{SVGElement("feComponentTransfer")}}
      • 
- 
    • {{SVGElement("feComposite")}}
      • 
- 
    • {{SVGElement("feConvolveMatrix")}}
      • 
- 
    • {{SVGElement("feDiffuseLighting")}}
      • 
- 
    • {{SVGElement("feDisplacementMap")}}
      • 
- 
    • {{SVGElement("feGaussianBlur")}}
      • 
- 
    • {{SVGElement("feMorphology")}}
      • 
- 
    • {{SVGElement("feOffset")}}
      • 
- 
    • {{SVGElement("feSpecularLighting")}}
      • 
- 
    • {{SVGElement("feTile")}}
      • 
-
    
-
-
    规范
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
+
+in 属性标识输入的原语。
+
+其值可以是下面六种关键词中的一种，或者是一个字符串匹配在同一个{{SVGElement("filter")}}元素中前面的原语的{{SVGAttr("result")}} 属性值。如果没有提供值并且这是 filter 中第一个原语，那么原语将相当于使用 SourceGraphic 作为输入值。如果没有提供值并且这不是第一个原语，那么原语将使用前面原语的 result 属性值作为输入。
+
+如果{{SVGAttr("result")}}的值在同一个{{SVGElement("filter")}}中出现多次，那么将使用前面的距离使用该{{SVGAttr("result")}}值的原语最近的该 result 值的原语作为输入。
+
+除了 SourceGraphic 和**\ (引用原语)** , 关键词都没有在现代浏览器中实现.(译者注:SourceAlpha 也被现代浏览器支持)
+
+## Usage context
+
+| Categories | None                                                                                                                                       |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| Value      | `SourceGraphic` \| `SourceAlpha` \| `BackgroundImage` \| `BackgroundAlpha` \| `FillPaint` \| `StrokePaint` \|  |
+| Animatable | Yes                                                                                                                                        |
+
+- SourceGraphic
+  - : 该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入。
+- SourceAlpha
+  - : 该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入. SourceAlpha 与 SourceGraphic 具有相同的规则除了 SourceAlpha 只使用元素的透明度。
+- BackgroundImage
+  - : 该关键词表示 filter 元素当前底下的区域的图形快照将被调用。
+- BackgroundAlpha
+  - : 跟 BackgroundImage 相同除了只使用透明度。
+- FillPaint
+  - : This keyword represents the value of the {{SVGAttr("fill")}} property on the target element for the filter effect. In many cases, the `FillPaint` is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.
+- StrokePaint
+  - : This keyword represents the value of the {{SVGAttr("stroke")}} property on the target element for the filter effect. In many cases, the `StrokePaint` is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.
+
+## BackgroundImage 的解决方案
+
+我们需要使用 < feimage >原语引入一个图像混合到过滤器本身内来替代使用"BackgroundImage".
+
+### HTML Content
+
+```html
+
    
+
+  
+    
+      
+      
+    
+  
+  
+  
+
+
+
+  
+    
+      
+      
+      
+    
+  
+  
+
+
    
+```
+
+### 效果
+
+{{ EmbedLiveSample('Workaround_for_backgroundImage') }}
+
+## 元素
+
+下列元素可以使用该属性
+
+- {{SVGElement("feBlend")}}
+- {{SVGElement("feColorMatrix")}}
+- {{SVGElement("feComponentTransfer")}}
+- {{SVGElement("feComposite")}}
+- {{SVGElement("feConvolveMatrix")}}
+- {{SVGElement("feDiffuseLighting")}}
+- {{SVGElement("feDisplacementMap")}}
+- {{SVGElement("feGaussianBlur")}}
+- {{SVGElement("feMorphology")}}
+- {{SVGElement("feOffset")}}
+- {{SVGElement("feSpecularLighting")}}
+- {{SVGElement("feTile")}}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/index.md b/files/zh-cn/web/svg/attribute/index.md
index 2e18a29b366990..76a242f2867a2e 100644
--- a/files/zh-cn/web/svg/attribute/index.md
+++ b/files/zh-cn/web/svg/attribute/index.md
@@ -9,466 +9,416 @@ tags:
   - 矢量图形
 translation_of: Web/SVG/Attribute
 ---
-
    {{SVGRef}}
    
-
-
    SVG 元素可以通过属性来修改，这些属性指定有关如何处理或呈现元素的详细信息。 下面列出了 SVG 中所有的可用属性以及参考文档的链接，以帮助您了解哪些元素支持它们，以及它们如何工作。
    
-
-
    SVG 属性（从 A-Z 排序）
    
-
-
    A
    
-
-
      
- 
    • {{SVGAttr("accent-height")}}
      • 
- 
    • {{SVGAttr("accumulate")}}
      • 
- 
    • {{SVGAttr("additive")}}
      • 
- 
    • {{SVGAttr("alignment-baseline")}}
      • 
- 
    • {{SVGAttr("allowReorder")}}
      • 
- 
    • {{SVGAttr("alphabetic")}}
      • 
- 
    • {{SVGAttr("amplitude")}}
      • 
- 
    • {{SVGAttr("arabic-form")}}
      • 
- 
    • {{SVGAttr("ascent")}}
      • 
- 
    • {{SVGAttr("attributeName")}}
      • 
- 
    • {{SVGAttr("attributeType")}}
      • 
- 
    • {{SVGAttr("autoReverse")}}
      • 
- 
    • {{SVGAttr("azimuth")}}
      • 
-
    
-
-
    B
    
-
-
      
- 
    • {{SVGAttr("baseFrequency")}}
      • 
- 
    • {{SVGAttr("baseline-shift")}}
      • 
- 
    • {{SVGAttr("baseProfile")}}
      • 
- 
    • {{SVGAttr("bbox")}}
      • 
- 
    • {{SVGAttr("begin")}}
      • 
- 
    • {{SVGAttr("bias")}}
      • 
- 
    • {{SVGAttr("by")}}
      • 
-
    
-
-
    C
    
-
-
      
- 
    • {{SVGAttr("calcMode")}}
      • 
- 
    • {{SVGAttr("cap-height")}}
      • 
- 
    • {{SVGAttr("class")}}
      • 
- 
    • {{SVGAttr("clip")}}
      • 
- 
    • {{SVGAttr("clipPathUnits")}}
      • 
- 
    • {{SVGAttr("clip-path")}}
      • 
- 
    • {{SVGAttr("clip-rule")}}
      • 
- 
    • {{SVGAttr("color")}}
      • 
- 
    • {{SVGAttr("color-interpolation")}}
      • 
- 
    • {{SVGAttr("color-interpolation-filters")}}
      • 
- 
    • {{SVGAttr("color-profile")}}
      • 
- 
    • {{SVGAttr("color-rendering")}}
      • 
- 
    • {{SVGAttr("contentScriptType")}}
      • 
- 
    • {{SVGAttr("contentStyleType")}}
      • 
- 
    • {{SVGAttr("cursor")}}
      • 
- 
    • {{SVGAttr("cx")}}
      • 
- 
    • {{SVGAttr("cy")}}
      • 
-
    
-
-
    D
    
-
-
      
- 
    • {{SVGAttr("d")}}
      • 
- 
    • {{SVGAttr("decelerate")}}
      • 
- 
    • {{SVGAttr("descent")}}
      • 
- 
    • {{SVGAttr("diffuseConstant")}}
      • 
- 
    • {{SVGAttr("direction")}}
      • 
- 
    • {{SVGAttr("display")}}
      • 
- 
    • {{SVGAttr("divisor")}}
      • 
- 
    • {{SVGAttr("dominant-baseline")}}
      • 
- 
    • {{SVGAttr("dur")}}
      • 
- 
    • {{SVGAttr("dx")}}
      • 
- 
    • {{SVGAttr("dy")}}
      • 
-
    
-
-
    E
    
-
-
      
- 
    • {{SVGAttr("edgeMode")}}
      • 
- 
    • {{SVGAttr("elevation")}}
      • 
- 
    • {{SVGAttr("enable-background")}}
      • 
- 
    • {{SVGAttr("end")}}
      • 
- 
    • {{SVGAttr("exponent")}}
      • 
- 
    • {{SVGAttr("externalResourcesRequired")}}
      • 
-
    
-
-
    F
    
-
-
      
- 
    • {{SVGAttr("fill")}}
      • 
- 
    • {{SVGAttr("fill-opacity")}}
      • 
- 
    • {{SVGAttr("fill-rule")}}
      • 
- 
    • {{SVGAttr("filter")}}
      • 
- 
    • {{SVGAttr("filterRes")}}
      • 
- 
    • {{SVGAttr("filterUnits")}}
      • 
- 
    • {{SVGAttr("flood-color")}}
      • 
- 
    • {{SVGAttr("flood-opacity")}}
      • 
- 
    • {{SVGAttr("font-family")}}
      • 
- 
    • {{SVGAttr("font-size")}}
      • 
- 
    • {{SVGAttr("font-size-adjust")}}
      • 
- 
    • {{SVGAttr("font-stretch")}}
      • 
- 
    • {{SVGAttr("font-style")}}
      • 
- 
    • {{SVGAttr("font-variant")}}
      • 
- 
    • {{SVGAttr("font-weight")}}
      • 
- 
    • {{SVGAttr("format")}}
      • 
- 
    • {{SVGAttr("from")}}
      • 
- 
    • {{SVGAttr("fr")}}
      • 
- 
    • {{SVGAttr("fx")}}
      • 
- 
    • {{SVGAttr("fy")}}
      • 
-
    
-
-
    G
    
-
-
      
- 
    • {{SVGAttr("g1")}}
      • 
- 
    • {{SVGAttr("g2")}}
      • 
- 
    • {{SVGAttr("glyph-name")}}
      • 
- 
    • {{SVGAttr("glyph-orientation-horizontal")}}
      • 
- 
    • {{SVGAttr("glyph-orientation-vertical")}}
      • 
- 
    • {{SVGAttr("glyphRef")}}
      • 
- 
    • {{SVGAttr("gradientTransform")}}
      • 
- 
    • {{SVGAttr("gradientUnits")}}
      • 
-
    
-
-
    H
    
-
-
      
- 
    • {{SVGAttr("hanging")}}
      • 
- 
    • {{SVGAttr("height")}}
      • 
- 
    • {{SVGAttr("href")}}
      • 
- 
    • {{SVGAttr("hreflang")}}
      • 
- 
    • {{SVGAttr("horiz-adv-x")}}
      • 
- 
    • {{SVGAttr("horiz-origin-x")}}
      • 
-
    
-
-
    I
    
-
-
      
- 
    • {{SVGAttr("id")}}
      • 
- 
    • {{SVGAttr("ideographic")}}
      • 
- 
    • {{SVGAttr("image-rendering")}}
      • 
- 
    • {{SVGAttr("in")}}
      • 
- 
    • {{SVGAttr("in2")}}
      • 
- 
    • {{SVGAttr("intercept")}}
      • 
-
    
-
-
    K
    
-
-
      
- 
    • {{SVGAttr("k")}}
      • 
- 
    • {{SVGAttr("k1")}}
      • 
- 
    • {{SVGAttr("k2")}}
      • 
- 
    • {{SVGAttr("k3")}}
      • 
- 
    • {{SVGAttr("k4")}}
      • 
- 
    • {{SVGAttr("kernelMatrix")}}
      • 
- 
    • {{SVGAttr("kernelUnitLength")}}
      • 
- 
    • {{SVGAttr("kerning")}}
      • 
- 
    • {{SVGAttr("keyPoints")}}
      • 
- 
    • {{SVGAttr("keySplines")}}
      • 
- 
    • {{SVGAttr("keyTimes")}}
      • 
-
    
-
-
    L
    
-
-
      
- 
    • {{SVGAttr("lang")}}
      • 
- 
    • {{SVGAttr("lengthAdjust")}}
      • 
- 
    • {{SVGAttr("letter-spacing")}}
      • 
- 
    • {{SVGAttr("lighting-color")}}
      • 
- 
    • {{SVGAttr("limitingConeAngle")}}
      • 
- 
    • {{SVGAttr("local")}}
      • 
-
    
-
-
    M
    
-
-
      
- 
    • {{SVGAttr("marker-end")}}
      • 
- 
    • {{SVGAttr("marker-mid")}}
      • 
- 
    • {{SVGAttr("marker-start")}}
      • 
- 
    • {{SVGAttr("markerHeight")}}
      • 
- 
    • {{SVGAttr("markerUnits")}}
      • 
- 
    • {{SVGAttr("markerWidth")}}
      • 
- 
    • {{SVGAttr("mask")}}
      • 
- 
    • {{SVGAttr("maskContentUnits")}}
      • 
- 
    • {{SVGAttr("maskUnits")}}
      • 
- 
    • {{SVGAttr("mathematical")}}
      • 
- 
    • {{SVGAttr("max")}}
      • 
- 
    • {{SVGAttr("media")}}
      • 
- 
    • {{SVGAttr("method")}}
      • 
- 
    • {{SVGAttr("min")}}
      • 
- 
    • {{SVGAttr("mode")}}
      • 
-
    
-
-
    N
    
-
-
      
- 
    • {{SVGAttr("name")}}
      • 
- 
    • {{SVGAttr("numOctaves")}}
      • 
-
    
-
-
    O
    
-
-
      
- 
    • {{SVGAttr("offset")}}
      • 
- 
    • {{SVGAttr("opacity")}}
      • 
- 
    • {{SVGAttr("operator")}}
      • 
- 
    • {{SVGAttr("order")}}
      • 
- 
    • {{SVGAttr("orient")}}
      • 
- 
    • {{SVGAttr("orientation")}}
      • 
- 
    • {{SVGAttr("origin")}}
      • 
- 
    • {{SVGAttr("overflow")}}
      • 
- 
    • {{SVGAttr("overline-position")}}
      • 
- 
    • {{SVGAttr("overline-thickness")}}
      • 
-
    
-
-
    P
    
-
-
      
- 
    • {{SVGAttr("panose-1")}}
      • 
- 
    • {{SVGAttr("paint-order")}}
      • 
- 
    • {{SVGAttr("path")}}
      • 
- 
    • {{SVGAttr("pathLength")}}
      • 
- 
    • {{SVGAttr("patternContentUnits")}}
      • 
- 
    • {{SVGAttr("patternTransform")}}
      • 
- 
    • {{SVGAttr("patternUnits")}}
      • 
- 
    • {{SVGAttr("ping")}}
      • 
- 
    • {{SVGAttr("pointer-events")}}
      • 
- 
    • {{SVGAttr("points")}}
      • 
- 
    • {{SVGAttr("pointsAtX")}}
      • 
- 
    • {{SVGAttr("pointsAtY")}}
      • 
- 
    • {{SVGAttr("pointsAtZ")}}
      • 
- 
    • {{SVGAttr("preserveAlpha")}}
      • 
- 
    • {{SVGAttr("preserveAspectRatio")}}
      • 
- 
    • {{SVGAttr("primitiveUnits")}}
      • 
-
    
-
-
    R
    
-
-
      
- 
    • {{SVGAttr("r")}}
      • 
- 
    • {{SVGAttr("radius")}}
      • 
- 
    • {{SVGAttr("referrerPolicy")}}
      • 
- 
    • {{SVGAttr("refX")}}
      • 
- 
    • {{SVGAttr("refY")}}
      • 
- 
    • {{SVGAttr("rel")}}
      • 
- 
    • {{SVGAttr("rendering-intent")}}
      • 
- 
    • {{SVGAttr("repeatCount")}}
      • 
- 
    • {{SVGAttr("repeatDur")}}
      • 
- 
    • {{SVGAttr("requiredExtensions")}}
      • 
- 
    • {{SVGAttr("requiredFeatures")}}
      • 
- 
    • {{SVGAttr("restart")}}
      • 
- 
    • {{SVGAttr("result")}}
      • 
- 
    • {{SVGAttr("rotate")}}
      • 
- 
    • {{SVGAttr("rx")}}
      • 
- 
    • {{SVGAttr("ry")}}
      • 
-
    
-
-
    S
    
-
-
      
- 
    • {{SVGAttr("scale")}}
      • 
- 
    • {{SVGAttr("seed")}}
      • 
- 
    • {{SVGAttr("shape-rendering")}}
      • 
- 
    • {{SVGAttr("slope")}}
      • 
- 
    • {{SVGAttr("spacing")}}
      • 
- 
    • {{SVGAttr("specularConstant")}}
      • 
- 
    • {{SVGAttr("specularExponent")}}
      • 
- 
    • {{SVGAttr("speed")}}
      • 
- 
    • {{SVGAttr("spreadMethod")}}
      • 
- 
    • {{SVGAttr("startOffset")}}
      • 
- 
    • {{SVGAttr("stdDeviation")}}
      • 
- 
    • {{SVGAttr("stemh")}}
      • 
- 
    • {{SVGAttr("stemv")}}
      • 
- 
    • {{SVGAttr("stitchTiles")}}
      • 
- 
    • {{SVGAttr("stop-color")}}
      • 
- 
    • {{SVGAttr("stop-opacity")}}
      • 
- 
    • {{SVGAttr("strikethrough-position")}}
      • 
- 
    • {{SVGAttr("strikethrough-thickness")}}
      • 
- 
    • {{SVGAttr("string")}}
      • 
- 
    • {{SVGAttr("stroke")}}
      • 
- 
    • {{SVGAttr("stroke-dasharray")}}
      • 
- 
    • {{SVGAttr("stroke-dashoffset")}}
      • 
- 
    • {{SVGAttr("stroke-linecap")}}
      • 
- 
    • {{SVGAttr("stroke-linejoin")}}
      • 
- 
    • {{SVGAttr("stroke-miterlimit")}}
      • 
- 
    • {{SVGAttr("stroke-opacity")}}
      • 
- 
    • {{SVGAttr("stroke-width")}}
      • 
- 
    • {{SVGAttr("style")}}
      • 
- 
    • {{SVGAttr("surfaceScale")}}
      • 
- 
    • {{SVGAttr("systemLanguage")}}
      • 
-
    
-
-
    T
    
-
-
      
- 
    • {{SVGAttr("tabindex")}}
      • 
- 
    • {{SVGAttr("tableValues")}}
      • 
- 
    • {{SVGAttr("target")}}
      • 
- 
    • {{SVGAttr("targetX")}}
      • 
- 
    • {{SVGAttr("targetY")}}
      • 
- 
    • {{SVGAttr("text-anchor")}}
      • 
- 
    • {{SVGAttr("text-decoration")}}
      • 
- 
    • {{SVGAttr("text-rendering")}}
      • 
- 
    • {{SVGAttr("textLength")}}
      • 
- 
    • {{SVGAttr("to")}}
      • 
- 
    • {{SVGAttr("transform")}}
      • 
- 
    • {{SVGAttr("type")}}
      • 
-
    
-
-
    U
    
-
-
      
- 
    • {{SVGAttr("u1")}}
      • 
- 
    • {{SVGAttr("u2")}}
      • 
- 
    • {{SVGAttr("underline-position")}}
      • 
- 
    • {{SVGAttr("underline-thickness")}}
      • 
- 
    • {{SVGAttr("unicode")}}
      • 
- 
    • {{SVGAttr("unicode-bidi")}}
      • 
- 
    • {{SVGAttr("unicode-range")}}
      • 
- 
    • {{SVGAttr("units-per-em")}}
      • 
-
    
-
-
    V
    
-
-
      
- 
    • {{SVGAttr("v-alphabetic")}}
      • 
- 
    • {{SVGAttr("v-hanging")}}
      • 
- 
    • {{SVGAttr("v-ideographic")}}
      • 
- 
    • {{SVGAttr("v-mathematical")}}
      • 
- 
    • {{SVGAttr("values")}}
      • 
- 
    • {{SVGAttr("vector-effect")}}
      • 
- 
    • {{SVGAttr("version")}}
      • 
- 
    • {{SVGAttr("vert-adv-y")}}
      • 
- 
    • {{SVGAttr("vert-origin-x")}}
      • 
- 
    • {{SVGAttr("vert-origin-y")}}
      • 
- 
    • {{SVGAttr("viewBox")}}
      • 
- 
    • {{SVGAttr("viewTarget")}}
      • 
- 
    • {{SVGAttr("visibility")}}
      • 
-
    
-
-
    W
    
-
-
      
- 
    • {{SVGAttr("width")}}
      • 
- 
    • {{SVGAttr("widths")}}
      • 
- 
    • {{SVGAttr("word-spacing")}}
      • 
- 
    • {{SVGAttr("writing-mode")}}
      • 
-
    
-
-
    X
    
+{{SVGRef}}
+
+SVG 元素可以通过属性来修改，这些属性指定有关如何处理或呈现元素的详细信息。 下面列出了 SVG 中所有的可用属性以及参考文档的链接，以帮助您了解哪些元素支持它们，以及它们如何工作。
+
+## SVG 属性（从 A-Z 排序）
+
+### A
+
+- {{SVGAttr("accent-height")}}
+- {{SVGAttr("accumulate")}}
+- {{SVGAttr("additive")}}
+- {{SVGAttr("alignment-baseline")}}
+- {{SVGAttr("allowReorder")}}
+- {{SVGAttr("alphabetic")}}
+- {{SVGAttr("amplitude")}}
+- {{SVGAttr("arabic-form")}}
+- {{SVGAttr("ascent")}}
+- {{SVGAttr("attributeName")}}
+- {{SVGAttr("attributeType")}}
+- {{SVGAttr("autoReverse")}}
+- {{SVGAttr("azimuth")}}
+
+### B
+
+- {{SVGAttr("baseFrequency")}}
+- {{SVGAttr("baseline-shift")}}
+- {{SVGAttr("baseProfile")}}
+- {{SVGAttr("bbox")}}
+- {{SVGAttr("begin")}}
+- {{SVGAttr("bias")}}
+- {{SVGAttr("by")}}
+
+### C
+
+- {{SVGAttr("calcMode")}}
+- {{SVGAttr("cap-height")}}
+- {{SVGAttr("class")}}
+- {{SVGAttr("clip")}}
+- {{SVGAttr("clipPathUnits")}}
+- {{SVGAttr("clip-path")}}
+- {{SVGAttr("clip-rule")}}
+- {{SVGAttr("color")}}
+- {{SVGAttr("color-interpolation")}}
+- {{SVGAttr("color-interpolation-filters")}}
+- {{SVGAttr("color-profile")}}
+- {{SVGAttr("color-rendering")}}
+- {{SVGAttr("contentScriptType")}}
+- {{SVGAttr("contentStyleType")}}
+- {{SVGAttr("cursor")}}
+- {{SVGAttr("cx")}}
+- {{SVGAttr("cy")}}
+
+### D
+
+- {{SVGAttr("d")}}
+- {{SVGAttr("decelerate")}}
+- {{SVGAttr("descent")}}
+- {{SVGAttr("diffuseConstant")}}
+- {{SVGAttr("direction")}}
+- {{SVGAttr("display")}}
+- {{SVGAttr("divisor")}}
+- {{SVGAttr("dominant-baseline")}}
+- {{SVGAttr("dur")}}
+- {{SVGAttr("dx")}}
+- {{SVGAttr("dy")}}
+
+### E
+
+- {{SVGAttr("edgeMode")}}
+- {{SVGAttr("elevation")}}
+- {{SVGAttr("enable-background")}}
+- {{SVGAttr("end")}}
+- {{SVGAttr("exponent")}}
+- {{SVGAttr("externalResourcesRequired")}}
+
+### F
+
+- {{SVGAttr("fill")}}
+- {{SVGAttr("fill-opacity")}}
+- {{SVGAttr("fill-rule")}}
+- {{SVGAttr("filter")}}
+- {{SVGAttr("filterRes")}}
+- {{SVGAttr("filterUnits")}}
+- {{SVGAttr("flood-color")}}
+- {{SVGAttr("flood-opacity")}}
+- {{SVGAttr("font-family")}}
+- {{SVGAttr("font-size")}}
+- {{SVGAttr("font-size-adjust")}}
+- {{SVGAttr("font-stretch")}}
+- {{SVGAttr("font-style")}}
+- {{SVGAttr("font-variant")}}
+- {{SVGAttr("font-weight")}}
+- {{SVGAttr("format")}}
+- {{SVGAttr("from")}}
+- {{SVGAttr("fr")}}
+- {{SVGAttr("fx")}}
+- {{SVGAttr("fy")}}
+
+### G
+
+- {{SVGAttr("g1")}}
+- {{SVGAttr("g2")}}
+- {{SVGAttr("glyph-name")}}
+- {{SVGAttr("glyph-orientation-horizontal")}}
+- {{SVGAttr("glyph-orientation-vertical")}}
+- {{SVGAttr("glyphRef")}}
+- {{SVGAttr("gradientTransform")}}
+- {{SVGAttr("gradientUnits")}}
+
+### H
+
+- {{SVGAttr("hanging")}}
+- {{SVGAttr("height")}}
+- {{SVGAttr("href")}}
+- {{SVGAttr("hreflang")}}
+- {{SVGAttr("horiz-adv-x")}}
+- {{SVGAttr("horiz-origin-x")}}
+
+### I
+
+- {{SVGAttr("id")}}
+- {{SVGAttr("ideographic")}}
+- {{SVGAttr("image-rendering")}}
+- {{SVGAttr("in")}}
+- {{SVGAttr("in2")}}
+- {{SVGAttr("intercept")}}
+
+### K
+
+- {{SVGAttr("k")}}
+- {{SVGAttr("k1")}}
+- {{SVGAttr("k2")}}
+- {{SVGAttr("k3")}}
+- {{SVGAttr("k4")}}
+- {{SVGAttr("kernelMatrix")}}
+- {{SVGAttr("kernelUnitLength")}}
+- {{SVGAttr("kerning")}}
+- {{SVGAttr("keyPoints")}}
+- {{SVGAttr("keySplines")}}
+- {{SVGAttr("keyTimes")}}
+
+### L
+
+- {{SVGAttr("lang")}}
+- {{SVGAttr("lengthAdjust")}}
+- {{SVGAttr("letter-spacing")}}
+- {{SVGAttr("lighting-color")}}
+- {{SVGAttr("limitingConeAngle")}}
+- {{SVGAttr("local")}}
+
+### M
+
+- {{SVGAttr("marker-end")}}
+- {{SVGAttr("marker-mid")}}
+- {{SVGAttr("marker-start")}}
+- {{SVGAttr("markerHeight")}}
+- {{SVGAttr("markerUnits")}}
+- {{SVGAttr("markerWidth")}}
+- {{SVGAttr("mask")}}
+- {{SVGAttr("maskContentUnits")}}
+- {{SVGAttr("maskUnits")}}
+- {{SVGAttr("mathematical")}}
+- {{SVGAttr("max")}}
+- {{SVGAttr("media")}}
+- {{SVGAttr("method")}}
+- {{SVGAttr("min")}}
+- {{SVGAttr("mode")}}
+
+### N
+
+- {{SVGAttr("name")}}
+- {{SVGAttr("numOctaves")}}
+
+### O
+
+- {{SVGAttr("offset")}}
+- {{SVGAttr("opacity")}}
+- {{SVGAttr("operator")}}
+- {{SVGAttr("order")}}
+- {{SVGAttr("orient")}}
+- {{SVGAttr("orientation")}}
+- {{SVGAttr("origin")}}
+- {{SVGAttr("overflow")}}
+- {{SVGAttr("overline-position")}}
+- {{SVGAttr("overline-thickness")}}
+
+### P
+
+- {{SVGAttr("panose-1")}}
+- {{SVGAttr("paint-order")}}
+- {{SVGAttr("path")}}
+- {{SVGAttr("pathLength")}}
+- {{SVGAttr("patternContentUnits")}}
+- {{SVGAttr("patternTransform")}}
+- {{SVGAttr("patternUnits")}}
+- {{SVGAttr("ping")}}
+- {{SVGAttr("pointer-events")}}
+- {{SVGAttr("points")}}
+- {{SVGAttr("pointsAtX")}}
+- {{SVGAttr("pointsAtY")}}
+- {{SVGAttr("pointsAtZ")}}
+- {{SVGAttr("preserveAlpha")}}
+- {{SVGAttr("preserveAspectRatio")}}
+- {{SVGAttr("primitiveUnits")}}
+
+### R
+
+- {{SVGAttr("r")}}
+- {{SVGAttr("radius")}}
+- {{SVGAttr("referrerPolicy")}}
+- {{SVGAttr("refX")}}
+- {{SVGAttr("refY")}}
+- {{SVGAttr("rel")}}
+- {{SVGAttr("rendering-intent")}}
+- {{SVGAttr("repeatCount")}}
+- {{SVGAttr("repeatDur")}}
+- {{SVGAttr("requiredExtensions")}}
+- {{SVGAttr("requiredFeatures")}}
+- {{SVGAttr("restart")}}
+- {{SVGAttr("result")}}
+- {{SVGAttr("rotate")}}
+- {{SVGAttr("rx")}}
+- {{SVGAttr("ry")}}
+
+### S
+
+- {{SVGAttr("scale")}}
+- {{SVGAttr("seed")}}
+- {{SVGAttr("shape-rendering")}}
+- {{SVGAttr("slope")}}
+- {{SVGAttr("spacing")}}
+- {{SVGAttr("specularConstant")}}
+- {{SVGAttr("specularExponent")}}
+- {{SVGAttr("speed")}}
+- {{SVGAttr("spreadMethod")}}
+- {{SVGAttr("startOffset")}}
+- {{SVGAttr("stdDeviation")}}
+- {{SVGAttr("stemh")}}
+- {{SVGAttr("stemv")}}
+- {{SVGAttr("stitchTiles")}}
+- {{SVGAttr("stop-color")}}
+- {{SVGAttr("stop-opacity")}}
+- {{SVGAttr("strikethrough-position")}}
+- {{SVGAttr("strikethrough-thickness")}}
+- {{SVGAttr("string")}}
+- {{SVGAttr("stroke")}}
+- {{SVGAttr("stroke-dasharray")}}
+- {{SVGAttr("stroke-dashoffset")}}
+- {{SVGAttr("stroke-linecap")}}
+- {{SVGAttr("stroke-linejoin")}}
+- {{SVGAttr("stroke-miterlimit")}}
+- {{SVGAttr("stroke-opacity")}}
+- {{SVGAttr("stroke-width")}}
+- {{SVGAttr("style")}}
+- {{SVGAttr("surfaceScale")}}
+- {{SVGAttr("systemLanguage")}}
+
+### T
+
+- {{SVGAttr("tabindex")}}
+- {{SVGAttr("tableValues")}}
+- {{SVGAttr("target")}}
+- {{SVGAttr("targetX")}}
+- {{SVGAttr("targetY")}}
+- {{SVGAttr("text-anchor")}}
+- {{SVGAttr("text-decoration")}}
+- {{SVGAttr("text-rendering")}}
+- {{SVGAttr("textLength")}}
+- {{SVGAttr("to")}}
+- {{SVGAttr("transform")}}
+- {{SVGAttr("type")}}
+
+### U
+
+- {{SVGAttr("u1")}}
+- {{SVGAttr("u2")}}
+- {{SVGAttr("underline-position")}}
+- {{SVGAttr("underline-thickness")}}
+- {{SVGAttr("unicode")}}
+- {{SVGAttr("unicode-bidi")}}
+- {{SVGAttr("unicode-range")}}
+- {{SVGAttr("units-per-em")}}
+
+### V
+
+- {{SVGAttr("v-alphabetic")}}
+- {{SVGAttr("v-hanging")}}
+- {{SVGAttr("v-ideographic")}}
+- {{SVGAttr("v-mathematical")}}
+- {{SVGAttr("values")}}
+- {{SVGAttr("vector-effect")}}
+- {{SVGAttr("version")}}
+- {{SVGAttr("vert-adv-y")}}
+- {{SVGAttr("vert-origin-x")}}
+- {{SVGAttr("vert-origin-y")}}
+- {{SVGAttr("viewBox")}}
+- {{SVGAttr("viewTarget")}}
+- {{SVGAttr("visibility")}}
 
-
      
- 
    • {{SVGAttr("x")}}
      • 
- 
    • {{SVGAttr("x-height")}}
      • 
- 
    • {{SVGAttr("x1")}}
      • 
- 
    • {{SVGAttr("x2")}}
      • 
- 
    • {{SVGAttr("xChannelSelector")}}
      • 
- 
    • {{SVGAttr("xlink:actuate")}}
      • 
- 
    • {{SVGAttr("xlink:arcrole")}}
      • 
- 
    • {{SVGAttr("xlink:href")}}
      • 
- 
    • {{SVGAttr("xlink:role")}}
      • 
- 
    • {{SVGAttr("xlink:show")}}
      • 
- 
    • {{SVGAttr("xlink:title")}}
      • 
- 
    • {{SVGAttr("xlink:type")}}
      • 
- 
    • {{SVGAttr("xml:base")}}
      • 
- 
    • {{SVGAttr("xml:lang")}}
      • 
- 
    • {{SVGAttr("xml:space")}}
      • 
-
    
+### W
 
-
    Y
    
+- {{SVGAttr("width")}}
+- {{SVGAttr("widths")}}
+- {{SVGAttr("word-spacing")}}
+- {{SVGAttr("writing-mode")}}
 
-
      
- 
    • {{SVGAttr("y")}}
      • 
- 
    • {{SVGAttr("y1")}}
      • 
- 
    • {{SVGAttr("y2")}}
      • 
- 
    • {{SVGAttr("yChannelSelector")}}
      • 
-
    
+### X
 
-
    Z
    
+- {{SVGAttr("x")}}
+- {{SVGAttr("x-height")}}
+- {{SVGAttr("x1")}}
+- {{SVGAttr("x2")}}
+- {{SVGAttr("xChannelSelector")}}
+- {{SVGAttr("xlink:actuate")}}
+- {{SVGAttr("xlink:arcrole")}}
+- {{SVGAttr("xlink:href")}}
+- {{SVGAttr("xlink:role")}}
+- {{SVGAttr("xlink:show")}}
+- {{SVGAttr("xlink:title")}}
+- {{SVGAttr("xlink:type")}}
+- {{SVGAttr("xml:base")}}
+- {{SVGAttr("xml:lang")}}
+- {{SVGAttr("xml:space")}}
 
-
      
- 
    • {{SVGAttr("z")}}
      • 
- 
    • {{SVGAttr("zoomAndPan")}}
      • 
-
    
+### Y
 
-
    SVG 属性（按类别分类）
    
+- {{SVGAttr("y")}}
+- {{SVGAttr("y1")}}
+- {{SVGAttr("y2")}}
+- {{SVGAttr("yChannelSelector")}}
 
-
    Generic Attributes
    
+### Z
 
-
    核心属性
    
+- {{SVGAttr("z")}}
+- {{SVGAttr("zoomAndPan")}}
 
-
    {{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}
    
+## SVG 属性（按类别分类）
 
-
    样式属性
    
+### Generic Attributes
 
-
    {{SVGAttr("class")}}, {{SVGAttr("style")}}
    
+#### [核心属性](/docs/Web/SVG/Attribute/Core)
 
-
    条件处理属性
    
+{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}
 
-
    {{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.
    
+#### [样式属性](/docs/Web/SVG/Attribute/Styling)
 
-
+{{SVGAttr("class")}}, {{SVGAttr("style")}}
 
-
    {{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}
    
+#### 条件处理属性
 
-
    显示属性
    
+{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.
 
-
    注意，所有 SVG 显示属性都可以作为 CSS 属性来使用。
    
+### XLink 属性
 
-
    {{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}
    
+{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}
 
-
    滤镜属性
    
+### [显示属性](/docs/Web/SVG/Attribute/Presentation)
 
-
    滤镜原始属性
    
+> **备注：** 所有 SVG 显示属性都可以作为 CSS 属性来使用。
 
-
    {{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}
    
+{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}
 
-
    传递函数属性
    
+### 滤镜属性
 
-
    {{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}
    
+#### 滤镜原始属性
 
-
    动画属性
    
+{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}
 
-
    动画属性目标属性
    
+#### 传递函数属性
 
-
    {{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}
    
+{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}
 
-
    动画时间属性
    
+### 动画属性
 
-
    {{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}
    
+#### 动画属性目标属性
 
-
    动画取值属性
    
+{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}
 
-
    {{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}
    
+#### 动画时间属性
 
-
    动画额外属性
    
+{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}
 
-
    {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}
    
+#### 动画取值属性
 
-
    事件属性
    
+{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}
 
-
    动画事件属性
    
+#### 动画额外属性
 
-
    onbegin, onend, onrepeat
    
+{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}
 
-
    文档事件属性
    
+### 事件属性
 
-
    onabort, onerror, onresize, onscroll, onunload
    
+#### [动画事件属性](/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes)
 
-
    全局事件属性
    
+**`onbegin`**, **`onend`**, **`onrepeat`**
 
-
    oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting
    
+#### [文档事件属性](/docs/Web/SVG/Attribute/Events#Document_Event_Attributes)
 
-
    图像事件属性
    
+**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**
 
-
    onactivate, onfocusin, onfocusout
    
+#### [全局事件属性](/docs/Web/SVG/Attribute/Events#Global_Event_Attributes)
 
-
    参见
    
+**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**
 
-
+#### [图像事件属性](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes)
+
+**`onactivate`**, **`onfocusin`**, **`onfocusout`**
+
+## 参见
+
+- [SVG 元素参考](/zh-CN/docs/Web/SVG/Element)
+- [SVG 教程](/zh-CN/docs/Web/SVG/Tutorial)
+- [SVG 接口参考](/zh-CN/docs/Web/API/Document_Object_Model#SVG_interfaces)
diff --git a/files/zh-cn/web/svg/attribute/kernelmatrix/index.md b/files/zh-cn/web/svg/attribute/kernelmatrix/index.md
index c3e0ce4efcde70..8aa23c87b837f6 100644
--- a/files/zh-cn/web/svg/attribute/kernelmatrix/index.md
+++ b/files/zh-cn/web/svg/attribute/kernelmatrix/index.md
@@ -3,39 +3,25 @@ title: kernelMatrix
 slug: Web/SVG/Attribute/kernelMatrix
 translation_of: Web/SVG/Attribute/kernelMatrix
 ---
-
    « SVG Attribute reference home
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
 
-
    用于 order 属性定义一列<number>为{{SVGElement("feConvolveMatrix")}} 元素构成核矩阵。值之间用空格或逗号分开。<number>的数量必须等于在{{SVGAttr("order")}}属性中定义的<orderX>和<orderY>的乘积。
    
+用于 order 属性定义一列[\](/en/SVG/Content_type#Number)为{{SVGElement("feConvolveMatrix")}} 元素构成核矩阵。值之间用空格或逗号分开。[\](/en/SVG/Content_type#Number)的数量必须等于在{{SVGAttr("order")}}属性中定义的\和\的乘积。
 
-
    Usage context
    
+## Usage context
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    ValueT<.2Fvar>s"><list of number>
    AnimatableYes
    
+| Categories | None                                                                         |
+| ---------- | ---------------------------------------------------------------------------- |
+| Value      | [T<.2Fvar>s">](/en/SVG/Content_type#List-of-T<.2Fvar>s) |
+| Animatable | Yes                                                                          |
 
-
    Example
    
+## Example
 
-
    Elements
    
+## Elements
 
-
    下面的元素可以使用kernelMatrix 属性
    
+下面的元素可以使用`kernelMatrix 属性`
 
-
      
- 
    • {{ SVGElement("feConvolveMatrix") }}
      • 
-
    
+- {{ SVGElement("feConvolveMatrix") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/keytimes/index.md b/files/zh-cn/web/svg/attribute/keytimes/index.md
index fc4caa1f47d515..0887b07ed1e4e7 100644
--- a/files/zh-cn/web/svg/attribute/keytimes/index.md
+++ b/files/zh-cn/web/svg/attribute/keytimes/index.md
@@ -7,91 +7,67 @@ tags:
   - keyTimes
 translation_of: Web/SVG/Attribute/keyTimes
 ---
-
    « SVG 属性参考主页
    
+« [SVG ](/zh-CN/docs/Web/SVG/Attribute)属性参考主页
 
-
    keyTimes 属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与{{ SVGAttr("values") }}中的值一一对应，定义了{{ SVGAttr("values") }}中的值在动画中何时执行，keyTimes 列表中的每一个值都是指定在 [0-1] 之间的浮点数，表示动画的完成时间。
    
+keyTimes 属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与{{ SVGAttr("values") }}中的值一一对应，定义了{{ SVGAttr("values") }}中的值在动画中何时执行，keyTimes 列表中的每一个值都是指定在 \[0-1] 之间的浮点数，表示动画的完成时间。
 
-
    如果指定了 keyTimes 列表，那么一定有与之完全对应的{{ SVGAttr("values") }}列表。
    
+如果指定了 keyTimes 列表，那么一定有与之完全对应的{{ SVGAttr("values") }}列表。
 
-
    每一个连续的时间值必须大于等于前一个时间值。
    
+每一个连续的时间值必须大于等于前一个时间值。
 
-
    keyTimes 列表的语义取决于插值模式：
    
+keyTimes 列表的语义取决于插值模式：
 
-
      
- 
    • 对于 linear(线性) 和 spline(样条) 动画，列表中的第一个时间值必须为 0，列表的最后一个时间值必须为 1。与每个 value 关联的时间值定义了何时设置该 value，该 value 在 keyTimes 的时间 值的中间插值。
      • 
- 
    • 对于 discrete(离线) 动画，列表中的第一个值必须为 0。与每个 value 关联的时间值定义了何时设置该 value，动画函数使用该 value，直到 keyTimes 中定义的下一个时间值。
      • 
-
    
+- 对于 linear(线性) 和 spline(样条) 动画，列表中的第一个时间值必须为 0，列表的最后一个时间值必须为 1。与每个 value 关联的时间值定义了何时设置该 value，该 value 在 keyTimes 的时间 值的中间插值。
+- 对于 discrete(离线) 动画，列表中的第一个值必须为 0。与每个 value 关联的时间值定义了何时设置该 value，动画函数使用该 value，直到 keyTimes 中定义的下一个时间值。
 
-
     
    
+如果插值模式是 paced（踏步），keyTimes 属性被忽略。
 
-
     
    
+如果 duration（持续时间）不确定，则将忽略任何 keyTimes 规范。
 
-
      
-
    
+## 用法
 
-
     
    
+| 类别   | 动画值属性 |
+| ------ | ---------- |
+| 值     |      |
+| 可变性 | No         |
 
-
    如果插值模式是 paced（踏步），keyTimes 属性被忽略。
    
+## 示例
 
-
    如果 duration（持续时间）不确定，则将忽略任何 keyTimes 规范。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画值属性
    值<list>
    可变性No
    
-
-
    示例
    
-
-
    <?xml version="1.0"?>
-<svg width="120" height="120"
+```html
+
+
 
-    <circle cx="60" cy="10" r="10">
+    
 
-        <animate attributeName="cx"
+        
 
-        <animate attributeName="cy"
+        
 
-    </circle>
-</svg>
-
    
+    
+
+```
 
-
    元素
    
+## 元素
 
-
    以下元素可以使用 keyTimes 属性
    
+以下元素可以使用 `keyTimes 属性`
 
-
      
- 
    • {{ SVGElement("animate") }}
      • 
- 
    • {{ SVGElement("animateColor") }}
      • 
- 
    • {{ SVGElement("animateMotion") }}
      • 
- 
    • {{ SVGElement("animateTransform") }}
      • 
-
    
+- {{ SVGElement("animate") }}
+- {{ SVGElement("animateColor") }}
+- {{ SVGElement("animateMotion") }}
+- {{ SVGElement("animateTransform") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/letter-spacing/index.md b/files/zh-cn/web/svg/attribute/letter-spacing/index.md
index 98e35a5a959180..e119dcc9a41744 100644
--- a/files/zh-cn/web/svg/attribute/letter-spacing/index.md
+++ b/files/zh-cn/web/svg/attribute/letter-spacing/index.md
@@ -3,64 +3,54 @@ title: letter-spacing
 slug: Web/SVG/Attribute/letter-spacing
 translation_of: Web/SVG/Attribute/letter-spacing
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    The letter-spacing attribute controls spacing between text characters, in addition to any spacing from the {{SVGAttr("kerning")}} attribute.
    
+The **`letter-spacing`** attribute controls spacing between text characters, in addition to any spacing from the {{SVGAttr("kerning")}} attribute.
 
-
    If the attribute value is a unitless number (like 128), the browser processes it as a {{cssxref("length")}} in the current user coordinate system.
    
+If the attribute value is a unitless number (like `128`), the browser processes it as a {{cssxref("length")}} in the current user coordinate system.
 
-
    If the attribute value has a unit identifier, such as .25em or 1%, then the browser converts the <length> into its corresponding value in the current user coordinate system.
    
+If the attribute value has a unit identifier, such as `.25em` or `1%`, then the browser converts the \ into its corresponding value in the current user coordinate system.
 
-
    Note: As a presentation attribute, letter-spacing can be used as a CSS property. See the {{cssxref("letter-spacing", "CSS letter-spacing")}} property for more information.
    
+**Note:** As a presentation attribute, `letter-spacing` can be used as a CSS property. See the {{cssxref("letter-spacing", "CSS letter-spacing")}} property for more information.
 
-
    As a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: {{SVGElement("altGlyph")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, and {{SVGElement("tspan")}}
    
+As a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: {{SVGElement("altGlyph")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, and {{SVGElement("tspan")}}
 
-
    示例
    
+## 示例
 
-
+}
+```
 
-
    <svg viewBox="0 0 400 30" xmlns="http://www.w3.org/2000/svg">
-  <text y="20" letter-spacing="2">Bigger letter-spacing</text>
-  <text x="200" y="20" letter-spacing="-0.5">Smaller letter-spacing</text>
-</svg>
    
+```html
+
+  Bigger letter-spacing
+  Smaller letter-spacing
+
+```
 
-
    {{EmbedLiveSample("示例", "200", "30")}}
    
+{{EmbedLiveSample("示例", "200", "30")}}
 
-
    Usage notes
    
+## Usage notes
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Valuenormal | {{cssxref("length")}}
    Default valuenormal
    AnimatableYes
    
+| Value         | `normal` \| {{cssxref("length")}} |
+| ------------- | ---------------------------------------- |
+| Default value | `normal`                                 |
+| Animatable    | Yes                                      |
 
-
    For a description of the values, please refer to the CSS letter-spacing property.
    
+For a description of the values, please refer to the [CSS `letter-spacing`](/zh-CN/docs/Web/CSS/letter-spacing#Values) property.
 
-
    As of May 2019, Firefox ignores letter-spacing and renders text without.
    
+As of May 2019, Firefox [ignores `letter-spacing`](https://bugzilla.mozilla.org/show_bug.cgi?id=371787) and renders text without.
 
-
    Specifications
    
+## Specifications
 
 {{Specifications}}
 
-
    Browser compatibility
    
+## Browser compatibility
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    See also
    
+## See also
 
-
      
- 
    • {{cssxref("letter-spacing", "CSS letter-spacing")}}
      • 
-
    
+- {{cssxref("letter-spacing", "CSS letter-spacing")}}
diff --git a/files/zh-cn/web/svg/attribute/marker-end/index.md b/files/zh-cn/web/svg/attribute/marker-end/index.md
index c836497bb21685..d6ae6f9eb4a15a 100644
--- a/files/zh-cn/web/svg/attribute/marker-end/index.md
+++ b/files/zh-cn/web/svg/attribute/marker-end/index.md
@@ -3,77 +3,64 @@ title: marker-end
 slug: Web/SVG/Attribute/marker-end
 translation_of: Web/SVG/Attribute/marker-end
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    marker-end 属性将在给定形状的最终顶点绘制的箭头或者多边形标记。
    
+**`marker-end`** 属性将在给定[形状](/zh-CN/docs/Web/SVG/Element#Shape_elements)的最终顶点绘制的箭头或者多边形标记。
 
-
    对于除 SVG 的 polyline 和 path 元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果 SVG 的 marker-start 属性和 marker-end 的值都不是 none ，然后再最后一个顶点渲染两个图标。 对于一个 <path> 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 marker-end 仅在路径数据的最终顶点上呈现。
    
+对于除 SVG 的 polyline 和 path 元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果 SVG 的 marker-start 属性和 `marker-end` 的值都不是 `none` ，然后再最后一个顶点渲染两个图标。 对于一个 `` 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 `marker-end` 仅在[路径数据](/zh-CN/docs/Web/SVG/Attribute/d#Path_commands)的最终顶点上呈现。
 
-
    Note: 作为一个图像属性，marker-end 可以用作 CSS 属性。
    
+**Note:** 作为一个图像属性，`marker-end` 可以用作 CSS 属性。
 
-
    作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效:  {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}}
    
+作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}}
 
-
    示例
    
+## 示例
 
-
+}
+```
 
-
    <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <marker id="triangle" viewBox="0 0 10 10"
+```html
+
+  
+    
-
-
    {{EmbedLiveSample("示例", "200", "200")}}
    
-
-
    使用说明
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Valuenone | <marker-ref>
    Default valuenone
    AnimatableYes
    
-
-
    
- 
    none
    
- 
    表示将不会在终点绘制任何符号。
    
- 
    <marker-ref>
    
- 
    这个值表示的是对 {{SVGElement("marker")}} 元素的引用，将在终点绘制该元素.。如果引用无效，将不会绘制任何东西。
    
-
    
-
-
    规范
    
+          orient="auto">
+      
+    
+  
+  
+
+```
+
+{{EmbedLiveSample("示例", "200", "200")}}
+
+## 使用说明
+
+| Value         | `none` \| `` |
+| ------------- | ------------------------ |
+| Default value | `none`                   |
+| Animatable    | Yes                      |
+
+- `none`
+  - : 表示将不会在终点绘制任何符号。
+- ``
+  - : 这个值表示的是对 {{SVGElement("marker")}} 元素的引用，将在终点绘制该元素.。如果引用无效，将不会绘制任何东西。
+
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    另见
    
+## 另见
 
-
      
- 
    • {{SVGElement("marker")}}
      • 
- 
    • {{SVGAttr("marker-start")}}
      • 
- 
    • {{SVGAttr("marker-mid")}}
      • 
-
    
+- {{SVGElement("marker")}}
+- {{SVGAttr("marker-start")}}
+- {{SVGAttr("marker-mid")}}
diff --git a/files/zh-cn/web/svg/attribute/marker-start/index.md b/files/zh-cn/web/svg/attribute/marker-start/index.md
index b930900864be0b..0f3c97597f6450 100644
--- a/files/zh-cn/web/svg/attribute/marker-start/index.md
+++ b/files/zh-cn/web/svg/attribute/marker-start/index.md
@@ -3,77 +3,64 @@ title: marker-start
 slug: Web/SVG/Attribute/marker-start
 translation_of: Web/SVG/Attribute/marker-start
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    marker-start 属性将在给定形状的起始顶点绘制的箭头或者多边形标记
    
+**`marker-start`** 属性将在给定[形状](/zh-CN/docs/Web/SVG/Element#Shape_elements)的起始顶点绘制的箭头或者多边形标记
 
-
    对于除 SVG 的 polyline 和 path 元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果 SVG 的marker-start属性和 {{SVGAttr("marker-end")}} 的值都不是 none ，然后再最后一个顶点渲染两个图标。 对于一个 <path> 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 marker-end 仅在路径数据的起始顶点上呈现。
    
+对于除 SVG 的 polyline 和 path 元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果 SVG 的`marker-start`属性和 {{SVGAttr("marker-end")}} 的值都不是 `none` ，然后再最后一个顶点渲染两个图标。 对于一个 `` 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 `marker-end` 仅在[路径数据](/zh-CN/docs/Web/SVG/Attribute/d#Path_commands)的起始顶点上呈现。
 
-
    Note:作为一个图像属性， marker-start 可以用作 CSS 属性。
    
+**Note:**作为一个图像属性， `marker-start` 可以用作 CSS 属性。
 
-
    作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效:  {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, 和{{SVGElement("rect")}}
    
+作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, 和{{SVGElement("rect")}}
 
-
    示例
    
+## 示例
 
-
+}
+```
 
-
    <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <marker id="triangle" viewBox="0 0 10 10"
+```html
+
+  
+    
-
-
    {{EmbedLiveSample("示例", "200", "200")}}
    
-
-
    使用说明
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值none | <marker-ref>
    默认值none
    可用作与动画是
    
-
-
    
- 
    none
    
- 
    表示将不会在起点绘制任何符号。
    
- 
    <marker-ref>
    
- 
    这个值表示的是对 <marker> 元素的引用，将在起点绘制该元素.。如果引用无效，将不会绘制任何东西。
    
-
    
-
-
    规范
    
+          orient="auto">
+      
+    
+  
+  
+
+```
+
+{{EmbedLiveSample("示例", "200", "200")}}
+
+## 使用说明
+
+| 值           | `none` \| `` |
+| ------------ | ------------------------ |
+| 默认值       | `none`                   |
+| 可用作与动画 | 是                       |
+
+- `none`
+  - : 表示将不会在起点绘制任何符号。
+- ``
+  - : 这个值表示的是对 [``](/zh-CN/docs/Web/SVG/Element/marker) 元素的引用，将在起点绘制该元素.。如果引用无效，将不会绘制任何东西。
+
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    另见
    
+## 另见
 
-
      
- 
    • {{SVGElement("marker")}}
      • 
- 
    • {{SVGAttr("marker-end")}}
      • 
- 
    • {{SVGAttr("marker-mid")}}
      • 
-
    
+- {{SVGElement("marker")}}
+- {{SVGAttr("marker-end")}}
+- {{SVGAttr("marker-mid")}}
diff --git a/files/zh-cn/web/svg/attribute/mask/index.md b/files/zh-cn/web/svg/attribute/mask/index.md
index 2e8b53272b2698..c2721074ec41da 100644
--- a/files/zh-cn/web/svg/attribute/mask/index.md
+++ b/files/zh-cn/web/svg/attribute/mask/index.md
@@ -7,53 +7,35 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/mask
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    mask属性绑定的元素将应用给定的{{ SVGElement("mask") }}元素。
    
+`mask`属性绑定的元素将应用给定的{{ SVGElement("mask") }}元素。
 
-
    作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
    
+作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<FuncIRI> | none | inherit
    可变性Yes
    
+| 类别   | 外观属性                                                         |
+| ------ | ---------------------------------------------------------------- |
+| 值     | [](/en/SVG/Content_type#FuncIRI) \| **none** \| inherit |
+| 可变性 | Yes                                                              |
 
-
    
- 
    <funcIRI>
    
- 
    对同一 SVG 文档片段内部别的图形对象的一个引用 ，这个图形对象将用作遮罩。这个引用的句法与{{ cssxref("uri","CSS URI") }}的句法相同。
    
-
    
+- [\](/en/SVG/Content_type#FuncIRI)
+  - : 对同一 SVG 文档片段内部别的图形对象的一个引用 ，这个图形对象将用作遮罩。这个引用的句法与{{ cssxref("uri","CSS URI") }}的句法相同。
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用mask属性：
    
+下列元素可以使用`mask`属性：
 
-
+- [容器元素](/en/SVG/Element#Container) »
+- [图形元素](/en/SVG/Element#Graphical) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    相关内容
    
+## 相关内容
 
-
      
- 
    • {{ SVGElement("mask") }}
      • 
-
    
+- {{ SVGElement("mask") }}
diff --git a/files/zh-cn/web/svg/attribute/max/index.md b/files/zh-cn/web/svg/attribute/max/index.md
index 8624e315e69ebc..2054a73f7387e4 100644
--- a/files/zh-cn/web/svg/attribute/max/index.md
+++ b/files/zh-cn/web/svg/attribute/max/index.md
@@ -3,65 +3,51 @@ title: max
 slug: Web/SVG/Attribute/max
 translation_of: Web/SVG/Attribute/max
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    The max attribute specifies the maximum value of the active animation duration.
    
+The **`max`** attribute specifies the maximum value of the active animation duration.
 
-
    Five elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("set")}}
    
+Five elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("set")}}
 
-
    示例
    
+## 示例
 
-
+}
+```
 
-
    <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="60" cy="10" r="10">
-    <animate attributeName="cx" dur="4s" max="6s" repeatCount="indefinite"
-        values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/>
-    <animate attributeName="cy" dur="4s" max="6s" repeatCount="indefinite"
-        values="10 ; 60 ; 110 ; 60 ; 10" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/>
-  </circle>
-</svg>
    
+```html
+
+  
+    
+    
+  
+
+```
 
-
    {{EmbedLiveSample("示例", "200", "200")}}
    
+{{EmbedLiveSample("示例", "200", "200")}}
 
-
    Usage notes
    
+## Usage notes
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<clock-value>
    Default valueNone
    AnimatableNo
    
+| Value         | [``](/en-US/docs/Web/SVG/Content_type#Clock-value) |
+| ------------- | --------------------------------------------------------------- |
+| Default value | _None_                                                          |
+| Animatable    | No                                                              |
 
-
    
- 
    <clock-value>
    
- 
    
- 
    Specifies the length of the maximum value of the active duration, measured in local time. The value must be greater than 0.
    
- 
    
-
    
+- ``
+  - : Specifies the length of the maximum value of the active duration, measured in local time. The value must be greater than 0.
 
-
    Specifications
    
+## Specifications
 
 {{Specifications}}
 
-
    Browser compatibility
    
+## Browser compatibility
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    See also
    
+## See also
 
-
      
- 
    • {{SVGAttr("min")}}
      • 
-
    
+- {{SVGAttr("min")}}
diff --git a/files/zh-cn/web/svg/attribute/media/index.md b/files/zh-cn/web/svg/attribute/media/index.md
index 3510a90560da9e..1e33bca1aec5d1 100644
--- a/files/zh-cn/web/svg/attribute/media/index.md
+++ b/files/zh-cn/web/svg/attribute/media/index.md
@@ -3,64 +3,50 @@ title: media
 slug: Web/SVG/Attribute/media
 translation_of: Web/SVG/Attribute/media
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    media属性指定只有符合{{Glossary("media query")}}的样式表才会被应用。 
    
+**`media`**属性指定只有符合{{Glossary("media query")}}的样式表才会被应用。
 
-
    只有一个元素使用这个属性： {{SVGElement("style")}}
    
+只有一个元素使用这个属性： {{SVGElement("style")}}
 
-
    示例
    
+## 示例
 
-
+}
+```
 
-
    <svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
-  <style>
+```html
+
+  
+  
 
-  <text y="15">Resize the window to see the effect</text>
-  <rect y="20" width="200" height="200" />
-</svg>
    
+  Resize the window to see the effect
+  
+
+```
 
-
    {{EmbedLiveSample("示例", "200", "200")}}
    
+{{EmbedLiveSample("示例", "200", "200")}}
 
-
    Usage notes
    
+## Usage notes
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<media-query-list>
    Default valueall
    AnimatableYes
    
+| Value         | [``](/en-US/docs/Web/CSS/@media#media-query-list) |
+| ------------- | ------------------------------------------------------------------- |
+| Default value | `all`                                                               |
+| Animatable    | Yes                                                                 |
 
-
    
- 
    <media-query-list>
    
- 
    
- 
    This value holds a media query that needs to match in order for the style sheet to be applied.
    
+- ``
+  - : This value holds a media query that needs to match in order for the style sheet to be applied.如果没有指定，样式表就会被应用。
 
- 
    如果没有指定，样式表就会被应用。
    
- 
    
-
    
-
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/opacity/index.md b/files/zh-cn/web/svg/attribute/opacity/index.md
index 9955a5152f9a9d..66e88aeaa2869a 100644
--- a/files/zh-cn/web/svg/attribute/opacity/index.md
+++ b/files/zh-cn/web/svg/attribute/opacity/index.md
@@ -8,62 +8,44 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Attribute/opacity
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    opacity 属性指定了一个对象或一组对象的透明度，也就是说，元素后面的背景的透过率。
    
+opacity 属性指定了一个对象或一组对象的透明度，也就是说，元素后面的背景的透过率。
 
-
    作为一个外观属性，它可以直接用作 CSS 样式表内部的属性，请阅读 {{ cssxref("opacity","CSS opacity") }}以了解更多信息。
    
+作为一个外观属性，它可以直接用作 CSS 样式表内部的属性，请阅读 {{ cssxref("opacity","CSS opacity") }}以了解更多信息。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<opacity-value> | inherit
    可变性Yes
    
+| 类别   | 外观属性                   |
+| ------ | -------------------------- |
+| 值     |  \| inherit |
+| 可变性 | Yes                        |
 
-
    
- 
    <opacity-value>
    
- 
    一致的不透明度设置，作为一个<number>被应用到整个对象上。任何超过范围 0.0 到 1.0 的值都会被压回这个范围。0.0 表示完全透明，1.0 表示完全不透明。
    
-
    
+- \
+  - : 一致的不透明度设置，作为一个[\](/en/SVG/Content_type#Number)被应用到整个对象上。任何超过范围 0.0 到 1.0 的值都会被压回这个范围。0.0 表示完全透明，1.0 表示完全不透明。
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    以下元素可以使用opacity属性：
    
+以下元素可以使用`opacity`属性：
 
-
      
- 
    • 图形元素 »
      • 
- 
    • {{ SVGElement("a") }}
      • 
- 
    • {{ SVGElement("defs") }}
      • 
- 
    • {{ SVGElement("glyph") }}
      • 
- 
    • {{ SVGElement("g") }}
      • 
- 
    • {{ SVGElement("marker") }}
      • 
- 
    • {{ SVGElement("missing-glyph") }}
      • 
- 
    • {{ SVGElement("pattern") }}
      • 
- 
    • {{ SVGElement("svg") }}
      • 
- 
    • {{ SVGElement("switch") }}
      • 
- 
    • {{ SVGElement("symbol") }}
      • 
-
    
+- [图形元素](/en/SVG/Element#Graphics) »
+- {{ SVGElement("a") }}
+- {{ SVGElement("defs") }}
+- {{ SVGElement("glyph") }}
+- {{ SVGElement("g") }}
+- {{ SVGElement("marker") }}
+- {{ SVGElement("missing-glyph") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("svg") }}
+- {{ SVGElement("switch") }}
+- {{ SVGElement("symbol") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    参见
    
+## 参见
 
-
      
- 
    • {{ cssxref("opacity","CSS opacity") }}
      • 
-
    
+- {{ cssxref("opacity","CSS opacity") }}
diff --git a/files/zh-cn/web/svg/attribute/order/index.md b/files/zh-cn/web/svg/attribute/order/index.md
index 6fd86bd1dbb3fd..4f032e4ee56878 100644
--- a/files/zh-cn/web/svg/attribute/order/index.md
+++ b/files/zh-cn/web/svg/attribute/order/index.md
@@ -3,45 +3,31 @@ title: order
 slug: Web/SVG/Attribute/order
 translation_of: Web/SVG/Attribute/order
 ---
-
    « SVG Attribute reference home
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
 
-
    order 属性确定被用作{{ SVGElement("feConvolveMatrix") }}元素的矩阵的大小。
    
+order 属性确定被用作{{ SVGElement("feConvolveMatrix") }}元素的矩阵的大小。
 
-
    提供的值必须是大于 0 的<整数>. 第一个值<orderX>,确定矩阵的列数。第二个值<orderY>确定矩阵的行数。如果<orderY>没有指定，那么它的默认值相当于<orderX>的值。
    
+提供的值必须是大于 0 的[<整数>](/en/SVG/Content_type#Integer). 第一个值\,确定矩阵的列数。第二个值\确定矩阵的行数。如果\没有指定，那么它的默认值相当于\的值。
 
-
    一个典型的值是 order="3". 建议只使用较小的值 (例如 3); 大值可能会导致较高的 CPU 开销而且通常界面上并不能表现出高耗能造成的效果。
    
+一个典型的值是 order="3". 建议只使用较小的值 (例如 3); 大值可能会导致较高的 CPU 开销而且通常界面上并不能表现出高耗能造成的效果。
 
-
    如果未指定该属性，则其效果就如同指定值为 3.
    
+如果未指定该属性，则其效果就如同指定值为 3.
 
-
    Usage context
    
+## Usage context
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    Value<number-optional-number>
    AnimatableYes
    
+| Categories | None                                                                    |
+| ---------- | ----------------------------------------------------------------------- |
+| Value      | [](/en/SVG/Content_type#Number-optional-number) |
+| Animatable | Yes                                                                     |
 
-
    Example
    
+## Example
 
-
    Elements
    
+## Elements
 
-
    下列元素可以使用 order 属性
    
+下列元素可以使用 order 属性
 
-
      
- 
    • {{ SVGElement("feConvolveMatrix") }}
      • 
-
    
+- {{ SVGElement("feConvolveMatrix") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/origin/index.md b/files/zh-cn/web/svg/attribute/origin/index.md
index c09cdea538aaa4..71722488e14457 100644
--- a/files/zh-cn/web/svg/attribute/origin/index.md
+++ b/files/zh-cn/web/svg/attribute/origin/index.md
@@ -3,37 +3,23 @@ title: origin
 slug: Web/SVG/Attribute/origin
 translation_of: Web/SVG/Attribute/origin
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    该origin属性指定动画的运动原点。在 SVG 中无效。
    
+该**`origin`**属性指定动画的运动原点。在 SVG 中无效。
 
-
    只有一个元素正在使用此属性：{{SVGElement("animateMotion")}}
    
+只有一个元素正在使用此属性：{{SVGElement("animateMotion")}}
 
-
    总体注释
    
+## 总体注释
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值default
    默认值default
    可动画的没有
    
+| 值       | `default` |
+| -------- | --------- |
+| 默认值   | `default` |
+| 可动画的 | 没有      |
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    也可以看看
    
+## 也可以看看
 
-
+- [`origin`SMIL 动画规范中的定义](https://www.w3.org/TR/smil-animation/#MotionOriginAttribute)
diff --git a/files/zh-cn/web/svg/attribute/overflow/index.md b/files/zh-cn/web/svg/attribute/overflow/index.md
index ae374ae8dde1e1..f9265e5c926195 100644
--- a/files/zh-cn/web/svg/attribute/overflow/index.md
+++ b/files/zh-cn/web/svg/attribute/overflow/index.md
@@ -3,66 +3,48 @@ title: overflow
 slug: Web/SVG/Attribute/overflow
 translation_of: Web/SVG/Attribute/overflow
 ---
-
    « SVG Attribute reference home
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
 
-
    The overflow attribute has the same parameter values as defined for the {{ cssxref("overflow","CSS overflow property") }}. However, the following additional points apply:
    
+The `overflow` attribute has the same parameter values as defined for the {{ cssxref("overflow","CSS overflow property") }}. However, the following additional points apply:
 
-
      
- 
    • The overflow attribute only applies to elements that establish new viewports (see below), {{ SVGElement("pattern") }} elements and {{ SVGElement("marker") }} elements. For all other elements, the property has no effect.
      • 
- 
    • For those elements to which the overflow attribute can apply, if the overflow attribute has the value hidden or scroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a {{ SVGElement("clipPath") }} element whose content is a {{ SVGElement("rect") }} element which defines the equivalent rectangle, and then specifying the <uri> of this {{ SVGElement("clipPath") }} element on the {{ SVGAttr("clip-path") }} attribute for the given element.
      • 
- 
    • If the overflow attribute has a value other than hidden or scroll, the property has no effect.
      • 
- 
    • Within SVG content, the value auto is equivalent to the value visible.
      • 
- 
    • When an outermost svg element is embedded inline within HTML, if the overflow attribute has the value hidden or scroll, then the browser will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the CSS clipping rules.
      • 
- 
    • When an outermost svg element is stand-alone, the overflow attribute on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.
      • 
- 
    • The initial value for overflow as defined in CSS is visible, and this applies also to the root {{ SVGElement("svg") }} element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets the overflow attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the value hidden.
      • 
-
    
+- The `overflow` attribute only applies to elements that establish new viewports (see below), {{ SVGElement("pattern") }} elements and {{ SVGElement("marker") }} elements. For all other elements, the property has no effect.
+- For those elements to which the `overflow` attribute can apply, if the `overflow` attribute has the value `hidden` or `scroll`, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a {{ SVGElement("clipPath") }} element whose content is a {{ SVGElement("rect") }} element which defines the equivalent rectangle, and then specifying the \ of this {{ SVGElement("clipPath") }} element on the {{ SVGAttr("clip-path") }} attribute for the given element.
+- If the `overflow` attribute has a value other than `hidden` or `scroll`, the property has no effect.
+- Within SVG content, the value `auto` is equivalent to the value `visible`.
+- When an outermost svg element is embedded inline within HTML, if the `overflow` attribute has the value `hidden` or `scroll`, then the browser will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the CSS clipping rules.
+- When an outermost svg element is stand-alone, the `overflow` attribute on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.
+- The initial value for `overflow` as defined in CSS is `visible`, and this applies also to the root {{ SVGElement("svg") }} element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets the `overflow` attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the value `hidden`.
 
-
    As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("overflow","CSS overflow") }} for further information.
    
+As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("overflow","CSS overflow") }} for further information.
 
-
    Usage context
    
+## Usage context
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesPresentation attribute
    Valuevisible | hidden | scroll | auto | inherit
    AnimatableYes
    
+| Categories | Presentation attribute                         |
+| ---------- | ---------------------------------------------- |
+| Value      | visible \| hidden \| scroll \| auto \| inherit |
+| Animatable | Yes                                            |
 
-
    Example
    
+## Example
 
-
    Elements
    
+## Elements
 
-
    The following elements can use the overflow attribute
    
+The following elements can use the `overflow` attribute
 
-
      
- 
    • {{ SVGElement("svg") }}
      • 
- 
    • {{ SVGElement("symbol") }}
      • 
- 
    • {{ SVGElement("image") }}
      • 
- 
    • {{ SVGElement("foreignObject") }}
      • 
- 
    • {{ SVGElement("pattern") }}
      • 
- 
    • {{ SVGElement("marker") }}
      • 
-
    
+- {{ SVGElement("svg") }}
+- {{ SVGElement("symbol") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("foreignObject") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("marker") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    Browser compatibility
    
+## Browser compatibility
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    See also
    
+## See also
 
-
      
- 
    • {{ cssxref("overflow","CSS overflow") }}
      • 
-
    
+- {{ cssxref("overflow","CSS overflow") }}
diff --git a/files/zh-cn/web/svg/attribute/pathlength/index.md b/files/zh-cn/web/svg/attribute/pathlength/index.md
index 3dab2182aed26b..4a5a7afc279a4c 100644
--- a/files/zh-cn/web/svg/attribute/pathlength/index.md
+++ b/files/zh-cn/web/svg/attribute/pathlength/index.md
@@ -3,195 +3,113 @@ title: pathLength
 slug: Web/SVG/Attribute/pathLength
 translation_of: Web/SVG/Attribute/pathLength
 ---
-
    
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    The pathLength attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathLength/(computed value of path length).
    
+The **`pathLength`** attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio `pathLength`/(_computed value of path length_).
 
-
    This can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. Basically, all computations that require the length of the path. {{SVGAttr('stroke-dasharray')}}, for example, will assume the start of the path being 0 and the end point the value defined in the pathLength attribute.
    
+This can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. Basically, all computations that require the length of the path. {{SVGAttr('stroke-dasharray')}}, for example, will assume the start of the path being 0 and the end point the value defined in the `pathLength` attribute.
 
-
    Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, and {{SVGElement('rect')}}
    
-
    
+Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, and {{SVGElement('rect')}}
 
-
    示例
    
+## 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
-  <style>
+```html
+
+  
    
-
-
    {{EmbedLiveSample('示例', '100%', 200)}}
    
-
-
    circle
    
-
-
    For {{SVGElement('circle')}}, pathLength lets authors specify a total length for the circle, in user units.
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<number>
    Default valuenone
    AnimatableYes
    
-
-
    ellipse
    
-
-
    For {{SVGElement('ellipse')}}, pathLength lets authors specify a total length for the ellipse, in user units.
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<number>
    Default valuenone
    AnimatableYes
    
-
-
    line
    
-
-
    For {{SVGElement('line')}}, pathLength lets authors specify a total length for the line, in user units.
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<number>
    Default valuenone
    AnimatableYes
    
-
-
    path
    
-
-
    For {{SVGElement('path')}}, pathLength lets authors specify a total length for the path, in user units.
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<number>
    Default valuenone
    AnimatableYes
    
-
-
    polygon
    
-
-
    For {{SVGElement('polygon')}}, pathLength lets authors specify a total length for the shape, in user units.
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<number>
    Default valuenone
    AnimatableYes
    
-
-
    polyline
    
-
-
    For {{SVGElement('polyline')}}, pathLength lets authors specify a total length for the shape, in user units.
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<number>
    Default valuenone
    AnimatableYes
    
-
-
    rect
    
-
-
    For {{SVGElement('circle')}}, pathLength lets authors specify a total length for the rectangle, in user units.
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<number>
    Default valuenone
    AnimatableYes
    
-
-
    规范
    
+  
+
+  
+  
+
+  
+  
+
+  
+  
+
+  
+  
+
+  
+  
+
+```
+
+{{EmbedLiveSample('示例', '100%', 200)}}
+
+## circle
+
+For {{SVGElement('circle')}}, `pathLength` lets authors specify a total length for the circle, in user units.
+
+| Value         | **[](/docs/Web/SVG/Content_type#Number)** |
+| ------------- | ------------------------------------------------- |
+| Default value | _none_                                            |
+| Animatable    | Yes                                               |
+
+## ellipse
+
+For {{SVGElement('ellipse')}}, `pathLength` lets authors specify a total length for the ellipse, in user units.
+
+| Value         | **[](/docs/Web/SVG/Content_type#Number)** |
+| ------------- | ------------------------------------------------- |
+| Default value | _none_                                            |
+| Animatable    | Yes                                               |
+
+## line
+
+For {{SVGElement('line')}}, `pathLength` lets authors specify a total length for the line, in user units.
+
+| Value         | **[](/docs/Web/SVG/Content_type#Number)** |
+| ------------- | ------------------------------------------------- |
+| Default value | _none_                                            |
+| Animatable    | Yes                                               |
+
+## path
+
+For {{SVGElement('path')}}, `pathLength` lets authors specify a total length for the path, in user units.
+
+| Value         | **[](/docs/Web/SVG/Content_type#Number)** |
+| ------------- | ------------------------------------------------- |
+| Default value | _none_                                            |
+| Animatable    | Yes                                               |
+
+## polygon
+
+For {{SVGElement('polygon')}}, `pathLength` lets authors specify a total length for the shape, in user units.
+
+| Value         | **[](/docs/Web/SVG/Content_type#Number)** |
+| ------------- | ------------------------------------------------- |
+| Default value | _none_                                            |
+| Animatable    | Yes                                               |
+
+## polyline
+
+For {{SVGElement('polyline')}}, `pathLength` lets authors specify a total length for the shape, in user units.
+
+| Value         | **[](/docs/Web/SVG/Content_type#Number)** |
+| ------------- | ------------------------------------------------- |
+| Default value | _none_                                            |
+| Animatable    | Yes                                               |
+
+## rect
+
+For {{SVGElement('circle')}}, `pathLength` lets authors specify a total length for the rectangle, in user units.
+
+| Value         | **[](/docs/Web/SVG/Content_type#Number)** |
+| ------------- | ------------------------------------------------- |
+| Default value | _none_                                            |
+| Animatable    | Yes                                               |
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/patternunits/index.md b/files/zh-cn/web/svg/attribute/patternunits/index.md
index a698bc635e1720..99a402cf6cc5ea 100644
--- a/files/zh-cn/web/svg/attribute/patternunits/index.md
+++ b/files/zh-cn/web/svg/attribute/patternunits/index.md
@@ -3,68 +3,58 @@ title: patternUnits
 slug: Web/SVG/Attribute/patternUnits
 translation_of: Web/SVG/Attribute/patternUnits
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    The patternUnits attribute indicates which coordinate system to use for the geometry properties of the {{ SVGElement("pattern") }} element.
    
+The **`patternUnits`** attribute indicates which coordinate system to use for the geometry properties of the {{ SVGElement("pattern") }} element.
 
-
    Only one element is using this attribute: {{SVGElement('pattern')}}
    
+Only one element is using this attribute: {{SVGElement('pattern')}}
 
-
    示例
    
+## 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- All geometry properties are relative to the current user space -->
-  <pattern id="p1" x="12.5" y="12.5" width="25" height="25"
-           patternUnits="userSpaceOnUse">
-    <circle cx="10" cy="10" r="10" />
-  </pattern>
+```html
+
+  
+  
+    
+  
 
-  <!-- All geometry properties are relative to the target bounding box -->
-  <pattern id="p2" x=".125" y=".125" width=".25" height=".25"
-           patternUnits="objectBoundingBox">
-    <circle cx="10" cy="10" r="10" />
-  </pattern>
+  
+  
+    
+  
 
-  <!-- Left square with user space tiles -->
-  <rect x="10"  y="10" width="80" height="80"
-        fill="url(#p1)" />
+  
+  
 
-  <!-- Right square with bounding box tiles -->
-  <rect x="110" y="10" width="80" height="80"
-        fill="url(#p2)" />
-</svg>
    
+  
+  
+
+```
 
-
    {{EmbedLiveSample('示例', '100%', 200)}}
    
+{{EmbedLiveSample('示例', '100%', 200)}}
 
-
    pattern
    
+## pattern
 
-
    For {{SVGElement('pattern')}}, patternUnits defines the coordinate system in use for the geometry properties ({{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}) of the element.
    
+For {{SVGElement('pattern')}}, `patternUnits` defines the coordinate system in use for the geometry properties ({{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}) of the element.
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    ValueuserSpaceOnUse | objectBoundingBox
    Default valueobjectBoundingBox
    AnimatableYes
    
+| Value         | `userSpaceOnUse` \| `objectBoundingBox` |
+| ------------- | --------------------------------------- |
+| Default value | `objectBoundingBox`                     |
+| Animatable    | Yes                                     |
 
-
    
- 
    userSpaceOnUse
    
- 
    This value indicates that all coordinates for the geometry preoperties refer to the user coordinate system as defined when the pattern was applied.
    
- 
    objectBoundingBox
    
- 
    This value indicates that all coordinates for the geometry properties represent fractions or percentages of the bounding box of the element to which the mask is applied. A bounding box could be considered the same as if the content of the {{ SVGElement("mask") }} were bound to a "0 0 1 1" {{ SVGAttr("viewbox") }}.
    
-
    
+- userSpaceOnUse
+  - : This value indicates that all coordinates for the geometry preoperties refer to the user coordinate system as defined when the pattern was applied.
+- objectBoundingBox
+  - : This value indicates that all coordinates for the geometry properties represent fractions or percentages of the bounding box of the element to which the mask is applied. A bounding box could be considered the same as if the content of the {{ SVGElement("mask") }} were bound to a "`0 0 1 1`" {{ SVGAttr("viewbox") }}.
 
-
    Specifications
    
+## Specifications
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.md b/files/zh-cn/web/svg/attribute/pointer-events/index.md
index 3c95fa252c0137..2b13527466a490 100644
--- a/files/zh-cn/web/svg/attribute/pointer-events/index.md
+++ b/files/zh-cn/web/svg/attribute/pointer-events/index.md
@@ -3,37 +3,42 @@ title: pointer-events
 slug: Web/SVG/Attribute/pointer-events
 translation_of: Web/SVG/Attribute/pointer-events
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    pointer-events 属性是一个展示属性，用于定义元素是否或何时可能是鼠标事件的目标元素。
    
+pointer-events 属性是一个展示属性，用于定义元素是否或何时可能是鼠标事件的目标元素。
 
-
    Note: 作为一个展示属性， {{cssxref('pointer-events')}} 可以被当做 CSS 属性使用。
    
+**Note:** 作为一个展示属性， {{cssxref('pointer-events')}} 可以被当做 CSS 属性使用。
 
-
    示例
    
+## 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
-  <!--
+```html
+
+  
+  
+  
 
-  <!--
+  
+  
+  
+
+```
+
+```js
+window.addEventListener('mouseup', (e) => {
   // 在 #000000 和 #FFFFFF 之间随机选取一个颜色
   const color = Math.round(Math.random() * 0xFFFFFF)
 
@@ -42,37 +47,26 @@ translation_of: Web/SVG/Attribute/pointer-events
 
   // 将 color 变量设置的颜色应用到实际点击的元素上
   e.target.style.fill = fill
-})
    
+})
+```
 
-
    {{EmbedLiveSample('示例', '100%', 150)}}
    
+{{EmbedLiveSample('示例', '100%', 150)}}
 
-
    作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的 23 个元素: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('switch')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tspan')}}, {{SVGElement('use')}}
    
+作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的 23 个元素: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('switch')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tspan')}}, {{SVGElement('use')}}
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none
    默认值visiblePainted
    是否可动画Yes
    
+| 值         | `bounding-box` \| `visiblePainted` \| `visibleFill` \| `visibleStroke` \| `visible` \| `painted` \| `fill` \| `stroke` \| `all` \| `none` |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| 默认值     | `visiblePainted`                                                                                                                          |
+| 是否可动画 | Yes                                                                                                                                       |
 
-
    为了详细了解每个可能的值，请参考 CSS 文档 {{cssxref('pointer-events')}}.
    
+_为了详细了解每个可能的值，请参考 CSS 文档 {{cssxref('pointer-events')}}._
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/points/index.md b/files/zh-cn/web/svg/attribute/points/index.md
index 813832cf0ef7eb..d16e14674f4cdb 100644
--- a/files/zh-cn/web/svg/attribute/points/index.md
+++ b/files/zh-cn/web/svg/attribute/points/index.md
@@ -8,48 +8,35 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Attribute/points
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    points属性定义了用来画一个{{ SVGElement("polyline") }}元素或画一个 SVGElement("polygon") }}元素的点的数列。
    
+`points`属性定义了用来画一个{{ SVGElement("polyline") }}元素或画一个 SVGElement("polygon") }}元素的点的数列。
 
-
    每个点用用户坐标系统中的一个 X 坐标和 Y 坐标定义。用逗号分开每个点的 X 和 Y 坐标标记是一个常用实践（但是并非必要），使用空间标注每个点。
    
+每个点用用户坐标系统中的一个 X 坐标和 Y 坐标定义。用逗号分开每个点的 X 和 Y 坐标标记是一个常用实践（但是并非必要），使用空间标注每个点。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<list-of-points>
    可变性Yes
    
+| 类别   | 无               |
+| ------ | ---------------- |
+| 值     |  |
+| 可变性 | Yes              |
 
-
    示例
    
+## 示例
 
-
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <polygon points="100,10 250,150 200,110"
-           style="fill:lime;stroke:purple;stroke-width:1" />
-</svg>
-
    
+```xml
+
+  
+
+```
 
-
    元素
    
+## 元素
 
-
    以下元素可以使用points属性：
    
+以下元素可以使用`points`属性：
 
-
      
- 
    • {{ SVGElement("polyline") }}
      • 
- 
    • {{ SVGElement("polygon") }}
      • 
-
    
+- {{ SVGElement("polyline") }}
+- {{ SVGElement("polygon") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/presentation/index.md b/files/zh-cn/web/svg/attribute/presentation/index.md
index c77bf0526f4c20..b2cc384211ac63 100644
--- a/files/zh-cn/web/svg/attribute/presentation/index.md
+++ b/files/zh-cn/web/svg/attribute/presentation/index.md
@@ -3,270 +3,264 @@ title: SVG Presentation Attributes
 slug: Web/SVG/Attribute/Presentation
 translation_of: Web/SVG/Attribute/Presentation
 ---
-
    SVG 表现属性是能够被用在 SVG 元素属性上的 CSS 属性。
    
+SVG 表现属性是能够被用在 SVG 元素属性上的 CSS 属性。
 
-
+- [alignment-baseline](#attr-alignment-baseline)
+- [baseline-shift](#attr-baseline-shift)
+- [clip](#attr-clip)
+- [clip-path](#attr-clip-path)
+- [clip-rule](#attr-clip-rule)
+- [color](#attr-color)
+- [color-interpolation](#attr-color-interpolation)
+- [color-interpolation-filters](#attr-color-interpolation-filters)
+- [color-profile](#attr-color-profile)
+- [color-rendering](#attr-color-rendering)
+- [cursor](#attr-cursor)
+- [direction](#attr-direction)
+- [display](#attr-display)
+- [dominant-baseline](#attr-dominant-baseline)
+- [enable-background](#attr-enable-background)
+- [fill](#attr-fill)
+- [fill-opacity](#attr-fill-opacity)
+- [fill-rule](#attr-fill-rule)
+- [filter](#attr-filter)
+- [flood-color](#attr-flood-color)
+- [flood-opacity](#attr-flood-opacity)
+- [font-family](#attr-font-family)
+- [font-size](#attr-font-size)
+- [font-size-adjust](#attr-font-size-adjust)
+- [font-stretch](#attr-font-stretch)
+- [font-style](#attr-font-style)
+- [font-variant](#attr-font-variant)
+- [font-weight](#attr-font-weight)
+- [glyph-orientation-horizontal](#attr-glyph-orientation-horizontal)
+- [glyph-orientation-vertical](#attr-glyph-orientation-vertical)
+- [image-rendering](#attr-image-rendering)
+- [kerning](#attr-kerning)
+- [letter-spacing](#attr-letter-spacing)
+- [lighting-color](#attr-lighting-color)
+- [marker-end](#attr-marker-end)
+- [marker-mid](#attr-marker-mid)
+- [marker-start](#attr-marker-start)
+- [mask](#attr-mask)
+- [opacity](#attr-opacity)
+- [overflow](#attr-overflow)
+- [pointer-events](#attr-pointer-events)
+- [shape-rendering](#attr-shape-rendering)
+- [solid-color](#attr-solid-color)
+- [solid-opacity](#attr-solid-opacity)
+- [stop-color](#attr-stop-color)
+- [stop-opacity](#attr-stop-opacity)
+- [stroke](#attr-stroke)
+- [stroke-dasharray](#attr-stroke-dasharray)
+- [stroke-dashoffset](#attr-stroke-dashoffset)
+- [stroke-linecap](#attr-stroke-linecap)
+- [stroke-linejoin](#attr-stroke-linejoin)
+- [stroke-miterlimit](#attr-stroke-miterlimit)
+- [stroke-opacity](#attr-stroke-opacity)
+- [stroke-width](#attr-stroke-width)
+- [text-anchor](#attr-text-anchor)
+- [text-decoration](#attr-text-decoration)
+- [text-rendering](#attr-text-rendering)
+- [transform](#attr-transform)
+- [unicode-bidi](#attr-unicode-bidi)
+- [vector-effect](#attr-vector-effect)
+- [visibility](#attr-visibility)
+- [word-spacing](#attr-word-spacing)
+- [writing-mode](#attr-writing-mode)
 
-
    Attributes
    
+## Attributes
 
-
    
- 
    {{SVGAttr('alignment-baseline')}}
    
- 
    It specifies how an object is aligned along the font baseline with respect to its parent.
    
- Value: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; Animatable: Yes
    
- 
    {{SVGAttr('baseline-shift')}}
    
- 
    It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.
    
- Value: auto|baseline|super|sub|<percentage>|<length>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('clip')}} {{deprecated_inline('css')}}
    
- 
    It defines what portion of an element is visible.
    
- Value: auto|{{cssxref("shape")}}|inherit; Animatable: Yes
    
- 
    {{SVGAttr('clip-path')}}
    
- 
    It binds the element it is applied to with a given {{SVGElement('clipPath')}} element.
    
- Value: none|<FuncIRI>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('clip-rule')}}
    
- 
    It indicates how to determine what side of a path is inside a shape in order to know how a {{SVGElement('clipPath')}} should clip its target.
    
- Value: nonezero|evenodd|inherit; Animatable: Yes
    
- 
    {{SVGAttr('color')}}
    
- 
    It provides a potential indirect value (currentColor) for the fill, stroke, stop-color, flood-color and lighting-color presentation attributes.
    
- Value: <color>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('color-interpolation')}}
    
- 
    It specifies the color space for gradient interpolations, color animations, and alpha compositing.
    
- Value: auto|sRGB|linearRGB|inherit; Animatable: Yes
    
- 
    {{SVGAttr('color-interpolation-filters')}}
    
- 
    It specifies the color space for imaging operations performed via filter effects.
    
- Value: auto|sRGB|linearRGB|inherit; Animatable: Yes
    
- 
    {{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}
    
- 
    It defines which color profile a raster image included through the {{SVGElement('image')}} element should use.
    
- Value: auto|sRGB|linearRGB|<name>|<IRI>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('color-rendering')}}
    
- 
    It provides a hint to the browser about how to optimize its color interpolation and compositing operations.
    
- Value: auto|optimizeSpeed|optimizeQuality|inherit; Animatable: Yes
    
- 
    {{SVGAttr('cursor')}}
    
- 
    It specifies the mouse cursor displayed when the mouse pointer is over an element.
    
- Value: <FuncIRI>|<keywords>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('direction')}}
    
- 
    It specifies the base writing direction of text.
    
- Value: ltr|rtl|inherit; Animatable: Yes
    
- 
    {{SVGAttr('display')}}
    
- 
    It allows to control the rendering of graphical or container elements.
    
- Value: see css {{cssxref('display')}}; Animatable: Yes
    
- 
    {{SVGAttr('dominant-baseline')}}
    
- 
    It defines the baseline used to align the box’s text and inline-level contents.
    
- Value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top; Animatable: Yes
    
- 
    {{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}
    
- 
    It tells the browser how to manage the accumulation of the background image.
    
- Value: accumulate|new|inherit; Animatable: No
    
- 
    {{SVGAttr('fill')}}
    
- 
    It defines the color of the inside of the graphical element it applies to.
    
- Value: <paint>; Animatable: Yes
    
- 
    {{SVGAttr('fill-opacity')}}
    
- 
    It specifies the opacity of the color or the content the current object is filled with.
    
- Value: <number>|<percentage>; Animatable: Yes
    
- 
    {{SVGAttr('fill-rule')}}
    
- 
    It indicates how to determine what side of a path is inside a shape.
    
- Value: nonzero|evenodd|inherit; Animatable: Yes
    
- 
    {{SVGAttr('filter')}}
    
- 
    It defines the filter effects defined by the {{SVGElement('filter')}} element that shall be applied to its element.
    
- Value: <FuncIRI>|none|inherit; Animatable: Yes
    
- 
    {{SVGAttr('flood-color')}}
    
- 
    It indicates what color to use to flood the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.
    
- Value: <color>; Animatable: Yes
    
- 
    {{SVGAttr('flood-opacity')}}
    
- 
    It indicates the opacity value to use across the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.
    
- Value: <number>|<percentage>; Animatable: Yes
    
- 
    {{SVGAttr('font-family')}}
    
- 
    It indicates which font family will be used to render the text of the element.
    
- Value: see css {{cssxref('font-family')}}; Animatable: Yes
    
- 
    {{SVGAttr('font-size')}}
    
- 
    It specifies the size of the font.
    
- Value: see css {{cssxref('font-size')}}; Animatable: Yes
    
- 
    {{SVGAttr('font-size-adjust')}}
    
- 
    It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters.
    
- Value: <number>|none|inherit; Animatable: Yes
    
- 
    {{SVGAttr('font-stretch')}}
    
- 
    It selects a normal, condensed, or expanded face from a font.
    
- Value: see css {{cssxref('font-stretch')}}; Animatable: Yes
    
- 
    {{SVGAttr('font-style')}}
    
- 
    It specifies whether a font should be styled with a normal, italic, or oblique face from its {{SVGAttr('font-family')}}.
    
- Value: normal|italic|oblique; Animatable: Yes
    
- 
    {{SVGAttr('font-variant')}}
    
- 
    It specifies whether a font should be used with some of their variation such as small caps or ligatures.
    
- Value: see css {{cssxref('font-variant')}}; Animatable: Yes
    
- 
    {{SVGAttr('font-weight')}}
    
- 
    It specifies the weight (or boldness) of the font.
    
- Value: normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; Animatable: Yes
    
- 
    {{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}
    
- 
    It controls glyph orientation when the inline-progression-direction is horizontal.
    
- Value: <angle>|inherit; Animatable: No
    
- 
    {{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}
    
- 
    It controls glyph orientation when the inline-progression-direction is vertical.
    
- Value: auto|<angle>|inherit; Animatable: No
    
- 
    {{SVGAttr('image-rendering')}}
    
- 
    It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.
    
- Value: auto|optimizeQuality|optimizeSpeed; Animatable: Yes
    
- 
    {{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}
    
- 
    It indicates whether the browser should adjust inter-glyph spacing.
    
- Value: auto|<length>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('letter-spacing')}}
    
- 
    It controls spacing between text characters.
    
- Value: normal|<length>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('lighting-color')}}
    
- 
    It defines the color of the light source for filter primitives elements {{SVGElement('feDiffuseLighting')}} and {{SVGElement('feSpecularLighting')}}.
    
- Value: <color>; Animatable: Yes
    
- 
    {{SVGAttr('marker-end')}}
    
- 
    It defines the arrowhead or polymarker that will be drawn at the final vertex of the given {{SVGElement('path')}} element or basic shape.
    
- Value: <FuncIRI>|none|inherit; Animatable: Yes
    
- 
    {{SVGAttr('marker-mid')}}
    
- 
    It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given {{SVGElement('path')}} element or basic shape.
    
- Value: <FuncIRI>|none|inherit; Animatable: Yes
    
- 
    {{SVGAttr('marker-start')}}
    
- 
    It defines the arrowhead or polymarker that will be drawn at the first vertex of the given {{SVGElement('path')}} element or basic shape.
    
- Value: <FuncIRI>|none|inherit; Animatable: Yes
    
- 
    {{SVGAttr('mask')}}
    
- 
    It alters the visibility of an element by either masking or clipping the image at specific points.
    
- Value: see css {{cssxref('mask')}}; Animatable: Yes
    
- 
    {{SVGAttr('opacity')}}
    
- 
    It specifies the transparency of an object or a group of objects.
    
- Value: <opacity-value>; Animatable: Yes
    
- 
    {{SVGAttr('overflow')}}
    
- 
    Specifies whether the content of a block-level element is clipped when it overflows the element's box.
    
- Value: visible|hidden|scroll|auto|inherit; Animatable: Yes
    
- 
    {{SVGAttr('pointer-events')}}
    
- 
    Defines whether or when an element may be the target of a mouse event.
    
- Value: bounding-box|visiblePainted|visibleFil|visibleStroke|visible |painted|fill|stroke|all|none; Animatable: Yes
    
- 
    {{SVGAttr('shape-rendering')}}
    
- 
    Hints about what tradeoffs to make as the browser renders {{SVGElement('path')}} element or basic shapes.
    
- Value: auto|optimizeSpeed|crispEdges|geometricPrecision |inherit; Animatable: Yes
    
- 
    {{SVGAttr('solid-color')}}
    
- 
    -
    
- Value:; Animatable: -
    
- 
    {{SVGAttr('solid-opacity')}}
    
- 
    -
    
- Value:; Animatable: -
    
- 
    {{SVGAttr('stop-color')}}
    
- 
    Indicates what color to use at that gradient stop.
    
- Value: currentColor|<color>|<icccolor>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('stop-opacity')}}
    
- 
    Defines the opacity of a given gradient stop.
    
- Value: <opacity-value>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('stroke')}}
    
- 
    Defines the color used to paint the outline of the shape.
    
- Value: <paint>; Animatable: Yes
    
- 
    {{SVGAttr('stroke-dasharray')}}
    
- 
    Defines the pattern of dashes and gaps used to paint the outline of the shape.
    
- Value: none|<dasharray>; Animatable: Yes
    
- 
    {{SVGAttr('stroke-dashoffset')}}
    
- 
    Defines an offset on the rendering of the associated dash array.
    
- Value: <percentage>|<length>; Animatable: Yes
    
- 
    {{SVGAttr('stroke-linecap')}}
    
- 
    Defines the shape to be used at the end of open subpaths when they are stroked.
    
- Value: butt|round|square; Animatable: Yes
    
- 
    {{SVGAttr('stroke-linejoin')}}
    
- 
    Defines the shape to be used at the corners of paths when they are stroked.
    
- Value: arcs|bevel|miter|miter-clip|round; Animatable: Yes
    
- 
    {{SVGAttr('stroke-miterlimit')}}
    
- 
    Defines a limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }} used to draw a miter join.
    
- Value: <number>; Animatable: Yes
    
- 
    {{SVGAttr('stroke-opacity')}}
    
- 
    Defines the opacity of the stroke of a shape.
    
- Value: <opacity-value>|<percentage>; Animatable: Yes
    
- 
    {{SVGAttr('stroke-width')}}
    
- 
    Defines the width of the stroke to be applied to the shape.
    
- Value: <length>|<percentage>; Animatable: Yes
    
- 
    {{SVGAttr('text-anchor')}}
    
- 
    Defines the vertical alignment a string of text.
    
- Value: start|middle|end|inherit; Animatable: Yes
    
- 
    {{SVGAttr('text-decoration')}}
    
- 
    Sets the appearance of decorative lines on text.
    
- Value: none|underline|overline|line-through|blink|inherit; Animatable: Yes
    
- 
    {{SVGAttr('text-rendering')}}
    
- 
    Hints about what tradeoffs to make as the browser renders text.
    
- Value: auto|optimizeSpeed|optimizeLegibility|geometricPrecision|inherit; Animatable: Yes
    
- 
    {{SVGAttr('transform')}}
    
- 
    Defines a list of transform definitions that are applied to an element and the element's children.
    
- Value: <transform-list>; Animatable: Yes
    
- 
    {{SVGAttr('unicode-bidi')}}
    
- 
    -
    
- Value:; Animatable: -
    
- 
    {{SVGAttr('vector-effect')}}
    
- 
    Specifies the vector effect to use when drawing an object.
    
- Value: default|non-scaling-stroke|inherit|<uri>; Animatable: Yes
    
- 
    {{SVGAttr('visibility')}}
    
- 
    Lets you control the visibility of graphical elements.
    
- Value: visible|hidden|collapse|inherit; Animatable: Yes
    
- 
    {{SVGAttr('word-spacing')}}
    
- 
    Specifies spacing behavior between words.
    
- Value: <length>|inherit; Animatable: Yes
    
- 
    {{SVGAttr('writing-mode')}}
    
- 
    Specifies whether the initial inline-progression-direction for a {{SVGElement('text')}} element shall be left-to-right, right-to-left, or top-to-bottom.
    
- Value: lr-tb|rl-tb|tb-rl|lr|rl|tb|inherit; Animatable: Yes
    
-
    
+- {{SVGAttr('alignment-baseline')}}
+  - : It specifies how an object is aligned along the font baseline with respect to its parent.
+    _Value_: **`auto`**|`baseline`|`before-edge`|`text-before-edge`|`middle`|`central`|`after-edge`|`text-after-edge`|`ideographic`|`alphabetic`|`hanging`|`mathematical`|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('baseline-shift')}}
+  - : It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.
+    _Value_: **`auto`**|`baseline`|`super`|`sub`|[\](/docs/Web/SVG/Content_type#Percentage)|[\](/docs/Web/SVG/Content_type#Length)|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('clip')}} {{deprecated_inline('css')}}
+  - : It defines what portion of an element is visible.
+    _Value_: **`auto`**|{{cssxref("shape")}}|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('clip-path')}}
+  - : It binds the element it is applied to with a given {{SVGElement('clipPath')}} element.
+    _Value_: **`none`**|[\](/docs/Web/SVG/Content_type#FuncIRI)|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('clip-rule')}}
+  - : It indicates how to determine what side of a path is inside a shape in order to know how a {{SVGElement('clipPath')}} should clip its target.
+    _Value_: **`nonezero`**|`evenodd`|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('color')}}
+  - : It provides a potential indirect value (`currentColor`) for the `fill`, `stroke`, `stop-color`, `flood-color` and `lighting-color` presentation attributes.
+    _Value_: [\](/docs/Web/SVG/Content_type#Color)|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('color-interpolation')}}
+  - : It specifies the color space for gradient interpolations, color animations, and alpha compositing.
+    _Value_: `auto`|**`sRGB`**|`linearRGB`|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('color-interpolation-filters')}}
+  - : It specifies the color space for imaging operations performed via filter effects.
+    _Value_: `auto`|`sRGB`|**`linearRGB`**|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}
+  - : It defines which color profile a raster image included through the {{SVGElement('image')}} element should use.
+    _Value_: `auto`|`sRGB`|`linearRGB`|[\](/docs/Web/SVG/Content_type#Name)|[\](/docs/Web/SVG/Content_type#IRI)|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('color-rendering')}}
+  - : It provides a hint to the browser about how to optimize its color interpolation and compositing operations.
+    _Value_: **`auto`**|`optimizeSpeed`|`optimizeQuality`|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('cursor')}}
+  - : It specifies the mouse cursor displayed when the mouse pointer is over an element.
+    _Value_: [\](/docs/Web/SVG/Content_type#FuncIRI)|[\](/docs/Web/CSS/cursor#Values)|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('direction')}}
+  - : It specifies the base writing direction of text.
+    _Value_: **`ltr`**|`rtl`|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('display')}}
+  - : It allows to control the rendering of graphical or container elements.
+    _Value_: see css {{cssxref('display')}}; _Animatable_: **Yes**
+- {{SVGAttr('dominant-baseline')}}
+  - : It defines the baseline used to align the box’s text and inline-level contents.
+    _Value_: `auto`|`text-bottom`|`alphabetic`|`ideographic`|`middle`|`central`| `mathematical`|`hanging`|`text-top`; _Animatable_: **Yes**
+- {{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}
+  - : It tells the browser how to manage the accumulation of the background image.
+    _Value_: **`accumulate`**|`new`|`inherit`; _Animatable_: **No**
+- {{SVGAttr('fill')}}
+  - : It defines the color of the inside of the graphical element it applies to.
+    _Value_: [\](/docs/Web/SVG/Content_type#Paint); _Animatable_: **Yes**
+- {{SVGAttr('fill-opacity')}}
+  - : It specifies the opacity of the color or the content the current object is filled with.
+    _Value_: [\](/docs/Web/SVG/Content_type#Number)|[\](/docs/Web/SVG/Content_type#Percentage); _Animatable_: **Yes**
+- {{SVGAttr('fill-rule')}}
+  - : It indicates how to determine what side of a path is inside a shape.
+    _Value_: **`nonzero`**|`evenodd`|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('filter')}}
+  - : It defines the filter effects defined by the {{SVGElement('filter')}} element that shall be applied to its element.
+    _Value_: [\](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('flood-color')}}
+  - : It indicates what color to use to flood the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.
+    _Value_: [\](/docs/Web/SVG/Content_type#Color); _Animatable_: **Yes**
+- {{SVGAttr('flood-opacity')}}
+  - : It indicates the opacity value to use across the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.
+    _Value_: [\](/docs/Web/SVG/Content_type#Number)|[\](/docs/Web/SVG/Content_type#Percentage); _Animatable_: **Yes**
+- {{SVGAttr('font-family')}}
+  - : It indicates which font family will be used to render the text of the element.
+    _Value_: see css {{cssxref('font-family')}}; _Animatable_: **Yes**
+- {{SVGAttr('font-size')}}
+  - : It specifies the size of the font.
+    _Value_: see css {{cssxref('font-size')}}; _Animatable_: **Yes**
+- {{SVGAttr('font-size-adjust')}}
+  - : It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters.
+    _Value_: [\](/docs/Web/SVG/Content_type#Number)|**`none`**|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('font-stretch')}}
+  - : It selects a normal, condensed, or expanded face from a font.
+    _Value_: see css {{cssxref('font-stretch')}}; _Animatable_: **Yes**
+- {{SVGAttr('font-style')}}
+  - : It specifies whether a font should be styled with a normal, italic, or oblique face from its {{SVGAttr('font-family')}}.
+    _Value_: **`normal`**|`italic`|`oblique`; _Animatable_: **Yes**
+- {{SVGAttr('font-variant')}}
+  - : It specifies whether a font should be used with some of their variation such as small caps or ligatures.
+    _Value_: see css {{cssxref('font-variant')}}; _Animatable_: **Yes**
+- {{SVGAttr('font-weight')}}
+  - : It specifies the weight (or boldness) of the font.
+    _Value_: **`normal`**|`bold`|`lighter`|`bolder`|`100`|`200`|`300`|`400`|`500`|`600`|`700`|`800`|`900`; _Animatable_: **Yes**
+- {{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}
+  - : It controls glyph orientation when the inline-progression-direction is horizontal.
+    _Value_: [\](/docs/Web/SVG/Content_type#Angle)|`inherit`; _Animatable_: **No**
+- {{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}
+  - : It controls glyph orientation when the inline-progression-direction is vertical.
+    _Value_: **`auto`**|[\](/docs/Web/SVG/Content_type#Angle)|`inherit`; _Animatable_: **No**
+- {{SVGAttr('image-rendering')}}
+  - : It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.
+    _Value_: **`auto`**|`optimizeQuality`|`optimizeSpeed`; _Animatable_: **Yes**
+- {{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}
+  - : It indicates whether the browser should adjust inter-glyph spacing.
+    _Value_: **`auto`**|[\](/docs/Web/SVG/Content_type#Length)|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('letter-spacing')}}
+  - : It controls spacing between text characters.
+    _Value_: **`normal`**|[\](/docs/Web/SVG/Content_type#Length)|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('lighting-color')}}
+  - : It defines the color of the light source for filter primitives elements {{SVGElement('feDiffuseLighting')}} and {{SVGElement('feSpecularLighting')}}.
+    _Value_: [\](/docs/Web/SVG/Content_type#Color); _Animatable_: **Yes**
+- {{SVGAttr('marker-end')}}
+  - : It defines the arrowhead or polymarker that will be drawn at the final vertex of the given {{SVGElement('path')}} element or basic shape.
+    _Value_: [\](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('marker-mid')}}
+  - : It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given {{SVGElement('path')}} element or basic shape.
+    _Value_: [\](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('marker-start')}}
+  - : It defines the arrowhead or polymarker that will be drawn at the first vertex of the given {{SVGElement('path')}} element or basic shape.
+    _Value_: [\](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('mask')}}
+  - : It alters the visibility of an element by either masking or clipping the image at specific points.
+    _Value_: see css {{cssxref('mask')}}; _Animatable_: **Yes**
+- {{SVGAttr('opacity')}}
+  - : It specifies the transparency of an object or a group of objects.
+    _Value_: [\](/docs/Web/SVG/Content_type#Opacity_value); _Animatable_: **Yes**
+- {{SVGAttr('overflow')}}
+  - : Specifies whether the content of a block-level element is clipped when it overflows the element's box.
+    _Value_: **`visible`**|`hidden|scroll`|`auto`|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('pointer-events')}}
+  - : Defines whether or when an element may be the target of a mouse event.
+    _Value_: `bounding-box`|**`visiblePainted`**|`visibleFil`|`visibleStroke`|`visible` |`painted`|`fill`|`stroke`|`all`|`none`; _Animatable_: **Yes**
+- {{SVGAttr('shape-rendering')}}
+  - : Hints about what tradeoffs to make as the browser renders {{SVGElement('path')}} element or basic shapes.
+    _Value_: **`auto`**|`optimizeSpeed`|`crispEdges`|`geometricPrecision` |`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('solid-color')}}
+  - : -
+    _Value_:; _Animatable_: **-**
+- {{SVGAttr('solid-opacity')}}
+  - : -
+    _Value_:; _Animatable_: **-**
+- {{SVGAttr('stop-color')}}
+  - : Indicates what color to use at that gradient stop.
+    _Value_: `currentColor`|[\](/en/SVG/Content_type#Color)|[\](/en/SVG/Content_type#ICCColor)|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('stop-opacity')}}
+  - : Defines the opacity of a given gradient stop.
+    _Value_: [\](/en/SVG/Content_type#Opacity_value)|`inherit`; _Animatable_: **Yes**
+- {{SVGAttr('stroke')}}
+  - : Defines the color used to paint the outline of the shape.
+    _Value_: [\](/docs/Web/SVG/Content_type#Paint); _Animatable_: **Yes**
+- {{SVGAttr('stroke-dasharray')}}
+  - : Defines the pattern of dashes and gaps used to paint the outline of the shape.
+    _Value_: `none`|``; _Animatable_: **Yes**
+- {{SVGAttr('stroke-dashoffset')}}
+  - : Defines an offset on the rendering of the associated dash array.
+    _Value_: [\](/en/SVG/Content_type#Percentage)|[\](/en/SVG/Content_type#Length); _Animatable_: **Yes**
+- **{{SVGAttr('stroke-linecap')}}**
+  - : Defines the shape to be used at the end of open subpaths when they are stroked.
+    _Value_: **`butt`**|`round`|`square`; _Animatable_: **Yes**
+- **{{SVGAttr('stroke-linejoin')}}**
+  - : Defines the shape to be used at the corners of paths when they are stroked.
+    _Value_: `arcs`|`bevel`|**`miter`**|`miter-clip`|`round`; _Animatable_: **Yes**
+- **{{SVGAttr('stroke-miterlimit')}}**
+  - : Defines a limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }} used to draw a miter join.
+    _Value_: [\](/en/SVG/Content_type#Number); _Animatable_: **Yes**
+- **{{SVGAttr('stroke-opacity')}}**
+  - : Defines the opacity of the stroke of a shape.
+    _Value_: [\](/en/SVG/Content_type#Opacity_value)|[\](/docs/Web/SVG/Content_type#Paint); _Animatable_: **Yes**
+- **{{SVGAttr('stroke-width')}}**
+  - : Defines the width of the stroke to be applied to the shape.
+    _Value_: [\](/docs/Web/SVG/Content_type#Length)|[\](/docs/Web/SVG/Content_type#Percentage); _Animatable_: **Yes**
+- **{{SVGAttr('text-anchor')}}**
+  - : Defines the vertical alignment a string of text.
+    _Value_: `start`|`middle`|`end`|**`inherit`**; _Animatable_: **Yes**
+- **{{SVGAttr('text-decoration')}}**
+  - : Sets the appearance of decorative lines on text.
+    _Value_: `none`|`underline`|`overline`|`line-through`|`blink`|**`inherit`**; _Animatable_: **Yes**
+- **{{SVGAttr('text-rendering')}}**
+  - : Hints about what tradeoffs to make as the browser renders text.
+    _Value_: **`auto`**|`optimizeSpeed`|`optimizeLegibility`|`geometricPrecision`|`inherit`; _Animatable_: **Yes**
+- **{{SVGAttr('transform')}}**
+  - : Defines a list of transform definitions that are applied to an element and the element's children.
+    _Value_: [\](/docs/Web/SVG/Content_type#Transform-list); _Animatable_: **Yes**
+- **{{SVGAttr('unicode-bidi')}}**
+  - : -
+    _Value_:; _Animatable_: **-**
+- **{{SVGAttr('vector-effect')}}**
+  - : Specifies the vector effect to use when drawing an object.
+    _Value_: `default`|`non-scaling-stroke`|`inherit`|``; _Animatable_: **Yes**
+- **{{SVGAttr('visibility')}}**
+  - : Lets you control the visibility of graphical elements.
+    _Value_: **`visible`**|`hidden`|`collapse`|`inherit`; _Animatable_: **Yes**
+- **{{SVGAttr('word-spacing')}}**
+  - : Specifies spacing behavior between words.
+    _Value_: [\](/en/SVG/Content_type#Length)|**`inherit`**; _Animatable_: **Yes**
+- **{{SVGAttr('writing-mode')}}**
+  - : Specifies whether the initial inline-progression-direction for a {{SVGElement('text')}} element shall be left-to-right, right-to-left, or top-to-bottom.
+    _Value_: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`; _Animatable_: **Yes**
 
-
    Browser compatibility
    
+## Browser compatibility
 
-
-
-
    {{Compat("svg.attributes.presentation")}}
    
+{{Compat("svg.attributes.presentation")}}
diff --git a/files/zh-cn/web/svg/attribute/preservealpha/index.md b/files/zh-cn/web/svg/attribute/preservealpha/index.md
index 1c06311c4df106..1a3942885f4f53 100644
--- a/files/zh-cn/web/svg/attribute/preservealpha/index.md
+++ b/files/zh-cn/web/svg/attribute/preservealpha/index.md
@@ -3,43 +3,29 @@ title: preserveAlpha
 slug: Web/SVG/Attribute/preserveAlpha
 translation_of: Web/SVG/Attribute/preserveAlpha
 ---
-
    « SVG 属性参考
    
+« [SVG 属性参考](/en/SVG/Attribute)
 
-
    preserveAlpha 属性表示{{ SVGElement("feConvolveMatrix") }} 元素怎样处透明度。
    
+`preserveAlpha` 属性表示{{ SVGElement("feConvolveMatrix") }} 元素怎样处透明度。
 
-
    取值为 false 表示 feConvolveMatrix 元素将应用在包括透明度通道的所有的通道。这是默认的选项。
    
+取值为 `false` 表示 feConvolveMatrix 元素将应用在包括透明度通道的所有的通道。这是默认的选项。
 
-
    取值为 true 表示 feConvolveMatrix 仅应用在颜色通道。
    
+取值为 `true` 表示 feConvolveMatrix 仅应用在颜色通道。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别None
    值true | false
    可变性Yes
    
+| 类别   | None              |
+| ------ | ----------------- |
+| 值     | `true` \| `false` |
+| 可变性 | Yes               |
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用 preserveAlpha 属性
    
+下列元素可以使用 `preserveAlpha` 属性
 
-
      
- 
    • {{ SVGElement("feConvolveMatrix") }}
      • 
-
    
+- {{ SVGElement("feConvolveMatrix") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
index b2c36e640753f2..ae29b4446f0716 100644
--- a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
+++ b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
@@ -7,108 +7,69 @@ tags:
   - 需要实例
 translation_of: Web/SVG/Attribute/preserveAspectRatio
 ---
-
    « SVG Attribute reference home
    
-
-
    有时候，通常我们使用  {{ SVGAttr("viewBox") }} 属性时，希望图形拉伸占据整个视口。  在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例。
    
- 
    
- preserveAspectRatio属性表示是否强制进行统一缩放。
    
- 
    
- 对于支持该属性的所有元素 (如上所示)，除了 {{ SVGElement("image") }} 元素之外，preserveAspectRatio 只适用于在同一元素上为 {{ SVGAttr("viewBox") }} 提供的值。对于这些元素，如果没有提供属性 {{ SVGAttr("viewBox") }} ，则忽略了 preserveAspectRatio。
    
- 
    
- 对于 {{ SVGElement("image") }} 元素，preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配，以及是否应该相对于当前用户坐标系保留参考图像的长宽比
    
-
-
    上下文用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    Value<align> [<meetOrSlice>]
    AnimatableYes
    
-
-
    
- 
    <align>
    
- 
    <align> 属性值表示是否强制统一缩放，当 SVG 的 viewbox 属性与视图属性宽高比不一致时使用.  <align> 属性的值一定是下列的值之一：
    
- 
      
-  
    • none
      
-   不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。
      
-   (注意：如果 <align> 的值是 none ，则 <meetOrSlice> 属性的值将会被忽略。)
      • 
-  
    • xMinYMin - 强制统一缩放。
      
-   将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。
      
-   将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
      • 
-  
    • xMidYMin - 强制统一缩放。
      
-   将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。
      
-   将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
      • 
-  
    • xMaxYMin - 强制统一缩放。
      
-   将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。
      
-   将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
      • 
-  
    • xMinYMid - 强制统一缩放。
      
-   将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。
      
-   将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
      • 
-  
    • xMidYMid (默认值) - 强制统一缩放。
      
-   将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。
      
-   将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
      • 
-  
    • xMaxYMid - 强制统一缩放。
      
-   将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。
      
-   将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
      • 
-  
    • xMinYMax - 强制统一缩放。
      
-   将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。
      
-   将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
      • 
-  
    • xMidYMax - 强制统一缩放。
      
-   将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。
      
-   将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
      • 
-  
    • xMaxYMax - 强制统一缩放。
      
-   将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。
      
-   将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
      • 
- 
    
- 
    
- 
    <meetOrSlice>
    
- 
    <meetOrSlice> 是可选的，如果提供的话， 与 <align> 间隔一个或多个的空格 ，参数所选值必须是以下值之一：
- 
      
-  
    • meet (默认值) - 图形将缩放到：
-   
        
-    
      • 宽高比将会被保留
        • 
-    
      • 整个 SVG 的 viewbox 在视图范围内是可见的
        • 
-    
      • 尽可能的放大 SVG 的 viewbox，同时仍然满足其他的条件。
        • 
-   
      
-   在这种情况下，如果图形的宽高比和视图窗口不匹配，则某些视图将会超出 viewbox 范围（即 SVG 的 viewbox 视图将会比可视窗口小）。
      • 
-  
    • slice - 图形将缩放到：
-   
        
-    
      • 宽高比将会被保留
        • 
-    
      • 整个视图窗口将覆盖 viewbox
        • 
-    
      • SVG 的 viewbox 属性将会被尽可能的缩小，但是仍然符合其他标准。
        • 
-   
      
-   在这种情况下，如果 SVG 的 viewbox 宽高比与可视区域不匹配，则 viewbox 的某些区域将会延伸到视图窗口外部（即 SVG 的 viewbox 将会比可视窗口大）。
      • 
- 
    
- 
    
-
    
-
-
    实例
    
-
-
    元素
    
-
-
    以下元素可使用 preserveAspectRatio 属性
    
-
-
      
- 
    • {{ SVGElement("svg") }}
      • 
- 
    • {{ SVGElement("symbol") }}
      • 
- 
    • {{ SVGElement("image") }}
      • 
- 
    • {{ SVGElement("feImage") }}
      • 
- 
    • {{ SVGElement("marker") }}
      • 
- 
    • {{ SVGElement("pattern") }}
      • 
- 
    • {{ SVGElement("view") }}
      • 
-
    
-
-
    规范
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
+
+有时候，通常我们使用 {{ SVGAttr("viewBox") }} 属性时，希望图形拉伸占据整个视口。 在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例。
+
+`preserveAspectRatio`属性表示是否强制进行统一缩放。
+
+对于支持该属性的所有元素 (如上所示)，除了 {{ SVGElement("image") }} 元素之外，preserveAspectRatio 只适用于在同一元素上为 {{ SVGAttr("viewBox") }} 提供的值。对于这些元素，如果没有提供属性 {{ SVGAttr("viewBox") }} ，则忽略了 preserveAspectRatio。
+
+对于 {{ SVGElement("image") }} 元素，preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配，以及是否应该相对于当前用户坐标系保留参考图像的长宽比
+
+## 上下文用法
+
+| Categories | None                    |
+| ---------- | ----------------------- |
+| Value      |  [] |
+| Animatable | Yes                     |
+
+- \
+  - : `` 属性值表示是否强制统一缩放，当 SVG 的 viewbox 属性与视图属性宽高比不一致时使用。`` 属性的值一定是下列的值之一：
+
+    - **none** 不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。（注意：如果 `` 的值是 `none` ，则 `` 属性的值将会被忽略。）
+    - **xMinYMin** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
+    - **xMidYMin** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
+    - **xMaxYMin** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
+    - **xMinYMid** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
+    - **xMidYMid** (默认值) - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
+    - **xMaxYMid** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
+    - **xMinYMax** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
+    - **xMidYMax** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
+    - **xMaxYMax** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
+- \
+  - : `` 是可选的，如果提供的话， 与 `` 间隔一个或多个的空格 ，参数所选值必须是以下值之一：
+
+    - **meet** (默认值) - 图形将缩放到：
+
+      - 宽高比将会被保留
+      - 整个 SVG 的 viewbox 在视图范围内是可见的
+      - 尽可能的放大 SVG 的 viewbox，同时仍然满足其他的条件。
+    
+      在这种情况下，如果图形的宽高比和视图窗口不匹配，则某些视图将会超出 viewbox 范围（即 SVG 的 viewbox 视图将会比可视窗口小）。
+
+    - **slice** - 图形将缩放到：
+
+      - 宽高比将会被保留
+      - 整个视图窗口将覆盖 viewbox
+      - SVG 的 viewbox 属性将会被尽可能的缩小，但是仍然符合其他标准。
+
+      在这种情况下，如果 SVG 的 viewbox 宽高比与可视区域不匹配，则 viewbox 的某些区域将会延伸到视图窗口外部（即 SVG 的 viewbox 将会比可视窗口大）。
+
+## 实例
+
+## 元素
+
+以下元素可使用 `preserveAspectRatio` 属性
+
+- {{ SVGElement("svg") }}
+- {{ SVGElement("symbol") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("feImage") }}
+- {{ SVGElement("marker") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("view") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/primitiveunits/index.md b/files/zh-cn/web/svg/attribute/primitiveunits/index.md
index 07e80d13ac6448..41fc6fd0dcdcdb 100644
--- a/files/zh-cn/web/svg/attribute/primitiveunits/index.md
+++ b/files/zh-cn/web/svg/attribute/primitiveunits/index.md
@@ -3,48 +3,32 @@ title: primitiveUnits
 slug: Web/SVG/Attribute/primitiveUnits
 translation_of: Web/SVG/Attribute/primitiveUnits
 ---
-
    « SVG Attribute reference home
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
 
-
    primitiveUnits 属性为过滤器原语和定义过滤器原语子域中的各种各样的长度单位指定坐标系统.
    
+`primitiveUnits 属性为过滤器原语和定义过滤器原语子域中的各种各样的长度单位指定坐标系统`.
 
-
    如果 primitiveUnits 属性未指定，那么效果就如同指定值为 userSpaceOnUse 的效果是一样的。
    
+如果 primitiveUnits 属性未指定，那么效果就如同指定值为 userSpaceOnUse 的效果是一样的。
 
-
    Usage context
    
+## Usage context
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    ValueuserSpaceOnUse | objectBoundingBox
    AnimatableYes
    
+| Categories | _None_                                      |
+| ---------- | ------------------------------------------- |
+| Value      | **`userSpaceOnUse`** \| `objectBoundingBox` |
+| Animatable | Yes                                         |
 
-
    
- 
    userSpaceOnUse
    
- 
    当{{ SVGElement("filter") }}元素使用该值的时候，过滤器中定义的任意长度的值都基于当前用户坐标系统 (例如通过{{ SVGAttr("filter") }}属性引用该{{ SVGElement("filter") }}元素的元素所在的用户坐标系统).
    
- 
    objectBoundingBox
    
- 
    在 filter 中定义的任意长度值表示引用该 filter 的元素的包围盒的分数或百分比。
    
-
    
+- userSpaceOnUse
+  - : 当{{ SVGElement("filter") }}元素使用该值的时候，过滤器中定义的任意长度的值都基于当前用户坐标系统 (例如通过{{ SVGAttr("filter") }}属性引用该{{ SVGElement("filter") }}元素的元素所在的用户坐标系统).
+- objectBoundingBox
+  - : 在 filter 中定义的任意长度值表示引用该 filter 的元素的包围盒的分数或百分比。
 
-
    Examples
    
+## Examples
 
-
    Elements
    
+## Elements
 
-
    下列元素可以使用 primitiveUnits 属性：
    
+下列元素可以使用 primitiveUnits 属性：
 
-
      
- 
    • {{ SVGElement("filter") }}
      • 
-
    
+- {{ SVGElement("filter") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/r/index.md b/files/zh-cn/web/svg/attribute/r/index.md
index 6088d5f692eec9..0e5d8c73d620c2 100644
--- a/files/zh-cn/web/svg/attribute/r/index.md
+++ b/files/zh-cn/web/svg/attribute/r/index.md
@@ -6,87 +6,67 @@ tags:
   - SVG 属性
 translation_of: Web/SVG/Attribute/r
 ---
-
    {{SVGRef}}
    
-
-
    r 属性用来定义圆的半径。
    
-
-
    有两个元素在使用该属性：{{SVGElement("circle")}} 和 {{SVGElement("radialGradient")}}
    
-
-
    示例
    
-
-
-
-
    <svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
-  <radialGradient r="0" id="myGradient000">
-    <stop offset="0"    stop-color="white" />
-    <stop offset="100%" stop-color="black" />
-  </radialGradient>
-  <radialGradient r="50%" id="myGradient050">
-    <stop offset="0"    stop-color="white" />
-    <stop offset="100%" stop-color="black" />
-  </radialGradient>
-  <radialGradient r="100%" id="myGradient100">
-    <stop offset="0"    stop-color="white" />
-    <stop offset="100%" stop-color="black" />
-  </radialGradient>
-
-  <circle cx="50"  cy="50" r="0"/>
-  <circle cx="150" cy="50" r="25"/>
-  <circle cx="250" cy="50" r="50"/>
-
-  <rect x="20"  y="120" width="60" height="60" fill="url(#myGradient000)" />
-  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
-  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
-</svg>
    
-
-
    {{EmbedLiveSample('示例', '100%', 200)}}
    
-
-
    圆
    
-
-
    对于 {{SVGElement('circle')}}，r 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值<length> | <percentage>
    默认值0
    可变性Yes
    
-
-
    注：起始于 SVG2，r 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
    
-
-
    径向渐变
    
-
-
    对于 {{ SVGElement("radialGradient") }}，r 用来定义径向渐变终止圆的半径。
    
-
-
    渐变将以此绘制出来：100% 渐变停止点会被映射到终止圆的一周上。取值小于或等于零，将会使用最后一个渐变 {{ SVGElement("stop") }} 的颜色和不透明度，导致该区域被绘制为单色。
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值<length> | <percentage>
    默认值50%
    可变性Yes
    
-
-
    规范
    
+{{SVGRef}}
+
+**`r`** 属性用来定义圆的半径。
+
+有两个元素在使用该属性：{{SVGElement("circle")}} 和 {{SVGElement("radialGradient")}}
+
+## 示例
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+    
+    
+  
+  
+    
+    
+  
+  
+    
+    
+  
+
+  
+  
+  
+
+  
+  
+  
+
+```
+
+{{EmbedLiveSample('示例', '100%', 200)}}
+
+## 圆
+
+对于 {{SVGElement('circle')}}，`r` 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。
+
+| 值     | **[](/docs/Web/SVG/Content_type#Length)** \| **[](/docs/Web/SVG/Content_type#Percentage)** |
+| ------ | -------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0`                                                                                                            |
+| 可变性 | Yes                                                                                                            |
+
+**注：**起始于 SVG2，`r` 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
+
+## 径向渐变
+
+对于 {{ SVGElement("radialGradient") }}，`r` 用来定义径向渐变终止圆的半径。
+
+渐变将以此绘制出来：**100%** 渐变停止点会被映射到终止圆的一周上。取值小于或等于零，将会使用最后一个渐变 {{ SVGElement("stop") }} 的颜色和不透明度，导致该区域被绘制为单色。
+
+| 值     | **[](/docs/Web/SVG/Content_type#Length)** \| **[](/docs/Web/SVG/Content_type#Percentage)** |
+| ------ | -------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `50%`                                                                                                          |
+| 可变性 | Yes                                                                                                            |
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/radius/index.md b/files/zh-cn/web/svg/attribute/radius/index.md
index a37953f789a311..1bf1c38d4b2089 100644
--- a/files/zh-cn/web/svg/attribute/radius/index.md
+++ b/files/zh-cn/web/svg/attribute/radius/index.md
@@ -9,41 +9,27 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Attribute/radius
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    radius属性代表了一个给定{{SVGElement("feMorphology")}}滤镜上的操作。如果提供了两个<number>，则第一个数代表了 x-radius，第二个数代表了 y-radius。如果只提供了一个数字，则值同时用于 x 和 y。值是在{{SVGElement("filter")}} 元素的属性{{SVGAttr("primitiveUnits")}} 确定的坐标系统内。
    
+`radius`属性代表了一个给定{{SVGElement("feMorphology")}}滤镜上的操作。如果提供了两个[\](/en/SVG/Content_type#Number)，则第一个数代表了 x-radius，第二个数代表了 y-radius。如果只提供了一个数字，则值同时用于 x 和 y。值是在{{SVGElement("filter")}} 元素的属性{{SVGAttr("primitiveUnits")}} 确定的坐标系统内。
 
-
    如果没有指定该属性值，效果等同于指定了一个0值。
    
+如果没有指定该属性值，效果等同于指定了一个**0**值。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<number-optional-number>
    可变性Yes
    
+| 类别   | _无_                                                                    |
+| ------ | ----------------------------------------------------------------------- |
+| 值     | [](/en/SVG/Content_type#Number-optional-number) |
+| 可变性 | Yes                                                                     |
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    以下元素可以使用radius属性：
    
+以下元素可以使用`radius`属性：
 
-
      
- 
    • {{ SVGElement("feMorphology") }}
      • 
-
    
+- {{ SVGElement("feMorphology") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/repeatcount/index.md b/files/zh-cn/web/svg/attribute/repeatcount/index.md
index d41258f5e8c791..e4c8c9f92f7294 100644
--- a/files/zh-cn/web/svg/attribute/repeatcount/index.md
+++ b/files/zh-cn/web/svg/attribute/repeatcount/index.md
@@ -3,43 +3,29 @@ title: repeatCount
 slug: Web/SVG/Attribute/repeatCount
 translation_of: Web/SVG/Attribute/repeatCount
 ---
-
    « SVG 属性参考
    
+« [SVG 属性参考](/en/SVG/Attribute)
 
-
    这个属性表示动画将发生的次数。
    
+这个属性表示动画将发生的次数。
 
-
    这个属性的值指定了重复的次数。它也可以包括用分数值表示。它的值必须大于 0。
    
+这个属性的值指定了重复的次数。它也可以包括用分数值表示。它的值必须大于 0。
 
-
    用法解释
    
+## 用法解释
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别动画时间属性
    Value<number> | "indefinite"
    AnimatableNo
    
+| 类别       | 动画时间属性                                            |
+| ---------- | ------------------------------------------------------- |
+| Value      | [](/en/SVG/Content_type#Number) \| "indefinite" |
+| Animatable | No                                                      |
 
-
    {{ page("/en/SVG/Content_type","Number") }}
    
+{{ page("/en/SVG/Content_type","Number") }}
 
-
    Example
    
+## Example
 
-
    Elements
    
+## Elements
 
-
    The following elements can use the repeatCount attribute
    
+The following elements can use the `repeatCount` attribute
 
-
+- [Animation elements](/en/SVG/Element#Animation) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/result/index.md b/files/zh-cn/web/svg/attribute/result/index.md
index aa0d65ed2c7fc3..a7d6626ab28dfb 100644
--- a/files/zh-cn/web/svg/attribute/result/index.md
+++ b/files/zh-cn/web/svg/attribute/result/index.md
@@ -7,39 +7,25 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/result
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    属性result定义了滤镜的分配名。如果提供了它，则经过滤镜处理的结果即图形可以再次滤镜处理，在后继滤镜（即另一个{{ SVGElement("filter") }}元素）上通过一个{{ SVGAttr("in") }}属性引用之前的结果。如果没有提供result值，而且如果下一个滤镜也没有提供{{ SVGAttr("in") }}属性值，则输出只可作为下一个滤镜的隐式输入。
    
+属性`result`定义了滤镜的分配名。如果提供了它，则经过滤镜处理的结果即图形可以再次滤镜处理，在后继滤镜（即另一个{{ SVGElement("filter") }}元素）上通过一个{{ SVGAttr("in") }}属性引用之前的结果。如果没有提供`result`值，而且如果下一个滤镜也没有提供{{ SVGAttr("in") }}属性值，则输出只可作为下一个滤镜的隐式输入。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<filter-primitive-reference>
    可变性Yes
    
+| 类别   | 无                           |
+| ------ | ---------------------------- |
+| 值     |  |
+| 可变性 | Yes                          |
 
-
    注意<filter-primitive-reference>不是一个 XML ID，换句话说，<filter-primitive-reference>只在给定的{{ SVGElement("filter") }}元素内部有意义，因此只有局部范围。在同一个{{ SVGElement("filter") }}元素内部，同一个<filter-primitive-reference>出现多次也是合法的。如果引用了，<filter-primitive-reference>将使用在给定结果前面、离给定结果最近的滤镜。
    
+注意``不是一个 XML ID，换句话说，``只在给定的{{ SVGElement("filter") }}元素内部有意义，因此只有局部范围。在同一个{{ SVGElement("filter") }}元素内部，同一个``出现多次也是合法的。如果引用了，``将使用在给定结果前面、离给定结果最近的滤镜。
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用result属性：
    
+下列元素可以使用`result`属性：
 
-
+- [滤镜元素](/en/SVG/Element#FilterPrimitive) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/rx/index.md b/files/zh-cn/web/svg/attribute/rx/index.md
index 9090ae977f4338..248c7e876356ec 100644
--- a/files/zh-cn/web/svg/attribute/rx/index.md
+++ b/files/zh-cn/web/svg/attribute/rx/index.md
@@ -6,82 +6,60 @@ tags:
   - SVG 属性
 translation_of: Web/SVG/Attribute/rx
 ---
-
    {{SVGRef}}
    
-
-
    rx 属性用于定义水平轴向的圆角半径尺寸。
    
-
-
    {{SVGElement("ellipse")}} 和 {{SVGElement("rect")}} 两个基本图形使用了这个属性。
    
-
-
    示例
    
-
-
-
-
    <svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
-  <ellipse cx="50"  cy="50" rx="0"  ry="25" />
-  <ellipse cx="150" cy="50" rx="25" ry="25" />
-  <ellipse cx="250" cy="50" rx="50" ry="25" />
-
-  <rect x="20"  y="120" width="60" height="60" rx="0"   ry="15"/>
-  <rect x="120" y="120" width="60" height="60" rx="15"  ry="15"/>
-  <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/>
-</svg>
    
-
-
    {{EmbedLiveSample('示例', '100%', 200)}}
    
-
-
    椭圆
    
-
-
    对于 {{SVGElement('ellipse')}}，rx 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    取值<length> | <percentage> | auto
    默认值auto
    是否支持动画是
    
-
-
    注释： 从 SVG2 开始， rx 是一个几何属性，也就是说，这个属性也可以用作椭圆的 CSS 属性。
    
-
-
    矩形
    
-
-
    对于 {{SVGElement('rect')}}，rx 定义了水平方向的圆角尺寸。
    
-
-
    rx 属性的实际效果取决于矩形的 {{SVGAttr("ry")}} 属性和宽度：
    
-
-
      
- 
    • 如果你为 rx 属性指定了正确的值，但是没有定义 {{SVGAttr("ry")}} 属性的值，那么浏览器会让 {{SVGAttr("ry")}} 取 rx 属性被指定的相等的值。（反之亦然）
      • 
- 
    • 如果 rx 和 {{SVGAttr("ry")}} 都没有被正确的赋值，那么浏览器会绘制一个带有直角尖角的矩形。
      • 
- 
    • rx 属性的有效值为矩形宽度的一半（即，如果为 rx 指定的值大于矩形宽度的一半，那么浏览器会视为 rx 的值为矩形宽度的一半）。
      • 
-
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    取值<length> | <percentage> | auto
    缺省值auto
    是否支持动画是
    
-
-
    注释： 从 SVG2 开始，rx 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。
    
-
-
    规范
    
+{{SVGRef}}
+
+**`rx`** 属性用于定义水平轴向的圆角半径尺寸。
+
+{{SVGElement("ellipse")}} 和 {{SVGElement("rect")}} 两个基本图形使用了这个属性。
+
+## 示例
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+  
+  
+
+  
+  
+  
+
+```
+
+{{EmbedLiveSample('示例', '100%', 200)}}
+
+## 椭圆
+
+对于 {{SVGElement('ellipse')}}，`rx` 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。
+
+| 取值         | **[](/docs/Web/SVG/Content_type#Length)** \| **[](/docs/Web/SVG/Content_type#Percentage)** \| `auto` |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------ |
+| 默认值       | `auto`                                                                                                                   |
+| 是否支持动画 | 是                                                                                                                       |
+
+**注释：** 从 SVG2 开始， `rx` 是一个几何属性，也就是说，这个属性也可以用作椭圆的 CSS 属性。
+
+## 矩形
+
+对于 {{SVGElement('rect')}}，`rx` 定义了水平方向的圆角尺寸。
+
+`rx` 属性的实际效果取决于矩形的 {{SVGAttr("ry")}} 属性和宽度：
+
+- 如果你为 `rx` 属性指定了正确的值，但是没有定义 {{SVGAttr("ry")}} 属性的值，那么浏览器会让 {{SVGAttr("ry")}} 取 `rx` 属性被指定的相等的值。（反之亦然）
+- 如果 `rx` 和 {{SVGAttr("ry")}} 都没有被正确的赋值，那么浏览器会绘制一个带有直角尖角的矩形。
+- `rx` 属性的有效值为矩形宽度的一半（即，如果为 `rx` 指定的值大于矩形宽度的一半，那么浏览器会视为 `rx` 的值为矩形宽度的一半）。
+
+| 取值         | **[](/docs/Web/SVG/Content_type#Length)** \| **[](/docs/Web/SVG/Content_type#Percentage)** \| `auto` |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------ |
+| 缺省值       | `auto`                                                                                                                   |
+| 是否支持动画 | 是                                                                                                                       |
+
+**注释：** 从 SVG2 开始，`rx` 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/scale/index.md b/files/zh-cn/web/svg/attribute/scale/index.md
index 19759f99a69c4f..5eb6f30e0553cb 100644
--- a/files/zh-cn/web/svg/attribute/scale/index.md
+++ b/files/zh-cn/web/svg/attribute/scale/index.md
@@ -9,43 +9,29 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Attribute/scale
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    属性scale定义了用在{{SVGElement("feDisplacementMap")}}滤镜上的置换缩放因子。它的总值表达在{{SVGElement("filter")}}元素的属性{{SVGAttr("primitiveUnits")}}确定的坐标系统中。
    
+属性`scale`定义了用在{{SVGElement("feDisplacementMap")}}滤镜上的置换缩放因子。它的总值表达在{{SVGElement("filter")}}元素的属性{{SVGAttr("primitiveUnits")}}确定的坐标系统中。
 
-
    如果这个属性的值是0，则它的操作对源图像没有影响。
    
+如果这个属性的值是**0**，则它的操作对源图像没有影响。
 
-
    如果没有指定这个属性，则效果等同于它被指定了0值。
    
+如果没有指定这个属性，则效果等同于它被指定了**0**值。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<number>
    可变性Yes
    
+| 类别   | _无_                                    |
+| ------ | --------------------------------------- |
+| 值     | [](/en/SVG/Content_type#Number) |
+| 可变性 | Yes                                     |
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用scale属性：
    
+下列元素可以使用`scale`属性：
 
-
      
- 
    • {{ SVGElement("feDisplacementMap") }}
      • 
-
    
+- {{ SVGElement("feDisplacementMap") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/seed/index.md b/files/zh-cn/web/svg/attribute/seed/index.md
index 397e81f471f357..46b234e7ea3d2f 100644
--- a/files/zh-cn/web/svg/attribute/seed/index.md
+++ b/files/zh-cn/web/svg/attribute/seed/index.md
@@ -9,41 +9,27 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Attribute/seed
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    seed属性代表了{{SVGElement("feTurbulence")}}元素生成的伪随机数的开始数字。
    
+`seed`属性代表了{{SVGElement("feTurbulence")}}元素生成的伪随机数的开始数字。
 
-
    如果没有指定这个属性，它等效于指定了一个0值。
    
+如果没有指定这个属性，它等效于指定了一个`0`值。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别None
    值<number>
    可变性Yes
    
+| 类别   | _None_                                          |
+| ------ | ----------------------------------------------- |
+| 值     | [](/zh-CN/docs/SVG/Content_type#Number) |
+| 可变性 | Yes                                             |
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    以下元素可以使用seed属性：
    
+以下元素可以使用`seed`属性：
 
-
      
- 
    • {{ SVGElement("feTurbulence") }}
      • 
-
    
+- {{ SVGElement("feTurbulence") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/shape-rendering/index.md b/files/zh-cn/web/svg/attribute/shape-rendering/index.md
index a6e12d1b0a7fcf..267275fc01d6f2 100644
--- a/files/zh-cn/web/svg/attribute/shape-rendering/index.md
+++ b/files/zh-cn/web/svg/attribute/shape-rendering/index.md
@@ -7,77 +7,51 @@ tags:
   - 需要完善
 translation_of: Web/SVG/Attribute/shape-rendering
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/zh-CN/docs/Web/SVG/Attribute)
 
-
    指定 SVG 元素{{SVGElement("path")}}的渲染模式。
    
+指定 SVG 元素{{SVGElement("path")}}的渲染模式。
 
-
    使用参考
    
+## 使用参考
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类型外观属性
    值auto | optimizeSpeed | crispEdges | geometricPrecision | inherit
    可运动Yes
    
+| 类型   | 外观属性                                                                 |
+| ------ | ------------------------------------------------------------------------ |
+| 值     | **auto** \| optimizeSpeed \| crispEdges \| geometricPrecision \| inherit |
+| 可运动 | Yes                                                                      |
 
-
    
- 
    auto
    
- 
    让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。
    
- 
    optimizeSpeed
    
- 
    偏向渲染速度，浏览器会关闭反锯齿模式。（速度）
    
- 
    crispEdges
    
- 
    偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐。（锐度）
    
- 
    geometricPrecision
    
- 
    偏向渲染平滑的曲线。（平滑）
    
-
    
+- auto
+  - : 让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。
+- optimizeSpeed
+  - : 偏向渲染速度，浏览器会关闭反锯齿模式。（速度）
+- crispEdges
+  - : 偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐。（锐度）
+- geometricPrecision
+  - : 偏向渲染平滑的曲线。（平滑）
 
-
    示例
    
+## 示例
 
-
    <svg xmlns="http://www.w3.org/2000/svg"
+```xml
+
+  shape-rendering="optimizeSpeed">
+```
 
-
- 
-  
-   
-   
-  
- 
-
    
-    
    shape-rendering: geometricPrecision:
    
+| shape-rendering: geometricPrecision:![shape-rendering:geometricPrecision](http://download.g63.ru/svg/shape-rendering-geometricPrecision.svg) | shape-rendering: optimizeSpeed![shape-rendering:optimizeSpeed](http://download.g63.ru/svg/shape-rendering-optimizeSpeed.svg) |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
 
-    
    shape-rendering:geometricPrecision
    
-       		
-    
    shape-rendering: optimizeSpeed
    
+同样，你也可以在 CSS 样式中使用 shape-rendering:
 
-    
    shape-rendering:optimizeSpeed
    
-   
    
-
-
    同样，你也可以在 CSS 样式中使用 shape-rendering:
    
-
-
    <svg xmlns="http://www.w3.org/2000/svg"
+```xml
+
+  style="shape-rendering:optimizeSpeed;">
+```
 
-
    关联元素
    
+## 关联元素
 
-
    下面的元素可以使用这个属性
    
+下面的元素可以使用这个属性
 
-
+- [Shape elements](/en/SVG/Element#Shape) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/stddeviation/index.md b/files/zh-cn/web/svg/attribute/stddeviation/index.md
index 5c666868794646..70e0ac1cbae50d 100644
--- a/files/zh-cn/web/svg/attribute/stddeviation/index.md
+++ b/files/zh-cn/web/svg/attribute/stddeviation/index.md
@@ -7,45 +7,31 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/stdDeviation
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    stdDeviation 属性定义了模糊操作的标准差。如果列出两个 <number>，第一个数字表示沿着 x 轴的标准差值，第二个值表示沿着 y 轴的标准差值。如果只出现一个数字，那个值就表示在 x 轴和 y 轴上有着相同的标准差。
    
+`stdDeviation` 属性定义了模糊操作的标准差。如果列出两个 [\](/zh-CN/docs/SVG/Content_type#Number)，第一个数字表示沿着 x 轴的标准差值，第二个值表示沿着 y 轴的标准差值。如果只出现一个数字，那个值就表示在 x 轴和 y 轴上有着相同的标准差。
 
-
    负值是不允许的。设为零即禁用了已有滤镜的原本效果（比如，结果是滤镜输入图像）。如果 stdDeviation 在 x 轴和 y 轴上只有一个为 0，那么模糊效果就只会应用于非 0 的那个方向。
    
+负值是不允许的。设为零即禁用了已有滤镜的原本效果（比如，结果是滤镜输入图像）。如果 `stdDeviation` 在 x 轴和 y 轴上只有一个为 0，那么模糊效果就只会应用于非 0 的那个方向。
 
-
    如果此属性没被定义，就与标准差值被定义为 0 的效果一样。
    
+如果此属性没被定义，就与标准差值被定义为 0 的效果一样。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别None
    值<number-optional-number>
    可变性Yes
    
+| 类别   | None                                                                            |
+| ------ | ------------------------------------------------------------------------------- |
+| 值     | [](/zh-CN/docs/SVG/Content_type#Number-optional-number) |
+| 可变性 | Yes                                                                             |
 
-
    {{ page("/en-US/docs/SVG/Content_type","Number-optional-number") }}
    
+{{ page("/en-US/docs/SVG/Content_type","Number-optional-number") }}
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    以下的元素可以使用 stdDeviation 属性
    
+以下的元素可以使用 `stdDeviation` 属性
 
-
      
- 
    • {{ SVGElement("feGaussianBlur") }}
      • 
-
    
+- {{ SVGElement("feGaussianBlur") }}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/string/index.md b/files/zh-cn/web/svg/attribute/string/index.md
index ef079316a903c5..9ec1c30b8395b6 100644
--- a/files/zh-cn/web/svg/attribute/string/index.md
+++ b/files/zh-cn/web/svg/attribute/string/index.md
@@ -3,44 +3,26 @@ title: string
 slug: Web/SVG/Attribute/string
 translation_of: Web/SVG/Attribute/string
 ---
-
    {{SVGRef}}{{deprecated_header("SVG 2")}}
    
-
-
    The string attribute is a hint to the user agent, and specifies a list of formats that the font referenced by the parent {{SVGElement("font-face-uri")}} element supports.
    
-
-
    Only one element is using this attribute: {{SVGElement("font-face-format")}}
    
-
-
    Usage notes
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<anything>
    Default valueNone
    AnimatableNo
    
-
-
    
- 
    <anything>
    
- 
    
- 
    This value specifies a list of formats that are supported by the font referenced by the parent {{SVGElement("font-face-uri")}} element.
    
-
- 
    The available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg". See the {{cssxref("@font-face/src", "src")}} descriptor of the {{cssxref("@font-face")}} at-rule for more information.
    
- 
    
-
    
-
-
    Specifications
    
+{{SVGRef}}{{deprecated_header("SVG 2")}}
+
+The **`string`** attribute is a hint to the user agent, and specifies a list of formats that the font referenced by the parent {{SVGElement("font-face-uri")}} element supports.
+
+Only one element is using this attribute: {{SVGElement("font-face-format")}}
+
+## Usage notes
+
+| Value         | [``](/en-US/docs/Web/SVG/Content_type#Anything) |
+| ------------- | --------------------------------------------------------- |
+| Default value | _None_                                                    |
+| Animatable    | No                                                        |
+
+- ``
+  - : This value specifies a list of formats that are supported by the font referenced by the parent {{SVGElement("font-face-uri")}} element.The available types are: `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, and `"svg"`. See the {{cssxref("@font-face/src", "src")}} descriptor of the {{cssxref("@font-face")}} at-rule for more information.
+
+## Specifications
 
 {{Specifications}}
 
-
    Browser compatibility
    
+## Browser compatibility
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
index 35892728464550..eba2584afa42ea 100644
--- a/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
@@ -7,73 +7,59 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/stroke-dasharray
 ---
-
    « SVG 属性参考主页
    
-
-
    属性 stroke-dasharray 可控制用来描边的点划线的图案范式。
    
-
-
    作为一个外观属性，它也可以直接用作一个 CSS 样式表内部的属性。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值none | <dasharray> | inherit
    可变性Yes
    
-
-
    
- 
    <dasharray>
    
- 
    它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。
    
-
    
-
-
    示例
    
-
-
    <?xml version="1.0"?>
-<svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
-
-    <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
-    <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
-    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
-    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
-    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
-    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
-    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
-    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
-    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
-    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />
-
-<style><![CDATA[
+« [SVG 属性参考主页](/en/SVG/Attribute)
+
+`属性 stroke-dasharray 可`控制用来描边的点划线的图案范式。
+
+作为一个外观属性，它也可以直接用作一个 CSS 样式表内部的属性。
+
+## 用法
+
+| 类别   | 外观属性                           |
+| ------ | ---------------------------------- |
+| 值     | **none** \|  \| inherit |
+| 可变性 | Yes                                |
+
+- \
+  - : 它是一个[\](/en/SVG/Content_type#Length)和[\](/en/SVG/Content_type#Percentage)数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，**5,3,2**等同于**5,3,2,5,3,2**。
+
+## 示例
+
+```html
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+
+
+```
 
-
    示例输出
    
+**示例输出**
 
-
    {{ EmbedLiveSample('示例','220','220') }}
    
+{{ EmbedLiveSample('示例','220','220') }}
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用stroke-dasharray 属性：
    
+下列元素可以使用`stroke-dasharray 属性：`
 
-
+- [形状元素](/en/SVG/Element#Shape_elements) »
+- [文本内容元素](/en/SVG/Element#Text_content_elements) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
index 51e3893aae22b9..0955ad35687fa5 100644
--- a/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
@@ -8,48 +8,31 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Attribute/stroke-dashoffset
 ---
-
    « SVG属性参考主页
    
-
-
    stroke-dashoffset 属性指定了 dash 模式到路径开始的距离
    
-
-
    如果使用了一个 <百分比> 值， 那么这个值就代表了当前 viewport 的一个百分比。
    
- 
    
- 值可以取为负值。
    
-
-
    使用环境
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别显示属性
    值<percentage> | <length> | inherit
    初始值1
    可动画Yes
    
-
-
    示例
    
-
-
    元素
    
-
-
    以下元素可使用 stroke-dashoffset 属性
    
-
-
-
-
    规范
    
+« [SVG](/en/SVG/Attribute)属性参考主页
+
+`stroke-dashoffset` 属性指定了 dash 模式到路径开始的距离
+
+如果使用了一个 [<百分比>](/en/SVG/Content_type#Percentage) 值， 那么这个值就代表了当前 viewport 的一个百分比。
+
+值可以取为负值。
+
+## 使用环境
+
+| 类别   | 显示属性                                                                                              |
+| ------ | ----------------------------------------------------------------------------------------------------- |
+| 值     | [](/en/SVG/Content_type#Percentage) \| [](/en/SVG/Content_type#Length) \| inherit |
+| 初始值 | 1                                                                                                     |
+| 可动画 | Yes                                                                                                   |
+
+## 示例
+
+## 元素
+
+以下元素可使用 stroke-dashoffset 属性
+
+- [形状元素](/en/SVG/Element#Shape) »
+- [文本内容元素](/en/SVG/Element#TextContent) »
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/stroke-linecap/index.md b/files/zh-cn/web/svg/attribute/stroke-linecap/index.md
index 95c3a7984bba5e..8dd0f5df7ba0d3 100644
--- a/files/zh-cn/web/svg/attribute/stroke-linecap/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-linecap/index.md
@@ -6,67 +6,55 @@ tags:
   - SVG 属性
 translation_of: Web/SVG/Attribute/stroke-linecap
 ---
-
    « SVG 属性 参照主页
    
-
-
    stroke-linecap 属性制定了，在开放子路径被设置描边的情况下，用于开放自路径两端的形状。
    
-
-
    作为一个展现属性，它也可以在一个 CSS 样式表内部，作为一个属性直接使用。
    
-
-
    使用背景
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    分类展现属性
    属性值butt | round | square | inherit
    可动画化是
    
-
-
    Example
    
-
-
    <?xml version="1.0"?>
-<svg width="120" height="120"
+« [SVG 属性 参照主页](/zh-CN/docs/Web/SVG/Attribute)
+
+`stroke-linecap` 属性制定了，在开放子路径被设置描边的情况下，用于开放自路径两端的形状。
+
+作为一个展现属性，它也可以在一个 CSS 样式表内部，作为一个属性直接使用。
+
+## 使用背景
+
+| 分类     | 展现属性                           |
+| -------- | ---------------------------------- |
+| 属性值   | butt \| round \| square \| inherit |
+| 可动画化 | 是                                 |
+
+## Example
+
+```html
+
+
 
-    <line stroke-linecap="butt"
+    
 
-    <line stroke-linecap="round"
+    
 
-    <line stroke-linecap="square"
+    
 
-    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
-          stroke="white" />
-</svg>
    
+    
+
+```
 
-
    实时样例
    
+**实时样例**
 
-
    {{ EmbedLiveSample('Example','120','120') }}
    
+{{ EmbedLiveSample('Example','120','120') }}
 
-
    元素
    
+## 元素
 
-
    以下元素可以使用stroke-linecap 属性
    
+以下元素可以使用`stroke-linecap` 属性
 
-
+- [图形元素](/zh-CN/docs/Web/SVG/Element#Shape) »
+- [文本内容元素](/zh-CN/docs/Web/SVG/Element#TextContent) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
index 29053578269048..63ed54089988aa 100644
--- a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
@@ -3,267 +3,278 @@ title: stroke-linejoin
 slug: Web/SVG/Attribute/stroke-linejoin
 translation_of: Web/SVG/Attribute/stroke-linejoin
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    stroke-linejoin 属性指明路径的转角处使用的形状或者绘制的基础形状。
    
+**`stroke-linejoin`** 属性指明路径的转角处使用的形状或者绘制的基础形状。
 
-
    备注： 作为显示属性， stroke-linejoin 能被用做 CSS 属性。
    
+> **备注：** 作为显示属性， `stroke-linejoin` 能被用做 CSS 属性。
 
-
    作为显示属性，该属性能被应用到任何元素，但只对这 9 种元素有效： {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, {{SVGElement('tspan')}}
    
+作为显示属性，该属性能被应用到任何元素，但只对这 9 种元素有效： {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, {{SVGElement('tspan')}}
 
-
    
-
+## 示例
 
-
    <svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg">
-  <!--
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+  
 
-  <!--
+  
+  
 
-  <!--
+  
+  
 
-  <!--
+  
+  
 
-  <!--
+  
+  
 
 
-  <!--
+  
+  
+    
+    
+    
+    
+  
+  
+  
+  
+  
+
+```
+
+{{EmbedLiveSample('示例', '100%', 400)}}
+
+## 用法
+
+| 值       | `arcs` \| `bevel` \|`miter` \| `miter-clip` \| `round` |
+| -------- | ------------------------------------------------------ |
+| 默认值   | `miter`                                                |
+| 可动画性 | Yes                                                    |
+
+### arcs
+
+> **备注：** `arcs` 来自于 SVG2 但尚未被广泛支持，详情参见 [浏览器兼容性](#Browser_compatibility)
+
+`arcs` 值指示将使用圆弧拐角来连接路径线段。 通过用与连接点的外边缘具有相同曲率的圆弧在连接点处延伸笔触的外边缘来形成弧形。
+
+#### 示例
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+
+  
+  
+
+  
+  
+    
+    
+    
+    
+  
+
+```
 
-
    {{EmbedLiveSample('arcs', '100%', 200)}}
    
+{{EmbedLiveSample('arcs', '100%', 200)}}
 
-
    bevel
    
+### bevel
 
-
    The bevel 用斜角连接路径段。
    
+The `bevel` 用斜角连接路径段。
 
-
    示例
    
+#### 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
-  <!-- Effect of the "bevel" value -->
-  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="bevel" />
+```html
+
+  
+  
 
-  <!--
+  
+  
+    
+    
+    
+    
+  
+
+```
 
-
    {{EmbedLiveSample('bevel', '100%', 200)}}
    
+{{EmbedLiveSample('bevel', '100%', 200)}}
 
-
    miter
    
+### miter
 
-
    The miter 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。
    
+The `miter` 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。
 
-
    备注： 如果超出了{{SVGAttr('stroke-miterlimit')}}，则会退回到 bevel。
    
+> **备注：** 如果超出了{{SVGAttr('stroke-miterlimit')}}，则会退回到 `bevel`。
 
-
    示例
    
+#### 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
-  <!-- Effect of the "miter" value -->
-  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="miter" />
+```html
+
+  
+  
 
-  <!-- Effect of the "miter" value on a sharp angle
-       where de default miter limit is exceeded -->
-  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
-        stroke-linejoin="miter" />
+  
+  
 
-  <!-- the following red dotted line show where
-       the miter value falls back to the bevel value -->
-  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>
+  
+  
 
-  <!-- the following pink lines highlight the position of the path for each stroke -->
-  <g>
-    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
-    <circle cx="1" cy="5" r="0.05" fill="pink" />
-    <circle cx="3" cy="2" r="0.05" fill="pink" />
-    <circle cx="5" cy="5" r="0.05" fill="pink" />
+  
+  
+    
+    
+    
+    
 
-    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
-    <circle cx="7"    cy="5" r="0.05" fill="pink" />
-    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
-    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
-  </g>
-</svg>
    
+    
+    
+    
+    
+  
+
+```
 
-
    {{EmbedLiveSample('miter', '100%', 200)}}
    
+{{EmbedLiveSample('miter', '100%', 200)}}
 
-
    miter-clip
    
+### miter-clip
 
-
    说明： miter-clip 来自于 SVG2 但尚未被广泛支持，详情参见 浏览器兼容性
    
+> **备注：** `miter-clip` 来自于 SVG2 但尚未被广泛支持，详情参见 [浏览器兼容性](#Browser_compatibility)
 
-
    The miter-clip 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。
    
+The `miter-clip` 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。
 
-
    如果超过了{{SVGAttr('stroke-miterlimit')}}，则斜切将被裁剪为等于{{SVGAttr('stroke-miterlimit')}}值乘以路径段相交处的笔划宽度的一半的距离。在非常尖锐的连接或动画的情况下，这提供了比 mitt 更好的渲染效果。
    
+如果超过了{{SVGAttr('stroke-miterlimit')}}，则斜切将被裁剪为等于{{SVGAttr('stroke-miterlimit')}}值乘以路径段相交处的笔划宽度的一半的距离。在非常尖锐的连接或动画的情况下，这提供了比 `mitt` 更好的渲染效果。
 
-
    示例
    
+#### 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
-  <!-- Effect of the "miter-clip" value -->
-  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="miter-clip" />
+```html
+
+  
+  
 
-  <!-- Effect of the "miter-clip" value on a sharp angle
-       where de default miter limit is exceeded -->
-  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
-        stroke-linejoin="miter-clip" />
+  
+  
 
-  <!-- the following red dotted line show where the clip should happen -->
-  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>
+  
+  
 
-  <!-- the following pink lines highlight the position of the path for each stroke -->
-  <g>
-    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
-    <circle cx="1" cy="5" r="0.05" fill="pink" />
-    <circle cx="3" cy="2" r="0.05" fill="pink" />
-    <circle cx="5" cy="5" r="0.05" fill="pink" />
+  
+  
+    
+    
+    
+    
 
-    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
-    <circle cx="7"    cy="5" r="0.05" fill="pink" />
-    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
-    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
-  </g>
-</svg>
    
+    
+    
+    
+    
+  
+
+```
 
-
    {{EmbedLiveSample('miter-clip', '100%', 200)}}
    
+{{EmbedLiveSample('miter-clip', '100%', 200)}}
 
-
    round
    
+### round
 
-
    round 使用圆角连接路径片段。
    
+`round` 使用圆角连接路径片段。
 
-
    示例
    
+#### 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
-  <!-- Effect of the "round" value -->
-  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="round" />
+```html
+
+  
+  
 
-  <!--
+  
+  
+    
+    
+    
+    
+  
+
+```
 
-
    {{EmbedLiveSample('round', '100%', 200)}}
    
+{{EmbedLiveSample('round', '100%', 200)}}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md
index 87762ec6475277..45d84fc788534b 100644
--- a/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md
@@ -7,56 +7,38 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/stroke-miterlimit
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    如果两条线交汇在一起形成一个尖角，而且属性{{ SVGAttr("stroke-linejoin") }}指定了miter，斜接有可能扩展到远远超过出路径轮廓线的线宽。属性stroke-miterlimit 对斜接长度和{{ SVGAttr("stroke-width") }}的比率强加了一个极限。当极限到达时，交汇处由斜接变成倒角。
    
+如果两条线交汇在一起形成一个尖角，而且属性{{ SVGAttr("stroke-linejoin") }}指定了`miter`，斜接有可能扩展到远远超过出路径轮廓线的线宽。属性`stroke-miterlimit 对斜接长度和`{{ SVGAttr("stroke-width") }}的比率`强加了一个极限。当极限到达时，交汇处由斜接变成倒角。`
 
-
    斜接长度（斜接的外尖角和内夹角之间的距离）与{{ SVGAttr("stroke-width") }}的比率，直接跟两条线之间的角度（θ）有关，用如下方程表示：
    
+斜接长度（斜接的外尖角和内夹角之间的距离）与{{ SVGAttr("stroke-width") }}的比率，直接跟两条线之间的角度（θ）有关，用如下方程表示：
 
-
    miterLength / stroke-width = 1 / sin ( theta / 2 )
-
    
+```plain
+miterLength / stroke-width = 1 / sin ( theta / 2 )
+```
 
-
    举个例子，一个极限为 1.414 斜接，θ小于 90 度的把斜接会转换成倒角，一个极限为 4.0 的斜接，θ小于 29 度的斜接会转换成倒角，一个极限为 10.0 的斜接，θ小于大约 11.5 度的斜接会转换成倒角。
    
+举个例子，一个极限为 1.414 斜接，θ 小于 90 度的把斜接会转换成倒角，一个极限为 4.0 的斜接，θ 小于 29 度的斜接会转换成倒角，一个极限为 10.0 的斜接，θ 小于大约 11.5 度的斜接会转换成倒角。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<miterlimit> | inherit
    初始值4
    可动性Yes
    
+| 类别   | 外观属性                |
+| ------ | ----------------------- |
+| 值     |  \| inherit |
+| 初始值 | 4                       |
+| 可动性 | Yes                     |
 
-
    
- 
    <miterlimit>
    
- 
    对斜角长度与{{ SVGAttr("stroke-width") }}的比率的限制。<miterlimit>的值必须是一个大于或等于 1 的<number>。
    
-
    
+- \
+  - : 对斜角长度与{{ SVGAttr("stroke-width") }}的比率的限制。\的值必须是一个大于或等于 1 的[\](/en/SVG/Content_type#Number)。
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用stroke-miterlimit属性：
    
+下列元素可以使用`stroke-miterlimit`属性：
 
-
+- [形状元素](/en/SVG/Element#Shape) »
+- [文本内容元素](/en/SVG/Element#TextContent) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/stroke-opacity/index.md b/files/zh-cn/web/svg/attribute/stroke-opacity/index.md
index e7325a500c29ab..f0ff3403c5302e 100644
--- a/files/zh-cn/web/svg/attribute/stroke-opacity/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-opacity/index.md
@@ -7,73 +7,59 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/stroke-opacity
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    stroke-opacity属性指定了当前对象的轮廓的不透明度。它的默认值是1。
    
+`stroke-opacity`属性指定了当前对象的轮廓的不透明度。它的默认值是**1**。
 
-
    作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
    
+作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<opacity-value> | inherit
    可变性Yes
    
+| 类别   | 外观属性                   |
+| ------ | -------------------------- |
+| 值     |  \| inherit |
+| 可变性 | Yes                        |
 
-
    
- 
    <opacity-value>
    
- 
    在当前对象的轮廓上用该涂色操作的不透明度。任何超出 0.0 到 1.0 范围的值都会被压回这个范围（0.0 表示完全透明，1.0 表示完全不透明）。
    
-
    
+- \
+  - : 在当前对象的轮廓上用该涂色操作的不透明度。任何超出 0.0 到 1.0 范围的值都会被压回这个范围（0.0 表示完全透明，1.0 表示完全不透明）。
 
-
    示例
    
+## 示例
 
-
    SVG
    
+### SVG
 
-
    <svg width="120px" height="120px" viewBox="0 0 120 120">
-  <rect x="10" y="10" width="100" height="100"/>
-</svg>
    
+```html
+
+  
+
+```
 
-
    CSS
    
+### CSS
 
-
    rect{
+```css
+rect{
   fill:#b4da55;
   stroke:#000;
   stroke-width:10px;
   stroke-opacity:0.3;
-}
    
+}
+```
 
-
    结果
    
+### 结果
 
-
    {{EmbedLiveSample("示例",150,150)}}
    
+{{EmbedLiveSample("示例",150,150)}}
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用stroke-opacity属性：
    
+下列元素可以使用`stroke-opacity`属性：
 
-
+- [形状元素](/en/SVG/Element#Shape) »
+- [文本内容元素](/en/SVG/Element#TextContent) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    参见
    
+## 参见
 
-
      
- 
    • {{ SVGAttr("fill-opacity") }}
      • 
- 
    • {{ SVGAttr("opacity") }}
      • 
-
    
+- {{ SVGAttr("fill-opacity") }}
+- {{ SVGAttr("opacity") }}
diff --git a/files/zh-cn/web/svg/attribute/stroke-width/index.md b/files/zh-cn/web/svg/attribute/stroke-width/index.md
index 1012905dfabfa8..e2f0edad2e2592 100644
--- a/files/zh-cn/web/svg/attribute/stroke-width/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-width/index.md
@@ -7,42 +7,28 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/stroke-width
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    stroke-width属性指定了当前对象的轮廓的宽度。它的默认值是1。如果使用了一个<percentage>，这个值代表当前视口的百分比。如果使用了0值，则将不绘制轮廓。
    
+`stroke-width`属性指定了当前对象的轮廓的宽度。它的默认值是**1**。如果使用了一个\，这个值代表当前视口的百分比。如果使用了**0**值，则将不绘制轮廓。
 
-
    作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
    
+作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<length> | <percentage> | inherit
    可变性Yes
    
+| 类别   | 外观属性                                                                                              |
+| ------ | ----------------------------------------------------------------------------------------------------- |
+| 值     | [](/en/SVG/Content_type#Length) \| [](/en/SVG/Content_type#Percentage) \| inherit |
+| 可变性 | Yes                                                                                                   |
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    下列元素可以使用stroke-width属性：
    
+下列元素可以使用`stroke-width`属性：
 
-
+- [形状元素](/en/SVG/Element#Shape) »
+- [文本内容元素](/en/SVG/Element#TextContent) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/stroke/index.md b/files/zh-cn/web/svg/attribute/stroke/index.md
index 28c4be0dbd80ee..0704cf1050720b 100644
--- a/files/zh-cn/web/svg/attribute/stroke/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke/index.md
@@ -7,60 +7,48 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/stroke
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    stroke属性定义了给定图形元素的外轮廓的颜色。它的默认值是none。
    
+`stroke`属性定义了给定图形元素的外轮廓的颜色。它的默认值是**none**。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值<paint>
    可变性是
    
+| 类别   | 外观属性                              |
+| ------ | ------------------------------------- |
+| 值     | [](/en/SVG/Content_type#Paint) |
+| 可变性 | 是                                    |
 
-
    示例
    
+## 示例
 
-
    ​
    
+​
 
-
    SVG 描边的线
    
+## SVG 描边的线
 
-
    示例 1：用 stroke 属性画一条绿色的直线。
    
+### 示例 1：用 stroke 属性画一条绿色的直线。
 
-
    <svg height="50" width ="300">
-    <path stroke = "green" d="M5 20 1215 0" />
-</svg>
    
+```html
+
+    
+
+```
 
-
     
    
+###
 
-
    示例 2：用 Stroke 属性画一个拥有蓝色边框的黑色的圆形
    
+### 示例 2：用 Stroke 属性画一个拥有蓝色边框的黑色的圆形
 
-
    ​​<svg height="200" width="200">
-    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill ="black" />
-</svg>
    
+```html
+​​
+    
+
+```
 
-
     
    
+## 元素
 
-
    元素
    
+下列元素可以使用`stroke`属性：
 
-
    下列元素可以使用stroke属性：
    
+- [形状元素](https://developer.mozilla.org/en/SVG/Element#Shape) »
+- [文本内容元素](https://developer.mozilla.org/en/SVG/Element#TextContent) »
 
-
-
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/style/index.md b/files/zh-cn/web/svg/attribute/style/index.md
index 077d0edc0b48ec..9a660307bd4612 100644
--- a/files/zh-cn/web/svg/attribute/style/index.md
+++ b/files/zh-cn/web/svg/attribute/style/index.md
@@ -8,70 +8,53 @@ tags:
   - svg style
 translation_of: Web/SVG/Attribute/style
 ---
-
    « SVG Attribute reference home
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
 
-
    style 属性指定了指定其元素的样式信息。它的功能与 HTML 中的style属性相同。
    
+**`style`** 属性指定了指定其元素的样式信息。它的功能与 HTML 中的[style](/zh-CN/docs/Web/HTML/Global_attributes/style)属性相同。
 
-
    使用环境
    
+## 使用环境
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesPresentation attribute
    Value<style>
    AnimatableNo
    
+| Categories | Presentation attribute |
+| ---------- | ---------------------- |
+| Value      | \
+
+```
 
-
    Live sample
    
+**Live sample**
 
-
    {{ EmbedLiveSample('示例','120','120') }}
    
+{{ EmbedLiveSample('示例','120','120') }}
 
-
    元素
    
+## 元素
 
-
    以下元素可以运用文本锚点属性：
    
+以下元素可以运用文本锚点属性：
 
-
+- [Text content elements](/en/SVG/Element#Text_content_elements) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/text-decoration/index.md b/files/zh-cn/web/svg/attribute/text-decoration/index.md
index cf9da0b2bfd349..8261393bde09d0 100644
--- a/files/zh-cn/web/svg/attribute/text-decoration/index.md
+++ b/files/zh-cn/web/svg/attribute/text-decoration/index.md
@@ -3,43 +3,29 @@ title: text-decoration
 slug: Web/SVG/Attribute/text-decoration
 translation_of: Web/SVG/Attribute/text-decoration
 ---
-
    « SVG Attribute reference home
    
+« [SVG Attribute reference home](/en/SVG/Attribute)
 
-
    text-decoration 属性的作用跟{{ cssxref("text-decoration","CSS Text Decoration") }} 特性差不多，当然除了它是一个 CSS 属性。浏览 {{ cssxref("text-decoration","CSS Text Decoration") }} 获取进一步的信息。
    
+`text-decoration` 属性的作用跟{{ cssxref("text-decoration","CSS Text Decoration") }} 特性差不多，当然除了它是一个 CSS 属性。浏览 {{ cssxref("text-decoration","CSS Text Decoration") }} 获取进一步的信息。
 
-
    使用环境
    
+## 使用环境
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    分类外观属性
    值none | underline | overline | line-through | blink | inherit
    是否可用于动画Yes
    
+| 分类           | 外观属性                                                              |
+| -------------- | --------------------------------------------------------------------- |
+| 值             | none \| underline \| overline \| line-through \| blink \| **inherit** |
+| 是否可用于动画 | Yes                                                                   |
 
-
    元素
    
+## 元素
 
-
    后代元素可以继承 text-decoration 这个属性
    
+```plain
+后代元素可以继承 text-decoration 这个属性
+```
 
-
+- [Text content elements](/en/SVG/Element#TextContent) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    相关
    
+## 相关
 
-
      
- 
    • {{ cssxref("text-decoration", "CSS Text Decoration") }}
      • 
-
    
+- {{ cssxref("text-decoration", "CSS Text Decoration") }}
diff --git a/files/zh-cn/web/svg/attribute/transform/index.md b/files/zh-cn/web/svg/attribute/transform/index.md
index 3c2c319eeed839..c5f92036e1f538 100644
--- a/files/zh-cn/web/svg/attribute/transform/index.md
+++ b/files/zh-cn/web/svg/attribute/transform/index.md
@@ -3,75 +3,65 @@ title: transform
 slug: Web/SVG/Attribute/transform
 translation_of: Web/SVG/Attribute/transform
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    transform 属性定义了一系列应用于元素和元素子元素的变换规则集合
    
+**`transform`** 属性定义了一系列应用于元素和元素子元素的变换规则集合
 
-
    
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g fill="grey"
+```html
+
+  
+    
+  
 
-  <use xlink:href="#heart" fill="none" stroke="red"/>
-</svg>
-
    
+  
+
+```
 
-
    {{EmbedLiveSample('topExample', '100%', 200)}}
    
-
    
+{{EmbedLiveSample('topExample', '100%', 200)}}
 
-
    提示： 从 SVG2 开始，transform 是一种图像属性，这意味着它可以用作 CSS 属性。但是请注意，CSS 属性和属性之间在语法上存在一些差异。有关在这种情况下使用的特定语法，请参见 CSS 属性{{cssxref('transform')}}的文档
    
+**提示：** 从 SVG2 开始，transform 是一种图像属性，这意味着它可以用作 CSS 属性。但是请注意，CSS 属性和属性之间在语法上存在一些差异。有关在这种情况下使用的特定语法，请参见 CSS 属性{{cssxref('transform')}}的文档
 
-
    作为表示属性，任何元素都可以使用transform （在 SVG 1.1 中，仅这 16 个元素被允许使用：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}}, and {{SVGElement('use')}})。
    
- 
    
- 另外，作为 SVG 1.1 的遗留物，{{SVGElement('linearGradient')}}和{{SVGElement('radialGradient')}}支持 gradientTransform 属性，而{{SVGElement('pattern')}}支持 patternTransform 属性，两者的行为完全相同于 transform 属性
    
+作为表示属性，任何元素都可以使用**`transform`** （在 SVG 1.1 中，仅这 16 个元素被允许使用：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}}, and {{SVGElement('use')}})。
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<transform-list>
    Default valuenone
    AnimatableYes
    
+另外，作为 SVG 1.1 的遗留物，{{SVGElement('linearGradient')}}和{{SVGElement('radialGradient')}}支持 `gradientTransform `属性，而{{SVGElement('pattern')}}支持 `patternTransform `属性，两者的行为完全相同于 `transform` 属性
 
-
    Transform functions
    
+| Value         | **[](/docs/Web/SVG/Content_type#Transform-list)** |
+| ------------- | ----------------------------------------------------------------- |
+| Default value | _none_                                                            |
+| Animatable    | Yes                                                               |
 
-
    transform 属性 <transform-list> 可以使用以下的所有 transform 函数
    
+## Transform functions
 
-
    警告： 根据规范，您还应该能够使用 CSS {{cssxref('transform-function', 'transform functions')}}，但是，这不能保证兼容性。
    
+`transform` 属性 *` `*可以使用以下的所有 `transform `函数
 
-
    Matrix
    
+**警告：** 根据规范，您还应该能够使用 CSS {{cssxref('transform-function', 'transform functions')}}，但是，这不能保证兼容性。
 
-
    matrix(<a> <b> <c> <d> <e> <f>) 函数以六个值的变换矩阵形式指定一个 transform。 matrix（a，b，c，d，e，f）等同于应用变换矩阵： \ begin {pmatrix} a＆c＆e \\ b＆d＆f \\ 0＆0＆1 \ end {pmatrix} 通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系：
    
- (xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1) \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix} 
    
+### Matrix
 
-
    举例
    
+`matrix(     )` 函数以六个值的变换矩阵形式指定一个 `transform`。 matrix（a，b，c，d，e，f）等同于应用变换矩阵： \ begin {pmatrix} a＆c＆e \\\ b＆d＆f \\\ 0＆0＆1 \ end {pmatrix} 通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系： (xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1) \begin{pmatrix} x*{\mathrm{newCoordSys}} \\ y*{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x*{\mathrm{prevCoordSys}} \\ y*{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x*{\mathrm{prevCoordSys}} + c y*{\mathrm{prevCoordSys}} + e \\ b x*{\mathrm{prevCoordSys}} + d y*{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}
 
-
+#### 举例
 
-
    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <rect x="10" y="10" width="30" height="20" fill="green" />
+```css hidden
+html,body,svg { height:100% }
+```
 
-  <!--
+```html
+
+  
+
+  
+  
+
+```
 
-
    {{EmbedLiveSample('Matrix', '100%', 200)}}
    
+{{EmbedLiveSample('Matrix', '100%', 200)}}
 
-
    Translate
    
+### Translate
 
-
     translate(<x> [<y>]) 变换函数通过 x 向量和 y 向量移动元素 (i.e. xnew = xold + <x>, ynew = yold + <y>). 如果 y 向量没有被提供，那么默认为 0 
    
+`translate( [])` 变换函数通过 `x` 向量和 `y` 向量移动元素 (i.e. `xnew = xold + , ynew = yold + `). 如果 `y` 向量没有被提供，那么默认为 `0`
 
-
    举例
    
+#### 举例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- No translation -->
-  <rect x="5" y="5" width="40" height="40" fill="green" />
+```html
+
+  
+  
 
-  <!-- Horizontal translation -->
-  <rect x="5" y="5" width="40" height="40" fill="blue"
-        transform="translate(50)" />
+  
+  
 
-  <!-- Vertical translation -->
-  <rect x="5" y="5" width="40" height="40" fill="red"
-        transform="translate(0 50)" />
+  
+  
 
-  <!-- Both horizontal and vertical translation -->
-  <rect x="5" y="5" width="40" height="40" fill="yellow"
-         transform="translate(50,50)" />
-</svg>
    
+  
+  
+
+```
 
-
    {{EmbedLiveSample('Translate', '100%', 200)}}
    
+{{EmbedLiveSample('Translate', '100%', 200)}}
 
-
    Scale
    
+### Scale
 
-
    scale(<x> [<y>]) 变换函数通过 x 和 y指定一个 等比例放大缩小 操作。如果 y 没有被提供，那么假定为等同于 x
    
+`scale( [])` 变换函数通过 `x` 和 `y`指定一个 **等比例放大缩小** 操作。如果 `y` 没有被提供，那么假定为等同于 `x`
 
-
    举例
    
+#### 举例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- uniform scale -->
-  <circle cx="0" cy="0" r="10" fill="red"
-          transform="scale(4)" />
+```html
+
+  
+  
 
-  <!-- vertical scale -->
-  <circle cx="0" cy="0" r="10" fill="yellow"
-          transform="scale(1,4)" />
+  
+  
 
-  <!-- horizontal scale -->
-  <circle cx="0" cy="0" r="10" fill="pink"
-          transform="scale(4,1)" />
+  
+  
 
-  <!-- No scale -->
-  <circle cx="0" cy="0" r="10" fill="black" />
-</svg>
    
+  
+  
+
+```
 
-
    {{EmbedLiveSample('Scale', '100%', 200)}}
    
+{{EmbedLiveSample('Scale', '100%', 200)}}
 
-
    Rotate
    
+### Rotate
 
-
    rotate(<a> [<x> <y>]) 变换方法通过一个给定角度对一个指定的点进行旋转变换。如果 x 和 y 没有提供，那么默认为当前元素坐标系原点。否则，就以(x,y)为原点进行旋转。
    
+`rotate(     [ ])` 变换方法通过一个给定角度对一个指定的点进行旋转变换。如果 x 和 y 没有提供，那么默认为当前元素坐标系原点。否则，就以`(x,y)`为原点进行旋转。
 
-
    举例
    
+#### 举例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0" y="0" width="10" height="10" />
+```html
+
+  
 
-  <!-- rotation is done around the point 0,0 -->
-  <rect x="0" y="0" width="10" height="10" fill="red"
-        transform="rotate(100)" />
+  
+  
 
-  <!-- rotation is done around the point 10,10 -->
-  <rect x="0" y="0" width="10" height="10" fill="green"
-        transform="rotate(100,10,10)" />
-</svg>
    
+  
+  
+
+```
 
-
    {{EmbedLiveSample('Rotate', '100%', 200)}}
    
+{{EmbedLiveSample('Rotate', '100%', 200)}}
 
-
    SkewX
    
+### SkewX
 
-
    skewX(<a>) 变换函数指定了沿 x 轴倾斜 a° 的倾斜变换。
    
+`skewX(    )` 变换函数指定了沿 `x` 轴倾斜 `a°` 的倾斜变换。
 
-
    举例
    
+#### 举例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
-  <rect x="-3" y="-3" width="6" height="6" />
+```html
+
+  
 
-  <rect x="-3" y="-3" width="6" height="6" fill="red"
-        transform="skewX(30)" />
-</svg>
    
+  
+
+```
 
-
    {{EmbedLiveSample('SkewX', '100%', 200)}}
    
+{{EmbedLiveSample('SkewX', '100%', 200)}}
 
-
    SkewY
    
+### SkewY
 
-
    skewY(<a>) 变换函数指定了沿 y 轴倾斜 a° 的倾斜变换。
    
+`skewY(    )` 变换函数指定了沿 `y` 轴倾斜 `a°` 的倾斜变换。
 
-
    举例
    
+#### 举例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
-  <rect x="-3" y="-3" width="6" height="6" />
+```html
+
+  
 
-  <rect x="-3" y="-3" width="6" height="6" fill="red"
-        transform="skewY(30)" />
-</svg>
    
+  
+
+```
 
-
    {{EmbedLiveSample('SkewY', '100%', 200)}}
    
+{{EmbedLiveSample('SkewY', '100%', 200)}}
 
-
    Specification
    
+## Specification
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/type/index.md b/files/zh-cn/web/svg/attribute/type/index.md
index 1c5d68b6060780..6c832a95c75e6f 100644
--- a/files/zh-cn/web/svg/attribute/type/index.md
+++ b/files/zh-cn/web/svg/attribute/type/index.md
@@ -3,150 +3,70 @@ title: type
 slug: Web/SVG/Attribute/type
 translation_of: Web/SVG/Attribute/type
 ---
-
    {{SVGRef}}
    
-
-
    type 属性是一个类属性，他在不同的使用语境下有不同的意思。
    
-
-
      
- 
    • 对于{{SVGElement("animateTransform")}}元素 , 它决定了那些随时间变化的值的转换的类型
      • 
- 
    • 对于 {{SVGElement("feColorMatrix")}} 元素，它指明了矩阵运算的类型。关键词 matrix 表明一个全 5x4 矩阵的值会被提供。其他关键字快捷方式代表允许不执行复杂矩阵运算下使用常用颜色。
      • 
- 
    • 对于{{SVGElement("feFuncR")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncB")}}, 和{{SVGElement("feFuncA")}} 元素，它指明了组件传递函数的类型。
      • 
- 
    • 对于 {{SVGElement("feTurbulence")}} 元素，它表示应以噪声函数还是湍流函数执行过滤。
      • 
- 
    • 对于 {{SVGElement("style")}} 和 {{SVGElement("script")}} 元素，它定义了元素内容的类型。
      • 
-
    
-
-
    Usage context
    
-
-
    For the {{SVGElement("animateTransform")}} elements
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    Valuetranslate | scale | rotate | skewX | skewY
    AnimatableNo
    Normative documentSVG 1.1 (2nd Edition)
    
-
-
    For the {{ SVGElement("feColorMatrix") }} element
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    Valuematrix | saturate | hueRotate | luminanceToAlpha
    AnimatableYes
    Normative documentSVG 1.1 (2nd Edition)
    
-
-
    For the {{ SVGElement("feFuncR") }}, {{ SVGElement("feFuncG") }}, {{ SVGElement("feFuncB") }}, and {{ SVGElement("feFuncA") }} elements
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    Valueidentity | table | discrete | linear | gamma
    AnimatableYes
    Normative documentSVG 1.1 (2nd Edition)
    
-
-
    For the {{ SVGElement("feTurbulence") }} element
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    ValuefractalNoise | turbulence
    AnimatableYes
    Normative documentSVG 1.1 (2nd Edition)
    
-
-
    For the {{ SVGElement("style") }} and {{SVGElement("script")}} elements
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    Value<content-type>
    AnimatableNo
    Normative documentSVG 1.1 (2nd Edition) : script
    
-    SVG 1.1 (2nd Edition) : style
    
-
-
    Example
    
-
-
    Elements
    
-
-
    The following elements can use the values attribute
    
-
-
      
- 
    • {{SVGElement("animateTransform")}}
      • 
- 
    • {{SVGElement("feColorMatrix")}}
      • 
- 
    • {{SVGElement("feFuncA")}}
      • 
- 
    • {{SVGElement("feFuncB")}}
      • 
- 
    • {{SVGElement("feFuncG")}}
      • 
- 
    • {{SVGElement("feFuncR")}}
      • 
- 
    • {{SVGElement("feTurbulence")}}
      • 
- 
    • {{SVGElement("script")}}
      • 
- 
    • {{SVGElement("style")}}
      • 
-
    
+{{SVGRef}}
+
+type 属性是一个类属性，他在不同的使用语境下有不同的意思。
+
+- 对于{{SVGElement("animateTransform")}}元素 , 它决定了那些随时间变化的值的转换的类型
+- 对于 {{SVGElement("feColorMatrix")}} 元素，它指明了矩阵运算的类型。关键词 `matrix` 表明一个全 5x4 矩阵的值会被提供。其他关键字快捷方式代表允许不执行复杂矩阵运算下使用常用颜色。
+- 对于{{SVGElement("feFuncR")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncB")}}, 和{{SVGElement("feFuncA")}} 元素，它指明了组件传递函数的类型。
+- 对于 {{SVGElement("feTurbulence")}} 元素，它表示应以噪声函数还是湍流函数执行过滤。
+- 对于 {{SVGElement("style")}} 和 {{SVGElement("script")}} 元素，它定义了元素内容的类型。
+
+## Usage context
+
+### For the {{SVGElement("animateTransform")}} elements
+
+| Categories         | _None_                                                                                                |
+| ------------------ | ----------------------------------------------------------------------------------------------------- |
+| Value              | **`translate`** \| `scale` \| `rotate` \| `skewX` \| `skewY`                                          |
+| Animatable         | No                                                                                                    |
+| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElementTypeAttribute) |
+
+### For the {{ SVGElement("feColorMatrix") }} element
+
+| Categories         | _None_                                                                                      |
+| ------------------ | ------------------------------------------------------------------------------------------- |
+| Value              | **`matrix`** \| `saturate` \| `hueRotate` \| `luminanceToAlpha`                             |
+| Animatable         | Yes                                                                                         |
+| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#feColorMatrixTypeAttribute) |
+
+### For the {{ SVGElement("feFuncR") }}, {{ SVGElement("feFuncG") }}, {{ SVGElement("feFuncB") }}, and {{ SVGElement("feFuncA") }} elements
+
+| Categories         | _None_                                                                                            |
+| ------------------ | ------------------------------------------------------------------------------------------------- |
+| Value              | `identity` \| `table` \| `discrete` \| `linear` \| `gamma`                                        |
+| Animatable         | Yes                                                                                               |
+| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#feComponentTransferTypeAttribute) |
+
+### For the {{ SVGElement("feTurbulence") }} element
+
+| Categories         | _None_                                                                                     |
+| ------------------ | ------------------------------------------------------------------------------------------ |
+| Value              | `fractalNoise` \| **`turbulence`**                                                         |
+| Animatable         | Yes                                                                                        |
+| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#feTurbulenceTypeAttribute) |
+
+### For the {{ SVGElement("style") }} and {{SVGElement("script")}} elements
+
+| Categories         | _None_                                                                                                                                                                                                 |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Value              |                                                                                                                                                                                          |
+| Animatable         | No                                                                                                                                                                                                     |
+| Normative document | [SVG 1.1 (2nd Edition) : script](http://www.w3.org/TR/SVG11/script.html#ScriptElementTypeAttribute) [SVG 1.1 (2nd Edition) : style](http://www.w3.org/TR/SVG11/styling.html#StyleElementTypeAttribute) |
+
+## Example
+
+## Elements
+
+The following elements can use the `values` attribute
+
+- {{SVGElement("animateTransform")}}
+- {{SVGElement("feColorMatrix")}}
+- {{SVGElement("feFuncA")}}
+- {{SVGElement("feFuncB")}}
+- {{SVGElement("feFuncG")}}
+- {{SVGElement("feFuncR")}}
+- {{SVGElement("feTurbulence")}}
+- {{SVGElement("script")}}
+- {{SVGElement("style")}}
diff --git a/files/zh-cn/web/svg/attribute/units-per-em/index.md b/files/zh-cn/web/svg/attribute/units-per-em/index.md
index 1ea629c4f0944a..4a3d414473ed2a 100644
--- a/files/zh-cn/web/svg/attribute/units-per-em/index.md
+++ b/files/zh-cn/web/svg/attribute/units-per-em/index.md
@@ -3,44 +3,28 @@ title: units-per-em
 slug: Web/SVG/Attribute/units-per-em
 translation_of: Web/SVG/Attribute/units-per-em
 ---
-
    {{SVGRef}}{{deprecated_header("SVG 2")}}
    
-
-
    The units-per-em attribute specifies the number of coordinate units on the "em square", an abstract square whose height is the intended distance between lines of type in the same type size. This is the size of the design grid on which {{Glossary("glyph", "glyphs")}} are laid out.
    
-
-
    
-
    Note: This value is almost always necessary as nearly every other attribute requires the definition of a design grid.
    
-
    
-
-
    Only one element is using this attribute: {{SVGElement("font-face")}}
    
-
-
    Usage notes
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<number>
    Default value1000
    AnimatableNo
    
-
-
    
- 
    <number>
    
- 
    This value indicates the the number of coordinate units on the em square.
    
-
    
-
-
    Specifications
    
+{{SVGRef}}{{deprecated_header("SVG 2")}}
+
+The **`units-per-em`** attribute specifies the number of coordinate units on the "em square", an abstract square whose height is the intended distance between lines of type in the same type size. This is the size of the design grid on which {{Glossary("glyph", "glyphs")}} are laid out.
+
+> **备注：** This value is almost always necessary as nearly every other attribute requires the definition of a design grid.
+
+Only one element is using this attribute: {{SVGElement("font-face")}}
+
+## Usage notes
+
+| Value         | [``](/en-US/docs/Web/SVG/Content_type#Number) |
+| ------------- | ----------------------------------------------------- |
+| Default value | `1000`                                                |
+| Animatable    | No                                                    |
+
+- ``
+  - : This value indicates the the number of coordinate units on the em square.
+
+## Specifications
 
 {{Specifications}}
 
-
    Browser compatibility
    
+## Browser compatibility
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/values/index.md b/files/zh-cn/web/svg/attribute/values/index.md
index 317a6e77d8e99a..5379ef27066842 100644
--- a/files/zh-cn/web/svg/attribute/values/index.md
+++ b/files/zh-cn/web/svg/attribute/values/index.md
@@ -3,75 +3,41 @@ title: values
 slug: Web/SVG/Attribute/values
 translation_of: Web/SVG/Attribute/values
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    values 属性具有不同的含义，具体取决于使用的上下文，它可以定义在动画过程中使用的值序列，或者它是颜色矩阵的数字列表，根据颜色类型的不同，它们的解释也不同。 要执行的颜色更改。
    
+values 属性具有不同的含义，具体取决于使用的上下文，它可以定义在动画过程中使用的值序列，或者它是颜色矩阵的数字列表，根据颜色类型的不同，它们的解释也不同。 要执行的颜色更改。
 
-
    五个元素正在使用此属性: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("feColorMatrix")}}
    
+五个元素正在使用此属性: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("feColorMatrix")}}
 
-
    animate, animateColor, animateMotion, animateTransform
    
+## animate, animateColor, animateMotion, animateTransform
 
-
    对于 {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, 和 {{SVGElement("animateTransform")}}, values是一个列表 定义动画过程中的值序列的值。 如果指定了此属性，则将忽略在元素上设置的任何 {{SVGAttr("from")}}, {{SVGAttr("to")}}, 和 {{SVGAttr("by")}} 属性值。
    
+对于 {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, 和 {{SVGElement("animateTransform")}}, `values`是一个列表 定义动画过程中的值序列的值。 如果指定了此属性，则将忽略在元素上设置的任何 {{SVGAttr("from")}}, {{SVGAttr("to")}}, 和 {{SVGAttr("by")}} 属性值。
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<list-of-values>
    Default valueNone
    AnimatableNo
    
+| Value         | [``](/en-US/docs/Web/SVG/Content_type#List-of-Ts) |
+| ------------- | ----------------------------------------------------------------- |
+| Default value | _None_                                                            |
+| Animatable    | No                                                                |
 
-
    
- 
    <list-of-values>
    
- 
    该值包含一个或多个值的分号分隔列表。 值的类型由 {{SVGAttr("href")}} 和 {{SVGAttr("attributeName")}} 属性定义。
    
-
    
+- ``
+  - : 该值包含一个或多个值的分号分隔列表。 值的类型由 {{SVGAttr("href")}} 和 {{SVGAttr("attributeName")}} 属性定义。
 
-
    feColorMatrix
    
+## feColorMatrix
 
-
    对于 {{SVGElement("feColorMatrix")}} 元素，值是根据 {{SVGAttr("type")}} 属性值不同解释的数字列表。
    
+对于 {{SVGElement("feColorMatrix")}} 元素，值是根据 {{SVGAttr("type")}} 属性值不同解释的数字列表。
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Value<list-of-numbers>
    Default valueIf type="matrix", identity matrix,
    
-    if type="saturate", 1, resulting in identity matrix,
    
-    if type="hueRotate", 0, resulting in identity matrix
    AnimatableYes
    
+| Value         | [``](/en-US/docs/Web/SVG/Content_type#List-of-Ts)                                                                                       |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Default value | _If `type="matrix"`, identity matrix, if `type="saturate"`, `1`, resulting in identity matrix, if `type="hueRotate"`, `0`, resulting in identity matrix_ |
+| Animatable    | Yes                                                                                                                                                      |
 
-
    
- 
    <list-of-numbers>
    
- 
    
- 
    该值是一个数字列表，根据 type 属性的值来定义不同解释：
    
+- ``
+  - : 该值是一个数字列表，根据 type 属性的值来定义不同解释：
 
- 
      
-  
    • For type="matrix", values 是 20 个矩阵值（a00 a01 a02 a03 a04 a10 a11 ... a34）的列表，以空格和/或逗号分隔。
      • 
-  
    • For type="saturate", values 是单个实数值（0 到 1）。
      • 
-  
    • For type="hueRotate", values 是一个单一的实数值（度）。.
      • 
-  
    • For type="luminanceToAlpha", values 不适用。
      • 
- 
    
- 
    
-
    
+    - `type="matrix"`，`values` 是 20 个矩阵值（a00 a01 a02 a03 a04 a10 a11 ... a34）的列表，以空格和/或逗号分隔。
+    - `type="saturate"`，`values` 是单个实数值（0 到 1）。
+    - `type="hueRotate"`，`values` 是一个单一的实数值（度）。
+    - `type="luminanceToAlpha"`，`values` 不适用。
 
-
    Specifications
    
+## Specifications
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/vector-effect/index.md b/files/zh-cn/web/svg/attribute/vector-effect/index.md
index 786b234d9f5045..dbf0e1fb8484a3 100644
--- a/files/zh-cn/web/svg/attribute/vector-effect/index.md
+++ b/files/zh-cn/web/svg/attribute/vector-effect/index.md
@@ -3,72 +3,59 @@ title: vector-effect
 slug: Web/SVG/Attribute/vector-effect
 translation_of: Web/SVG/Attribute/vector-effect
 ---
-
    {{SVGRef}}
    
-
-
    vector-effect 属性指明绘制对象时要使用的矢量效果。在任何其他合成操作（如滤镜，蒙版和剪辑等）之前，都要应用矢量效果。
    
-
-
    备注： 作为显示性属性， vector-effect 也可以直接在 CSS 样式表中作为属性使用。
    
-
-
    作为显示性属性，它能被应用到任何元素，但只对这 10 个元素有效果: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}} {{SVGElement("tspan")}}, and {{SVGElement("use")}}
    
-
-
    用法说明
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    值none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position
    默认值none
    可动画性是
    
-
-
    
- 
    none
    
- 
    该值指定不应用矢量效果，即，使用默认的渲染行为，即首先用指定的绘画填充形状的几何形状，然后使用指定的绘画描边轮廓。
    
- 
    non-scaling-stroke
    
- 
    该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。
    
- 
    non-scaling-size
    
- 
    该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，该用户坐标系的比例也不会更改。但是，它没有指定抑制旋转和偏斜。同样，它也不指定用户坐标系的原点。由于此值抑制了用户坐标系的缩放，因此它还具有non-scaling-stroke的特性。
    
- 
    non-rotation
    
- 
    该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间发生任何变换更改，该用户坐标系的旋转和倾斜仍被抑制。但是，它没有指定抑制缩放。同样，它也没有指定用户坐标系的原点。
    
- 
    fixed-position
    
- 
    该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，用户坐标系的位置都是固定的。但是，它没有指定抑制旋转，偏斜和缩放。当同时指定了该矢量效果和 {{SVGAttr("transform")}} 属性， {{SVGAttr("transform")}} 属性将因该矢量效果而被消耗。
    
-
    
-
-
    示例
    
-
-
    Example: vector-effect="non-scaling-stroke"
    
-
-
    <svg viewBox="0 0 500 240">
-  <!-- normal -->
-  <path d="M10,20L40,100L39,200z" stroke="black" stroke-width="2px" fill="none"></path>
-
-  <!-- scaled -->
-  <path transform="translate(100,0)scale(4,1)" d="M10,20L40,100L39,200z" stroke="black"
-      stroke-width="2px" fill="none"></path>
-
-  <!-- fixed-->
-  <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="M10,20L40,100L39,200z"
-      stroke="black" stroke-width="2px" fill="none"></path>
-</svg>
-
    
-
-
    结果
    
-
-
    {{EmbedLiveSample("Example_vector-effectnon-scaling-stroke", 550, 300)}}
    
-
-
    规范
    
+{{SVGRef}}
+
+**`vector-effect`** 属性指明绘制对象时要使用的矢量效果。在任何其他合成操作（如滤镜，蒙版和剪辑等）之前，都要应用矢量效果。
+
+**备注：** 作为显示性属性， `vector-effect` 也可以直接在 CSS 样式表中作为属性使用。
+
+作为显示性属性，它能被应用到任何元素，但只对这 10 个元素有效果: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}} {{SVGElement("tspan")}}, and {{SVGElement("use")}}
+
+## 用法说明
+
+| 值       | `none` \| `non-scaling-stroke` \| `non-scaling-size` \| `non-rotation` \| `fixed-position` |
+| -------- | ------------------------------------------------------------------------------------------ |
+| 默认值   | `none`                                                                                     |
+| 可动画性 | 是                                                                                         |
+
+- `none`
+  - : 该值指定不应用矢量效果，即，使用默认的渲染行为，即首先用指定的绘画填充形状的几何形状，然后使用指定的绘画描边轮廓。
+- `non-scaling-stroke`
+  - : 该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。
+- `non-scaling-size`
+  - : 该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，该用户坐标系的比例也不会更改。但是，它没有指定抑制旋转和偏斜。同样，它也不指定用户坐标系的原点。由于此值抑制了用户坐标系的缩放，因此它还具有`non-scaling-stroke`的特性。
+- `non-rotation`
+  - : 该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间发生任何变换更改，该用户坐标系的旋转和倾斜仍被抑制。但是，它没有指定抑制缩放。同样，它也没有指定用户坐标系的原点。
+- `fixed-position`
+  - : 该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，用户坐标系的位置都是固定的。但是，它没有指定抑制旋转，偏斜和缩放。当同时指定了该矢量效果和 {{SVGAttr("transform")}} 属性， {{SVGAttr("transform")}} 属性将因该矢量效果而被消耗。
+
+## 示例
+
+### Example: vector-effect="non-scaling-stroke"
+
+```html
+
+  
+  
+
+  
+  
+
+  
+  
+
+```
+
+#### 结果
+
+{{EmbedLiveSample("Example_vector-effectnon-scaling-stroke", 550, 300)}}
+
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/version/index.md b/files/zh-cn/web/svg/attribute/version/index.md
index ff2b93fc531fce..6c7b6371e256a9 100644
--- a/files/zh-cn/web/svg/attribute/version/index.md
+++ b/files/zh-cn/web/svg/attribute/version/index.md
@@ -3,29 +3,17 @@ title: version
 slug: Web/SVG/Attribute/version
 translation_of: Web/SVG/Attribute/version
 ---
-
    version 属性用于指明 SVG 文档遵循规范。 它只允许在根元素<svg> 上使用。 它纯粹是一个说明，对渲染或处理没有任何影响。
    
+**`version`** 属性用于指明 SVG 文档遵循规范。 它只允许在根元素[\](/zh-CN/docs/Web/SVG/Element/svg) 上使用。 它纯粹是一个说明，对渲染或处理没有任何影响。
 
-
    虽然它接受任何数字，但是只有1.0 和 1.1.这两个有效的选择。
    
+虽然它接受任何数字，但是只有`1.0` 和 `1.1`.这两个有效的选择。
 
-
    Usage context
    
+## Usage context
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别None
    值<number>
    动画属性No
    
+| 类别     | None                                    |
+| -------- | --------------------------------------- |
+| 值       | [](/en/SVG/Content_type#Number) |
+| 动画属性 | No                                      |
 
-
    规范
    
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/viewbox/index.md b/files/zh-cn/web/svg/attribute/viewbox/index.md
index 67297a5b12d5c3..88ab618ea2c917 100644
--- a/files/zh-cn/web/svg/attribute/viewbox/index.md
+++ b/files/zh-cn/web/svg/attribute/viewbox/index.md
@@ -7,110 +7,92 @@ tags:
   - viewBox
 translation_of: Web/SVG/Attribute/viewBox
 ---
-
    « SVG 属性参考
    
+« [SVG 属性参考](/en/SVG/Attribute)
 
-
    viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
    
+viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
 
-
    viewBox 属性的值是一个包含 4 个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素，查看属性{{ SVGAttr("preserveAspectRatio") }}。
    
+viewBox 属性的值是一个包含 4 个参数的列表 `min-x`, `min-y`, `width` and `height`， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素，查看属性{{ SVGAttr("preserveAspectRatio") }}。
 
-
    不允许宽度和高度为负值，0 则禁用元素的呈现。
    
+不允许宽度和高度为负值，0 则禁用元素的呈现。
 
-
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <!--
+```html
+
+  
+  
 
-  <!--
+  
+  
+
 
-<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
-  <!--
+
+  
+  
 
-  <!--
+  
+  
+
 
-<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
-  <!--
+
+  
+  
 
-  <!--
+  
+  
+
+```
 
-
    {{EmbedLiveSample('topExample', '100%', 200)}}
    
+{{EmbedLiveSample('topExample', '100%', 200)}}
 
+这个属性会受到 {{ SVGAttr("preserveAspectRatio") }} 的影响。
 
+> **备注：** `width` 或者 `height` 的值，小于或等于 0 的情况下，这个元素将不会被渲染出来。
 
-
    这个属性会受到 {{ SVGAttr("preserveAspectRatio") }} 的影响。
    
+有 {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, 和 {{ SVGElement("view") }} 等五个 svg 元素可以有这个属性。
 
-
    
-
    温馨提示:：width 或者 height 的值，小于或等于 0 的情况下，这个元素将不会被渲染出来。
    
-
    
+## Usage context
 
-
    有 {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, 和 {{ SVGElement("view") }} 等五个 svg 元素可以有这个属性。
    
+| Categories | None        |
+| ---------- | ----------- |
+| Value      | _See above_ |
+| Animatable | Yes         |
 
-
    Usage context
    
+## Elements
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    CategoriesNone
    ValueSee above
    AnimatableYes
    
+下面的元素可以使用 viewBox 属性
 
-
    Elements
    
+- {{ SVGElement("svg") }}
+- {{ SVGElement("symbol") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("marker") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("view") }}
 
-
    下面的元素可以使用 viewBox 属性
    
-
-
      
- 
    • {{ SVGElement("svg") }}
      • 
- 
    • {{ SVGElement("symbol") }}
      • 
- 
    • {{ SVGElement("image") }}
      • 
- 
    • {{ SVGElement("marker") }}
      • 
- 
    • {{ SVGElement("pattern") }}
      • 
- 
    • {{ SVGElement("view") }}
      • 
-
    
-
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    See also
    
+## See also
 
-
+- [SVG Getting Started: Positions](/en/SVG/Tutorial/Positions)
diff --git a/files/zh-cn/web/svg/attribute/visibility/index.md b/files/zh-cn/web/svg/attribute/visibility/index.md
index 3bbc9b9c7718b8..08716467218135 100644
--- a/files/zh-cn/web/svg/attribute/visibility/index.md
+++ b/files/zh-cn/web/svg/attribute/visibility/index.md
@@ -7,53 +7,37 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/visibility
 ---
-
    « SVG 属性参考主页
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
 
-
    visibility属性让你能够控制一个图形元素的可见性。用了值hidden或者值collapse，当前的图形元素将不可见。
    
+`visibility`属性让你能够控制一个图形元素的可见性。用了值`hidden`或者值`collapse`，当前的图形元素将不可见。
 
-
    注意：如果 {{ SVGElement("tspan") }}元素、{{ SVGElement("tref") }}元素或{{ SVGElement("altGlyph") }}元素上的visibility属性设置为hidden，则文本变得不可见，但是依然占用文本布局计算的空间。
    
+> **备注：** 如果 {{ SVGElement("tspan") }}元素、{{ SVGElement("tref") }}元素或{{ SVGElement("altGlyph") }}元素上的`visibility`属性设置为`hidden`，则文本变得不可见，但是依然占用文本布局计算的空间。
 
-
    根据属性{{ SVGAttr("pointer-events") }}的值，图形元素如果属性visibility 值设置为 hidden，依然能够响应事件。
    
+根据属性{{ SVGAttr("pointer-events") }}的值，图形元素如果属性`visibility 值设置为 hidden，依然能够响应事件。`
 
-
    作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。请阅读{{ cssxref("visibility","CSS visibility") }}以了解更多信息。
    
+作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。请阅读{{ cssxref("visibility","CSS visibility") }}以了解更多信息。
 
-
    用法
    
+## 用法
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别外观属性
    值visible | hidden | collapse | inherit
    可变性Yes
    
+| 类别   | 外观属性                                     |
+| ------ | -------------------------------------------- |
+| 值     | **visible** \| hidden \| collapse \| inherit |
+| 可变性 | Yes                                          |
 
-
    示例
    
+## 示例
 
-
    元素
    
+## 元素
 
-
    下列元素楞以使用visibility属性：
    
+下列元素楞以使用`visibility`属性：
 
-
+- [图形元素](/en/SVG/Element#Graphics) »
+- [文本内容元素](/en/SVG/Element#Text_content_elements) »
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    参见
    
+## 参见
 
-
      
- 
    • 属性{{ SVGAttr("display") }} 
      • 
- 
    • {{ cssxref("visibility","CSS visibility") }}
      • 
-
    
+- 属性{{ SVGAttr("display") }}
+- {{ cssxref("visibility","CSS visibility") }}
diff --git a/files/zh-cn/web/svg/attribute/width/index.md b/files/zh-cn/web/svg/attribute/width/index.md
index e65fe151945889..863e1104dd784a 100644
--- a/files/zh-cn/web/svg/attribute/width/index.md
+++ b/files/zh-cn/web/svg/attribute/width/index.md
@@ -7,49 +7,35 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/width
 ---
-
    « SVG 属性参考主页
    
-
-
    该属性在用户坐标系统中标识了一个水平长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的宽度（请阅读每个元素的文档以了解例外情况）。
    
-
-
    除了<svg>元素之外，别的元素都必须指定该属性，<svg>的宽度默认是100%，而<filter>元素以及<mask>元素的默认宽度是120%。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<length>
    可变性Yes
    
-
-
    {{ page("/zh-CN/docs/Web/SVG/Content_type","长度") }}
    
-
-
    元素
    
-
-
    下列元素可以使用width属性：
    
-
-
      
- 
    • 滤镜元素 »
      • 
- 
    • {{ SVGElement("filter") }}
      • 
- 
    • {{ SVGElement("foreignObject") }}
      • 
- 
    • {{ SVGElement("image") }}
      • 
- 
    • {{ SVGElement("pattern") }}
      • 
- 
    • {{ SVGElement("rect") }}
      • 
- 
    • {{ SVGElement("svg") }}
      • 
- 
    • {{ SVGElement("use") }}
      • 
- 
    • {{ SVGElement("mask") }}
      • 
-
    
-
-
    规范
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
+
+该属性在用户坐标系统中标识了一个水平长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的宽度（请阅读每个元素的文档以了解例外情况）。
+
+除了``元素之外，别的元素都必须指定该属性，``的宽度默认是**100%**，而``元素以及``元素的默认宽度是**120%**。
+
+## 用法
+
+| 类别   | 无                                      |
+| ------ | --------------------------------------- |
+| 值     | [](/en/SVG/Content_type#Length) |
+| 可变性 | Yes                                     |
+
+{{ page("/zh-CN/docs/Web/SVG/Content_type","长度") }}
+
+## 元素
+
+下列元素可以使用`width`属性：
+
+- [滤镜元素](/en/SVG/Element#FilterPrimitive) »
+- {{ SVGElement("filter") }}
+- {{ SVGElement("foreignObject") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("rect") }}
+- {{ SVGElement("svg") }}
+- {{ SVGElement("use") }}
+- {{ SVGElement("mask") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/x/index.md b/files/zh-cn/web/svg/attribute/x/index.md
index a919985dd3ee8c..b4f0d4e782e171 100644
--- a/files/zh-cn/web/svg/attribute/x/index.md
+++ b/files/zh-cn/web/svg/attribute/x/index.md
@@ -7,56 +7,42 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/x
 ---
-
    « SVG 属性参考主页
    
-
-
    该属性在用户坐标系统中标识了一个 x 轴坐标。本坐标的确切效果依赖于每个元素。大多数时候，它体现了引用元素的矩形区域的左上角的 x 轴坐标（请阅读每个元素的文档以了解例外情况）。
    
-
-
    如果没有指定这个属性，效果相当于值被设置为 0，除了{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素；这两个元素的x默认值为-10%。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<coordinate>
    可变性Yes
    
-
-
    {{ page("/en/SVG/Content_type","coordinate") }}
    
-
-
    元素
    
-
-
    下列元素可以使用x属性：
    
-
-
      
- 
    • 滤镜元素 »
      • 
- 
    • {{ SVGElement("altGlyph") }}
      • 
- 
    • {{ SVGElement("fePointLight") }}
      • 
- 
    • {{ SVGElement("feSpotLight") }}
      • 
- 
    • {{ SVGElement("filter") }}
      • 
- 
    • {{ SVGElement("foreignObject") }}
      • 
- 
    • {{ SVGElement("glyphRef") }}
      • 
- 
    • {{ SVGElement("image") }}
      • 
- 
    • {{ SVGElement("pattern") }}
      • 
- 
    • {{ SVGElement("rect") }}
      • 
- 
    • {{ SVGElement("svg") }}
      • 
- 
    • {{ SVGElement("text") }}
      • 
- 
    • {{ SVGElement("use") }}
      • 
- 
    • {{ SVGElement("mask") }}
      • 
- 
    • {{ SVGElement("tref") }}
      • 
- 
    • {{ SVGElement("tspan") }}
      • 
-
    
-
-
    规范
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
+
+该属性在用户坐标系统中标识了一个 x 轴坐标。本坐标的确切效果依赖于每个元素。大多数时候，它体现了引用元素的矩形区域的左上角的 x 轴坐标（请阅读每个元素的文档以了解例外情况）。
+
+如果没有指定这个属性，效果相当于值被设置为 0，除了{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素；这两个元素的`x`默认值为**-10%**。
+
+## 用法
+
+| 类别   | 无                                              |
+| ------ | ----------------------------------------------- |
+| 值     | [](/en/SVG/Content_type#Coordinate) |
+| 可变性 | Yes                                             |
+
+{{ page("/en/SVG/Content_type","coordinate") }}
+
+## 元素
+
+下列元素可以使用`x`属性：
+
+- [滤镜元素](/en/SVG/Element#FilterPrimitive) »
+- {{ SVGElement("altGlyph") }}
+- {{ SVGElement("fePointLight") }}
+- {{ SVGElement("feSpotLight") }}
+- {{ SVGElement("filter") }}
+- {{ SVGElement("foreignObject") }}
+- {{ SVGElement("glyphRef") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("rect") }}
+- {{ SVGElement("svg") }}
+- {{ SVGElement("text") }}
+- {{ SVGElement("use") }}
+- {{ SVGElement("mask") }}
+- {{ SVGElement("tref") }}
+- {{ SVGElement("tspan") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/y/index.md b/files/zh-cn/web/svg/attribute/y/index.md
index 429824e6d392b0..fa87d8be3eadd5 100644
--- a/files/zh-cn/web/svg/attribute/y/index.md
+++ b/files/zh-cn/web/svg/attribute/y/index.md
@@ -7,56 +7,42 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Attribute/y
 ---
-
    « SVG 属性参考主页
    
-
-
    该属性在用户坐标系统中标识了一个 y 轴坐标。本坐标的确切效果依赖于每个元素。大多数时候，它体现了引用元素的矩形区域的左上角的 y 轴坐标（请阅读每个元素的文档以了解例外情况）。
    
-
-
    如果没有指定这个属性，效果相当于值被设置为0，除了<filter>元素以及<mask>元素；这两个元素的y默认值为-10%。
    
-
-
    用法
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    类别无
    值<coordinate>
    可变性Yes
    
-
-
    {{ page("/en/SVG/Content_type","coordinate") }}
    
-
-
    元素
    
-
-
    下列元素可以使用y属性：
    
-
-
      
- 
    • 滤镜元素 »
      • 
- 
    • {{ SVGElement("altGlyph") }}
      • 
- 
    • {{ SVGElement("fePointLight") }}
      • 
- 
    • {{ SVGElement("feSpotLight") }}
      • 
- 
    • {{ SVGElement("filter") }}
      • 
- 
    • {{ SVGElement("foreignObject") }}
      • 
- 
    • {{ SVGElement("glyphRef") }}
      • 
- 
    • {{ SVGElement("image") }}
      • 
- 
    • {{ SVGElement("pattern") }}
      • 
- 
    • {{ SVGElement("rect") }}
      • 
- 
    • {{ SVGElement("svg") }}
      • 
- 
    • {{ SVGElement("text") }}
      • 
- 
    • {{ SVGElement("use") }}
      • 
- 
    • {{ SVGElement("mask") }}
      • 
- 
    • {{ SVGElement("tref") }}
      • 
- 
    • {{ SVGElement("tspan") }}
      • 
-
    
-
-
    规范
    
+« [SVG 属性参考主页](/en/SVG/Attribute)
+
+该属性在用户坐标系统中标识了一个 y 轴坐标。本坐标的确切效果依赖于每个元素。大多数时候，它体现了引用元素的矩形区域的左上角的 y 轴坐标（请阅读每个元素的文档以了解例外情况）。
+
+如果没有指定这个属性，效果相当于值被设置为**0**，除了[``](/zh-CN/docs/Web/SVG/Element/filter)元素以及[``](/zh-CN/docs/Web/SVG/Element/mask)元素；这两个元素的`y`默认值为**-10%**。
+
+## 用法
+
+| 类别   | 无                                              |
+| ------ | ----------------------------------------------- |
+| 值     | [](/en/SVG/Content_type#Coordinate) |
+| 可变性 | Yes                                             |
+
+{{ page("/en/SVG/Content_type","coordinate") }}
+
+## 元素
+
+下列元素可以使用`y`属性：
+
+- [滤镜元素](/en/SVG/Element#FilterPrimitive) »
+- {{ SVGElement("altGlyph") }}
+- {{ SVGElement("fePointLight") }}
+- {{ SVGElement("feSpotLight") }}
+- {{ SVGElement("filter") }}
+- {{ SVGElement("foreignObject") }}
+- {{ SVGElement("glyphRef") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("rect") }}
+- {{ SVGElement("svg") }}
+- {{ SVGElement("text") }}
+- {{ SVGElement("use") }}
+- {{ SVGElement("mask") }}
+- {{ SVGElement("tref") }}
+- {{ SVGElement("tspan") }}
+
+## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/svg/content_type/index.md b/files/zh-cn/web/svg/content_type/index.md
index 4ce2e917026176..3be75e9cf4470d 100644
--- a/files/zh-cn/web/svg/content_type/index.md
+++ b/files/zh-cn/web/svg/content_type/index.md
@@ -1,373 +1,271 @@
 ---
 title: Content type
 slug: Web/SVG/Content_type
-tags:
-  - SVG
-  - 需要技术预览
-translation_of: Web/SVG/Content_type
 ---
-
    角度
    
+SVG 中使用了许多数据类型。本文列出了这些数据类型以及它们的语法和用途的描述。
 
-
    
- 
    <angle>
    
- 
    
- 
    可以用两种办法指定角度。如果用在样式表的属性的值中，<angle> 可以用如下方法定义：
    
+## 角度
 
- 
    angle ::= number (~"deg" | ~"grad" | ~"rad")?
    
+- \
+  - : 可以用两种办法指定角度。如果用在样式表的属性的值中，`` 可以用如下方法定义：`plain angle ::= number (~"deg" | ~"grad" | ~"rad")?` 在这里 deg 标识了度数，grad 标识了斜率，rad 标识了弧度。对于定义在 CSS2 中的属性，必须提供一个角度单位标识符。对于在 SVG 特有的属性和它们对应的外观属性中的角度值，角度单位标识符是可选的。如果没有提供，角度值会被潜在分配一个度数单位。在所有元素的外观属性中，无论是在 SVG1.1 中定义的，还是在 CSS2 中定义的，如果指定了角度标识符，角度标识符必须是小写的。如果角度用在一个 SVG 属性中，``可以用以下方式定义：
+  
+    ```plain
+    angle ::= number ("deg" | "grad" | "rad")?
+    ```
 
- 
    在这里 deg 标识了度数，grad 标识了斜率，rad 标识了弧度。
    
+    在这个 \ 值中，单位标识符必须是小写的。在 SVG DOM 中，\ 值使用{{domxref("SVGAngle")}}或{{domxref("SVGAnimatedAngle objects")}}表达。
 
- 
    对于定义在 CSS2 中的属性，必须提供一个角度单位标识符。对于在 SVG 特有的属性和它们对应的外观属性中的角度值，角度单位标识符是可选的。如果没有提供，角度值会被潜在分配一个度数单位。在所有元素的外观属性中，无论是在 SVG1.1 中定义的，还是在 CSS2 中定义的，如果指定了角度标识符，角度标识符必须是小写的。
    
+## 任意值
 
- 
    如果角度用在一个 SVG 属性中，<angle>可以用以下方式定义：
    
+- \
+  - : 基本类型 \ 是一个零字符或多字符的序列。具体如下：
 
- 
    angle ::= number ("deg" | "grad" | "rad")?
    
+    ```plain
+    anything ::= Char\*
+    ```
 
- 
    在这个<angle>值中，单位标识符必须是小写的。
    
+    在这里，[Char](http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char) 表示一个字符，XML 1.0 第 2.2 节中定义了它。
 
- 
    在 SVG DOM 中，<angle> 值使用{{domxref("SVGAngle")}}或{{domxref("SVGAnimatedAngle objects")}}表达。
    
- 
    
-
    
+## 时钟值
 
-
    任意值
    
+- \
+  - : 时钟值的句法与 [SMIL Animation](https://www.w3.org/TR/2001/REC-smil-animation-20010904/) 规范中写的句法相同。在这里重放一下时钟值的语法：
 
-
    
- 
    <anything>
    
- 
    
- 
    基本类型 <anything> 是一个零字符或多字符的序列。具体如下：
    
+    ```
+    Clock-val         ::= Full-clock-val | Partial-clock-val | Timecount-val
+    Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
+    Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
+    Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
+    Metric            ::= "h" | "min" | "s" | "ms"
+    Hours             ::= DIGIT+; any positive number
+    Minutes           ::= 2DIGIT; range from 00 to 59
+    Seconds           ::= 2DIGIT; range from 00 to 59
+    Fraction          ::= DIGIT+
+    Timecount         ::= DIGIT+
+    2DIGIT            ::= DIGIT DIGIT
+    DIGIT             ::= [0-9]
+    ```
 
- 
    anything ::= Char*
    
+    对于 `Timecount` 值，默认的公制前缀是 “s”（秒）。在时钟值中不能嵌入空白，而且前导和末尾的空白字符会被忽略掉。下面是合法的时钟值的示例：
 
- 
    在这里，Char 表示一个字符，XML 1.0 第 2.2 节中定义了它。
    
- 
    
-
    
+    - 完整时钟值：
+      - `02:30:03` >= 2 小时 30 分钟又 3 秒
+      - `50:00:10.25` = 50 小时 10 秒又 250 毫秒
+    
+    - 部分时钟值：
+      - `02:33` >= 2 分钟又 33 秒
+      - `00:10.5` = 10.5 秒 = 10 秒又 500 毫秒
+    
+    - Timecount 值：
+      - `3.2h` >= 3.2 小时 = 3 小时 12 分钟
+      - `45min` >= 45 分钟
+      - `30s` >= 30 秒
+      - `5ms` >= 5 毫秒
+      - `12.467` >= 12 秒又 467 毫秒
 
-
    时钟值
    
+    - 小数值是基数为 10 的浮点数，秒的界定。因此：
+      - `00.5s` = 500 毫秒
+      - `00:00.005` = 5 毫秒
 
-
    
- 
    <clock-value>
    
- 
    
- 
    时钟值的句法与SMIL Animation规范中写的句法相同。在这里重放一下时钟值的语法：
    
+## 颜色
 
- 
    Clock-val         ::= Full-clock-val | Partial-clock-val | Timecount-val
-Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
-Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
-Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
-Metric            ::= "h" | "min" | "s" | "ms"
-Hours             ::= DIGIT+; any positive number
-Minutes           ::= 2DIGIT; range from 00 to 59
-Seconds           ::= 2DIGIT; range from 00 to 59
-Fraction          ::= DIGIT+
-Timecount         ::= DIGIT+
-2DIGIT            ::= DIGIT DIGIT
-DIGIT             ::= [0-9]
-
    
+- \
+  - : 基本类型\是一个 CSS2 兼容的规范，针对 sRGB 颜色空间的颜色。\ 应用在 SVG 的属性 {{SVGAttr("color")}} 上，也是属性{{SVGAttr("fill")}}、属性{{SVGAttr("stroke")}}、属性{{SVGAttr("stop-color")}}、属性 {{SVGAttr("flood-color")}}和属性{{SVGAttr("lighting-color")}}的定义的组成部分，\ 还提供了可选的基于 ICC 的颜色规范。
 
- 
    对于Timecount值，默认的公制前缀是 “s”（秒）。在时钟值中不能嵌入空白，而且前导和末尾的空白字符会被忽略掉。
    
+    SVG 支持所有的定义在[CSS2 句法和基本数据类型](http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color)中的 \ 供选择的句法，而且还支持[CSS Color Module Level 3](http://www.w3.org/TR/css3-color/)中的 \ 句法（取决于编译器）。
 
- 
    下面是合法的时钟值的示例：
    
+    一个 \ 可以是一个关键词，或者一个数字化的 RGB 规范。除了这些颜色关键词，用户可以利用用户环境中的对象指定对应于颜色的关键词。 这些关键词的规范定义可以在[用户对颜色的引用](http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors)（CSS2 规范第 18.2 节）中找到。
 
- 
      
-  
    • 完整时钟值：
      
-   02:30:03  = 2 小时 30 分钟又 3 秒
      
-   50:00:10.25 = 50 小时 10 秒又 250 毫秒
      • 
-  
    • 部分时钟值：
      
-   02:33  = 2 分钟又 33 秒
      
-   00:10.5 = 10.5 秒 = 10 秒又 500 毫秒
      • 
-  
    • Timecount 值：
      
-   3.2h  = 3.2 小时 = 3 小时 12 分钟
      
-   45min  = 45 分钟
      
-   30s  = 30 秒
      
-   5ms  = 5 毫秒
      
-   12.467  = 12 秒又 467 毫秒
      • 
- 
    
+    一个 16 进制记号法的 RGB 值的格式是一个 “#” 后面紧跟着 3 个或者 6 个 16 进制字符。三数字 RGB 记号法（#rgb）可以转换成六数字 RGB 格式（#rrggbb），只需要复制数字，而不是添加 0。举个例子，#fb0 扩展为 #ffbb00。这样确保白色（#ffffff）可以用缩写记法 #fff 指定，去掉任何对显示器的色深的依赖。一个函数记号法的 RGB 值的格式是一个 RGB 开头函数后面跟着一个逗号分隔的三数值数列（可以是三个数字或者三个百分数）后面跟着一个右括号 “)”。一个 RGB 开头函数是一个大小写不敏感的字符串 “rgb(”，举个例子，“RGB(” 或者 “rGb(”。为了兼容性，建议使用全小写形式 “rgb(”。整型值 255 对应于 100%，也对应于 16 进制计号法中的 F 或 FF：`rgb(255,255,255)` = `rgb(100%,100%,100%)` = `#FFF`。数字值周围允许存在空白字符。所有的 RGB 值都指定在 sRGB 颜色空间里。使用 sRGB 提供了一个清楚的、客观的、可测量的颜色定义，可以关联到国际标准。
 
- 
    小数值是基数为 10 的浮点数，秒的界定。因此：
    
+    ```plain
+    color ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
+              | "rgb("integer, integer, integer")"
+              | "rgb("integer "%", integer "%", integer "%)"
+              | color-keyword
+    hexdigit ::= [0-9A-Fa-f]
+    ```
 
- 
    00.5s = 500 毫秒
    
-  00:00.005 = 5 毫秒
    
- 
    
-
    
+    在这里，color-keyword 要于匹配列于 [CSS Color Module Level 3](http://www.w3.org/TR/css3-color/) 中的颜色关键词（大小写不敏感）中的一个，要么匹配列于[对颜色的用户参考](http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors)中的一个。SVG DOM 对 \ 的定义，CSS 中也做了同样的定义。SVG 对颜色的扩展，包括指定基于 ICC 的颜色的能力，可以使用 DOM 接口{{domxref("SVGColor")}}来表现。
 
-
    颜色
    
+## 坐标
 
-
    
- 
    <color>
    
- 
    
- 
    基本类型<color>是一个 CSS2 兼容的规范，针对 sRGB 颜色空间的颜色。<color> 应用在 SVG 的属性 {{SVGAttr("color")}} 上，也是属性{{SVGAttr("fill")}}、属性{{SVGAttr("stroke")}}、属性{{SVGAttr("stop-color")}}、属性 {{SVGAttr("flood-color")}}和属性{{SVGAttr("lighting-color")}}的定义的组成部分，<color> 还提供了可选的基于 ICC 的颜色规范。
    
+- \
+  - : 一个\ 是一个用户坐标系统中的长度，是从用户坐标系统的原点沿着相关轴走出给定的距离（X 轴针对 X 坐标，Y 轴针对 Y 坐标）。它的句法与[\](/zh-CN/docs/SVG/Content_type#length)相同。在 SVG DOM 内部，一个 \ 代表了一个{{domxref("SVGLength")}} 或者一个{{domxref("SVGAnimatedLength")}}.
 
- 
    SVG 支持所有的定义在CSS2 句法和基本数据类型中的 <color> 供选择的句法，而且还支持CSS Color Module Level 3中的 <color> 句法（取决于编译器）。
    
+## 频率
 
- 
    一个<color> 可以是一个关键词，或者一个数字化的 RGB 规范。
    
+- \
+  - : 频率值用在可听到的属性上。就如 CSS2 中所定义的，一个频率值是一个 [\](/zh-CN/docs/SVG/Content_type#Number) 后面跟着一个频率单位标识符。频率单位标识符可以是：
 
- 
    除了这些颜色关键词，用户可以利用用户环境中的对象指定对应于颜色的关键词。 这些关键词的规范定义可以在用户对颜色的引用（CSS2 规范第 18.2 节）中找到。
    
+    - `Hz`：赫兹
+    - `kHz`：千赫
 
- 
    一个 16 进制记号法的 RGB 值的格式是一个 “#” 后面紧跟着 3 个或者 6 个 16 进制字符。三数字 RGB 记号法（#rgb）可以转换成六数字 RGB 格式（#rrggbb），只需要复制数字，而不是添加 0。举个例子，#fb0 扩展为 #ffbb00。这样确保白色（#ffffff）可以用缩写记法 #fff 指定，去掉任何对显示器的色深的依赖。一个函数记号法的 RGB 值的格式是一个 RGB 开头函数后面跟着一个逗号分隔的三数值数列（可以是三个数字或者三个百分数）后面跟着一个右括号 “)”。一个 RGB 开头函数是一个大小写不敏感的字符串 “rgb(”，举个例子，“RGB(” 或者 “rGb(”。为了兼容性，建议使用全小写形式 “rgb(”。整型值 255 对应于 100%，也对应于 16 进制计号法中的 F 或 FF：rgb(255,255,255) = rgb(100%,100%,100%) = #FFF。数字值周围允许存在空白字符。所有的 RGB 值都指定在 sRGB 颜色空间里。使用 sRGB 提供了一个清楚的、客观的、可测量的颜色定义，可以关联到国际标准。
    
+    频率值不能是负数。
 
- 
    color    ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
-             | "rgb("integer, integer, integer")"
-             | "rgb("integer "%", integer "%", integer "%)"
-             | color-keyword
-hexdigit ::= [0-9A-Fa-f]
-
    
+## FuncIRI
 
- 
    在这里，color-keyword 要于匹配列于CSS Color Module Level 3中的颜色关键词（大小写不敏感）中的一个，要么匹配列于对颜色的用户参考中的一个。
    
+- \
+  - : 用于引用的功能记号法，该引用的句法与{{cssxref("uri", "CSS URI")}}相同。
 
- 
    SVG DOM 对 <color> 的定义，CSS 中也做了同样的定义。SVG 对颜色的扩展，包括指定基于 ICC 的颜色的能力，可以使用 DOM 接口{{domxref("SVGColor")}}来表现。
    
- 
    
-
    
+## ICC 颜色
 
-
    坐标
    
+- \
+  - : \ 一份 ICC 颜色规范。在 SVG 1.1，一份 ICC 颜色规范，顾名思义，是一个参考了一个{{SVGElement("color-profile")}} 元素，以及一个或更多颜色成分值。语法如下所示：
 
-
    
- 
    <coordinate>
    
- 
    
- 
    一个<coordinate> 是一个用户坐标系统中的长度，是从用户坐标系统的原点沿着相关轴走出给定的距离（X 轴针对 X 坐标，Y 轴针对 Y 坐标）。它的句法与<length>相同。
    
+    ```plain
+    icccolor ::= "icc-color(" name (, number)+ ")"
+    ```
 
- 
    在 SVG DOM 内部，一个 <coordinate> 代表了一个{{domxref("SVGLength")}} 或者一个{{domxref("SVGAnimatedLength")}}.
    
- 
    
-
    
+    \ 对应的 SVG DOM 接口是{{domxref("SVGICCColor")}}。
 
-
    频率
    
+## 整型数
 
-
    
- 
    <frequency>
    
- 
    
- 
    频率值用在可听到的属性上。就如 CSS2 中所定义的，一个频率值是一个<number>后面跟着一个频率单位标识符。频率单位标识符可以是：
    
+- \
+  - : 用一个可选的正负符号（“+” 或 “-”）后面跟着一个或多个 0 到 9 的数字可以指定一个\：
 
- 
      
-  
    • Hz：赫兹
      • 
-  
    • kHz：千赫
      • 
- 
    
+    ```plain
+    integer ::= [+-]? [0-9]+
+    ```
 
- 
    频率值不能是负数。
    
- 
    
-
    
+    如果正负符号不出现，则这个数字是非负的。除非是另有声明为特殊的属性， 的范围是 -2147483648 到 2147483647 之间。在 SVG DOM 内部，一个  代表了一个数字或者一个{{domxref("SVGAnimatedInteger")}}。
 
-
    FuncIRI
    
+## IRI
 
-
    
- 
    <FuncIRI>
    
- 
    用于引用的功能记号法，该引用的句法与{{cssxref("uri", "CSS URI")}}相同。
    
-
    
+- \
+  - : 一个国际化资源标识符。在因特网上，资源是用 _IRI_（一个国际化资源标识符）标识的。举个例子，一个 SVG 文档调用了位于 http://example.com 上的 someDrawing.svg，可以使用下面的 _IRI_：
 
-
    ICC 颜色
    
+    ```
+    http://example.com/someDrawing.svg
+    ```
 
-
    
- 
    <icccolor>
    
- 
    
- 
    <icccolor> 一份 ICC 颜色规范。在 SVG 1.1，一份 ICC 颜色规范，顾名思义，是一个参考了一个{{SVGElement("color-profile")}} 元素，以及一个或更多颜色成分值。语法如下所示：
    
+    一个 _IRI_ 中包含一个 _IRI_ 片段标识符，就可以定位一个 XML 文档内部的特定的元素。一个包含有 _IRI_ 片段标识符的 _IRI_，由一个可选的基础 _IRI_ 后面跟着一个“#”号，再跟着一个 _IRI_ 片段标识符组成。举个例子，下面的 IRI 可以用来指定文件 someDrawing.svg 中的 ID 为“Lamppost”的元素：
 
- 
    icccolor ::= "icc-color(" name (, number)+ ")"
-
    
+    ```
+    http://example.com/someDrawing.svg#Lamppost
+    ```
 
- 
    <icccolor>对应的 SVG DOM 接口是{{domxref("SVGICCColor")}}。
    
- 
    
-
    
+    _IRI_ 用在 {{SVGAttr("xlink:href")}} 属性中。有些属性既允许 _IRI_ 作为内容，也允许文本字符串。为了消除歧意，避免一个文本字符串被当作 IRI，可以使用功能记号法 \。这只是简单用功能记号法分隔一个 IRI。注意：出于历史原因，为了与 CSS 规范兼容，分隔符是“url(”和“)”。该 _FuncIRI_ 格式用在外观属性中。
 
-
    整型数
    
+    SVG 广泛地使用了 _IRI_ 引用，引用对象既可以是绝对引用也可以是引对引用。举个例子，要用线性渐变填充一个矩形，你可以先定义一个 {{SVGElement("linearGradient")}} 元素，然后给它一个 ID，如下：
 
-
    
- 
    <integer>
    
- 
    
- 
    用一个可选的正负符号（“+” 或 “-”）后面跟着一个或多个 0 到 9 的数字可以指定一个<integer>：
    
+    ```html
+    ...
+    ```
 
- 
    integer ::= [+-]? [0-9]+
    
+    然后你再引用这个线性渐变，作为矩形的属性 {{SVGAttr("fill")}} 的值，如下：
 
- 
    如果正负符号不出现，则这个数字是非负的。
    
+    ```html
+    
+    ```
 
- 
    除非是另有声明为特殊的属性，<integer> 的范围是 -2147483648 到 2147483647 之间。
    
+    SVG 支持两种类型的 _IRI_ 引用：
 
- 
    在 SVG DOM 内部，一个 <integer> 代表了一个数字或者一个{{domxref("SVGAnimatedInteger")}}。
    
- 
    
-
    
+      - 本地 _IRI_ 引用，在这里 IRI 引用不能包含一个 `` 或 ``，因此只能包含一个片段标识符（例如：`` 或者 `#xpointer(id)`）。
+      - 非本地 _IRI_ 引用，在这里 _IRI_ 引用必须包含一个 `` 或 ``。
 
-
    IRI
    
+    欲了解完整的 SVG 中的 IRI 引用的规范请阅读 [SVG 1.1 (2nd Edition): IRI references](https://www.w3.org/TR/SVG/linking.html#IRIReference)。
 
-
    
- 
    <IRI>
    
- 
    
- 
    一个国际化资源标识符。
    
+## 长度
 
- 
    在因特网上，资源是用IRI（一个国际化资源标识符）标识的。举个例子，一个 SVG 文档调用了位于 http://example.com 上的 someDrawing.svg，可以使用下面的IRI：
    
+- \
+  - : 一个长度是一个可度量的距离，给定一个数字以及一个单位。长度可以用两种方法指定。如果在样式表中使用它，可以如下定义\：
 
- 
    http://example.com/someDrawing.svg
-
    
+    ```
+    length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?
+    ```
 
- 
    一个IRI中包含一个IRI片段标识符，就可以定位一个 XML 文档内部的特定的元素。一个包含有IRI片段标识符的IRI，由一个可选的基础IRI后面跟着一个“#”号，再跟着一个IRI片段标识符组成。举个例子，下面的 IRI 可以用来指定文件 someDrawing.svg 中的 ID 为“Lamppost”的元素：
    
+    请阅读 [CSS2 规范](https://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units) 以了解单位标识符的意义。
 
- 
    http://example.com/someDrawing.svg#Lamppost
-
    
+    在 CSS2 中定义的长度属性，必须提供单位标识符。而 SVG 专用属性的长度值以及它们对应的外观属性，长度单位标识符是可选的。如果没有提供单位标识符，长度值代表当前用户坐标系统中的一段距离。对于外观属性，无论是定义在 SVG1.1 还是定义在 CSS2 中，长度单位标识符必须是小写的。
 
- 
    IRIs 用在{{SVGAttr("xlink:href")}}属性中。有些属性既允许IRI作为内容，也允许文本字符串。为了消除歧意，避免一个文本字符串被当作 IRI，可以使用功能记号法<FuncIRI>。这只是简单用功能记号法分隔一个 IRI。注意：出于历史原因，为了与 CSS 规范兼容，分隔符是“url(”和“)”。该FuncIRI格式用在外观属性中。
    
+    如果是在 SVG 属性中使用长度，\需定义如下：
 
- 
    SVG 广泛地使用了IRI引用，引用对象既可以是绝对引用也可以是引对引用。举个例子，要用线性渐变填充一个矩形，你可以先定义一个{{SVGElement("linearGradient")}}元素，然后给它一个 ID，如下：
    
+    ```
+    length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?
+    ```
 
- 
    <linearGradient xml:id="MyGradient">...</linearGradient>
-
    
+    在这样的 \ 值中，单位标识符必须是小写的。
 
- 
    然后你再引用这个线性渐变，作为矩形的属性{{SVGAttr("fill")}}的值，如下：
    
+    注意，非属性 \ 定义同样允许百分比单位标识符。这意味着一个百分比长度值依赖于被指定百分比长度值的属性。分两种情况：
 
- 
    <rect fill="url(#MyGradient)"/>
-
    
+    - 百分比长度值表达了一个视口宽度或高度的百分比；
+    - 百分比长度值表达了一个给定对象上的边界盒的宽度或高度的百分比。
 
- 
    SVG 支持两种类型的IRI 引用：
    
+    在 SVG DOM 中，\值可以用{{domxref("SVGLength")}}对象或{{domxref("SVGAnimatedLength")}}对象来表达。
 
- 
      
-  
    • 本地IRI引用，在这里 IRI 引用不能包含一个<absoluteIRI>或<relativeIRI>，因此只能包含一个片段标识符（例如： #<elementID> 或者#xpointer(id<elementID>)）。
      • 
-  
    • 非本地IRI引用，在这里IRI引用必须包含一个<absoluteIRI>或<relativeIRI>。
      • 
- 
    
+## *T*值数列
 
- 
    欲了解完整的 SVG 中的 IRI 引用的规范请阅读SVG 1.1 (2nd Edition): IRI references。
    
- 
    
-
    
+- \
+  - : （在这里*T* 某些类型。）由一系列分开的值构成的数列。除非另有说明，SVG 的 XML 属性内的数列既可以是逗号分隔的，也可以是空格分隔的。用逗号作分隔符，逗号前面或后面可有带空格。数列中的空白被定义为一个或多个下列连续字符：“空格”（U+0020）、“制表符”（U+0009）、 “换行符”（U+000A）、 “回车符”（U+000D）以及“换页符”(U+000C)。下面是一个 EBNF 语法的模板，用来描述\句法：
 
-
    长度
    
+    ```plain
+    list-of-Ts ::= T | T, list-of-Ts
+    ```
 
-
    
- 
    <length>
    
- 
    
- 
    一个长度是一个可度量的距离，给定一个数字以及一个单位。长度可以用两种方法指定。如果在样式表中使用它，可以如下定义<length>：
    
+    在 SVG DOM 内部，\类型的值可以用一个限特定类型 _T_ 的接口来表达。举个例子，SVG DOM 中的\使用一个 {{domxref("SVGLengthList")}} 对象或者 {{domxref("SVGAnimatedLengthList")}} 对象来表达。
 
- 
    length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?
    
+## 命名
 
- 
    请阅读CSS2 规范 以了解单位标识符的意义。
    
+- \
+  - : 一个命名，是一个字符串，是不符合句法意义的少量的字符。
 
- 
    在 CSS2 中定义的长度属性，必须提供单位标识符。而 SVG 专用属性的长度值以及它们对应的外观属性，长度单位标识符是可选的。如果没有提供单位标识符，长度值代表当前用户坐标系统中的一段距离。对于外观属性，无论是定义在 SVG1.1 还是定义在 CSS2 中，长度单位标识符必须是小写的。
    
+    ```plain
+    name ::= [^,()#x20#x9#xd#xa] /* 除了 ",", "(", ")" 或 wsp 之外的任何字符 */
+    ```
 
- 
    如果是在 SVG 属性中使用长度，<length>需定义如下：
    
+## 数字
 
- 
    length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?
    
+- \
+  - : 真实数字可以用两种方法指定。如果用在样式表中，一个 \ 可以如下定义：`plain number ::= integer | [+-]? [0-9]* "." [0-9]+ `该句法与 CSS（CSS2 第 4.3.1 章节）中的定义一样。如果用在一个 SVG 属性中，一个 \ 可以用别的方法定义，允许一个数字后面跟着大数指数，以指定得更精确：
 
- 
    在这样的<length>值中，单位标识符必须是小写的。
    
+    ```plain
+    number ::= integer ([Ee] integer)?| [+-]? [0-9]\* "." [0-9]+ ([Ee] integer)?
+    ```
 
- 
    注意，非属性<length>定义同样允许百分比单位标识符。这意味着一个百分比长度值依赖于被指定百分比长度值的属性。分两种情况：
    
+    在 SVG DOM 内部，一个 \ 可以用浮点数、{{domxref("SVGNumber")}} 对象或者 {{domxref("SVGAnimatedNumber")}} 对象来表达。
 
- 
      
-  
    • 百分比长度值表达了一个视口宽度或高度的百分比；
      • 
-  
    • 百分比长度值表达了一个给定对象上的边界盒的宽度或高度的百分比。
      • 
- 
    
+## 带可取舍的后缀数字的数字
 
- 
    在 SVG DOM 中，<length>值可以用{domxref("SVGLength")}}对象或{{domxref("SVGAnimatedLength")}}对象来表达。
    
- 
    
-
    
+- \
+  - : 一对\，其中第二个 \ 是可视情况取舍的。
 
-
    T值数列
    
+    ```plain
+    number-optional-number ::= number | number, number
+    ```
 
-
    
- 
    <list-of-Ts>
    
- 
    
- 
    （在这里T 某些类型。）由一系列分开的值构成的数列。除非另有说明，SVG 的 XML 属性内的数列既可以是逗号分隔的，也可以是空格分隔的。用逗号作分隔符，逗号前面或后面可有带空格。
    
+    在 SVG DOM 中，一个 \ 可以用一对 {{domxref("SVGAnimatedInteger")}} 对象或者一对 {{domxref("SVGAnimatedNumber")}} 对象来表达。
 
- 
    数列中的空白被定义为一个或多个下列连续字符：“空格”（U+0020）、“制表符”（U+0009）、 “换行符”（U+000A）、 “回车符”（U+000D）以及“换页符”(U+000C)。
    
+## 不透明度值
 
- 
    下面是一个 EBNF 语法的模板，用来描述<list-of-Ts>句法：
    
+- \
+  - : 颜色不透明度或者当前对象填充的内容的不透明度，它是一个[\](/zh-CN/docs/SVG/Content_type#Number)。任何超出 0.0 到 1.0 范围的值将被压制回这个范围。0.0 表示完全透明，1.0 表示完全不透明。
 
- 
    list-of-Ts ::= T | T, list-of-Ts
    
+## 涂色
 
- 
    在 SVG DOM 内部，<list-of-Ts>类型的值可以用一个限特定类型T的接口来表达。举个例子，SVG DOM 中的<list-of-lengths>使用一个{{domxref("SVGLengthList")}}对象或者{{domxref("SVGAnimatedLengthList")}}对象来表达。
    
- 
    
-
    
+- \
+  - : 属性{{SVGAttr("fill")}}和属性{{SVGAttr("stroke")}}的值，是涂色类型的规范，用在要对一个给定元素填充或描边的时候。SVG 规范的[Specifying paint](http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint)章节中描述了\可用的选项以及句法。在 SVG DOM 内部，\ 值用{{domxref("SVGPaint")}}对象表达。
 
-
    命名
    
+## 百分数
 
-
    
- 
    <name>
    
- 
    
- 
    一个命名，是一个字符串，是不符合句法意义的少量的字符。
    
+- \
+  - : 一个数字后面跟着一个百分号“%”就可以指定一个百分数。
 
- 
    name  ::= [^,()#x20#x9#xD#xA] /* 除了 ",", "(", ")" 或 wsp 之外的任何字符 */
    
- 
    
-
    
+    ```plain
+    percentage ::= number "%"
+    ```
 
-
    数字
    
+    注意 \ 的意义取决于百分数是在一个样式表中指定的，还是在一个 SVG 属性非外观属性中指定的。百分数值总是关联到另一个值。举个例子，每种允许百分比的属性同时定义了引用了给百分比数参考的距离测量。在 SVG DOM 内部，\ 用 {{domxref("SVGNumber")}} 对象或 {{domxref("SVGAnimatedNumber")}} 对象表达。
 
-
    
- 
    <number>
    
- 
    
- 
    真实数字可以用两种方法指定。如果用在样式表中，一个 <number> 可以如下定义：
    
+## 时间
 
- 
    number ::= integer | [+-]? [0-9]* "." [0-9]+
    
+- \
    
-
    
-
-
    带可取舍的后缀数字的数字
    
-
-
    
- 
    <number-optional-number>
    
- 
    
- 
    一对<number>，其中第二个 <number> 是可视情况取舍的。
    
-
- 
    number-optional-number ::= number | number, number
    
-
- 
    在 SVG DOM 中，一个 <number-optional-number> 可以用一对{{domxref("SVGAnimatedInteger")}}对象或者一对{{domxref("SVGAnimatedNumber")}}对象来表达。
    
- 
    
-
    
-
-
    不透明度值
    
-
-
    
- 
    <opacity-value>
    
- 
    颜色不透明度或者当前对象填充的内容的不透明度，它是一个<number>。任何超出 0.0 到 1.0 范围的值将被压制回这个范围。0.0 表示完全透明，1.0 表示完全不透明。
    
-
    
-
-
    涂色
    
-
-
    
- 
    <paint>
    
- 
    
- 
    属性{{SVGAttr("fill")}}和属性{{SVGAttr("stroke")}}的值，是涂色类型的规范，用在要对一个给定元素填充或描边的时候。SVG 规范的Specifying paint章节中描述了<paint>可用的选项以及句法。
    
-
- 
    在 SVG DOM 内部，<paint> 值用{{domxref("SVGPaint")}}对象表达。
    
- 
    
-
    
-
-
    百分数
    
-
-
    
- 
    <percentage>
    
- 
    
- 
    一个数字后面跟着一个百分号“%”就可以指定一个百分数。
    
-
- 
    percentage ::= number "%"
    
-
- 
    注意<number> 的意义取决于百分数是在一个样式表中指定的，还是在一个 SVG 属性非外观属性中指定的。
    
-
- 
    百分数值总是关联到另一个值。举个例子，每种允许百分比的属性同时定义了引用了给百分比数参考的距离测量。
    
-
- 
    在 SVG DOM 内部，<percentage> 用{{domxref("SVGNumber")}}对象或{{domxref("SVGAnimatedNumber")}}对象表达。
    
- 
    
-
    
-
-
    时间
    
-
-
    
- 
    <time>
    
- 
    
- 
    一个时间值是一个 <number> 后面紧跟着时间单位标识符。时间单位标识符可以是：
    
-
- 
      
-  
    • ms：毫秒
      • 
-  
    • s：秒
      • 
- 
    
- 
    
-
    
-
-
    平移数列
    
-
-
    
- 
    <transform-list>
    
- 
    
- 
    一个<transform-list> 是用来指定一个坐标系统转换数列。属性{{SVGAttr("transform")}}的定义中给出了 <transform-list> 的可用值的详细描述。
    
-
- 
    在 SVG DOM 内部，一个 <transform-list> 值是用了一个{{domxref("SVGTransformList")}}对象或者{{domxref("SVGAnimatedTransformList")}}对象来表达的。
    
- 
    
-
    
+- \
+  - : 一个\ 是用来指定一个坐标系统转换数列。属性{{SVGAttr("transform")}}的定义中给出了 \ 的可用值的详细描述。在 SVG DOM 内部，一个 \ 值是用了一个{{domxref("SVGTransformList")}}对象或者{{domxref("SVGAnimatedTransformList")}}对象来表达的。
diff --git a/files/zh-cn/web/svg/element/animatemotion/index.md b/files/zh-cn/web/svg/element/animatemotion/index.md
index 4abbd69b2788f6..ae614ecb1f1b0c 100644
--- a/files/zh-cn/web/svg/element/animatemotion/index.md
+++ b/files/zh-cn/web/svg/element/animatemotion/index.md
@@ -7,71 +7,67 @@ tags:
   - 元素
 translation_of: Web/SVG/Element/animateMotion
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    <animateMotion> 元素定义了一个元素如何沿着运动路径进行移动。
    
+`` 元素定义了一个元素如何沿着运动路径进行移动。
 
-
    
-
    注意：为了复用一个已经定义的路径，就有必要使用一个 {{SVGElement("mpath")}} 元素嵌入到 <animateMotion> 中，而不是使用 {{SVGAttr("path")}}。
    
-
    
+> **备注：** 为了复用一个已经定义的路径，就有必要使用一个 {{SVGElement("mpath")}} 元素嵌入到 `` 中，而不是使用 {{SVGAttr("path")}}。
 
-
    html,body,svg { height:100%; margin: 0; padding: 0; display:block; }
    
+```css
+html,body,svg { height:100%; margin: 0; padding: 0; display:block; }
+```
 
-
    <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="lightgrey"
-    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
+```xml
+
+  
 
-  <circle r="5" fill="red">
-    <animateMotion dur="10s" repeatCount="indefinite"
-      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
-  </circle>
-</svg>
    
+  
+    
+  
+
+```
 
-
    {{EmbedLiveSample('Exemple', 150, '100%')}}
    
+{{EmbedLiveSample('Exemple', 150, '100%')}}
 
-
    用法
    
+## 用法
 
-
    {{svginfo}}
    
+{{svginfo}}
 
-
    属性
    
+## 属性
 
-
    Global 属性
    
+### Global 属性
 
-
+- [条件处理属性](/zh-CN/docs/SVG/Attribute#ConditionalProccessing) »
+- [核心属性](/zh-CN/docs/SVG/Attribute#Core) »
+- [动画事件属性](/zh-CN/docs/SVG/Attribute#AnimationEvent) »
+- [Xlink 属性](/zh-CN/docs/SVG/Attribute#XLink) »
+- [动画定时属性](/zh-CN/docs/SVG/Attribute#AnimationTiming) »
+- [动画值属性](/zh-CN/docs/SVG/Attribute#AnimationValue) »
+- [An 动画累加属性](/zh-CN/docs/SVG/Attribute#AnimationAddition) »
+- {{ SVGAttr("externalResourcesRequired") }}
 
-
    专有属性
    
+### 专有属性
 
-
      
- 
    • {{ SVGAttr("calcMode") }}
      • 
- 
    • {{ SVGAttr("path") }}
      • 
- 
    • {{ SVGAttr("keyPoints") }}
      • 
- 
    • {{ SVGAttr("rotate") }}
      • 
- 
    • {{ SVGAttr("origin") }}
      • 
-
    
+- {{ SVGAttr("calcMode") }}
+- {{ SVGAttr("path") }}
+- {{ SVGAttr("keyPoints") }}
+- {{ SVGAttr("rotate") }}
+- {{ SVGAttr("origin") }}
 
-
    DOM 接口
    
+## DOM 接口
 
-
    该元素实现了SVGAnimateMotionElement接口。
    
+该元素实现了`SVGAnimateMotionElement接口。`
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    相关内容
    
+## 相关内容
 
-
      
- 
    • {{ SVGElement("mpath") }}
      • 
-
    
+- {{ SVGElement("mpath") }}
diff --git a/files/zh-cn/web/svg/element/clippath/index.md b/files/zh-cn/web/svg/element/clippath/index.md
index e9069eb4c7a008..96bd23a1065bc9 100644
--- a/files/zh-cn/web/svg/element/clippath/index.md
+++ b/files/zh-cn/web/svg/element/clippath/index.md
@@ -8,84 +8,84 @@ tags:
   - 参考
 translation_of: Web/SVG/Element/clipPath
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    SVG 元素 <clipPath> 定义一条剪切路径，可作为其他元素的 {{SVGAttr("clip-path")}} 属性的值。
    
+[SVG](/zh-CN/docs/Web/SVG) 元素 **``** 定义一条剪切路径，可作为其他元素的 {{SVGAttr("clip-path")}} 属性的值。
 
-
    剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制。
    
+剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制。
 
-
    示例
    
+## 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 100 100">
-  <clipPath id="myClip">
-    <!--
+```html
+
+  
+    
+    
+  
 
-  <!-- 作为引用元素（英文原文：for reference）的黑色心形 -->
-  <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
+  
+  
 
-  <!--
+  
+  
+
+```
 
-
    /* 如果浏览器支持几何属性 r，可以加一点 css */
+```css
+/* 如果浏览器支持几何属性 r，可以加一点 css */
 
 @keyframes openYourHeart {from {r: 0} to {r: 60px}}
 
 #myClip circle {
   animation: openYourHeart 15s infinite;
-}
    
+}
+```
 
-
    {{EmbedLiveSample('示例', 100, 100)}}
    
+{{EmbedLiveSample('示例', 100, 100)}}
 
-
    从概念上讲，剪切路径等于给引用元素设置了一个自定义的可视区域。因此，它虽然会影响一个元素的绘制，但不会影响这个元素本身的几何形状，比如被剪切元素（通过 {{SVGAttr("clip-path")}} 属性引用了 <clipPath> 的元素及其子元素）的包围盒和没有被剪切时相同。
    
+从概念上讲，剪切路径等于给引用元素设置了一个自定义的可视区域。因此，它虽然会影响一个元素的绘制，但不会影响这个元素本身的几何形状，比如被剪切元素（通过 {{SVGAttr("clip-path")}} 属性引用了 `` 的元素及其子元素）的包围盒和没有被剪切时相同。
 
-
    默认情况下，{{cssxref("pointer-events")}} 不会在被剪切掉的区域（不可见的区域）内触发。举个例子，如果一个半径为 10 的圆形被剪切成半径为 5 的圆形，那么这个圆在半径为 5 以外的区域不会收到“click”事件。
    
+默认情况下，{{cssxref("pointer-events")}} 不会在被剪切掉的区域（不可见的区域）内触发。举个例子，如果一个半径为 10 的圆形被剪切成半径为 5 的圆形，那么这个圆在半径为 5 以外的区域不会收到“click”事件。
 
-
    属性
    
+## 属性
 
-
    
- 
    {{SVGAttr("clipPathUnits")}}
    
- 
    为 <clipPath> 元素的内容定义坐标系。
    
- Value type: userSpaceOnUse|objectBoundingBox ; Default value: userSpaceOnUse; Animatable: yes
    
-
    
+- {{SVGAttr("clipPathUnits")}}
+  - : 为 `` 元素的内容定义坐标系。
+    _Value type_: `userSpaceOnUse`|`objectBoundingBox` ; _Default value_: `userSpaceOnUse`; _Animatable_: **yes**
 
-
    全局属性
    
+### 全局属性
 
-
    
- 
    Core Attributes
    
- 
    Most notably: {{SVGAttr('id')}}
    
- 
    Styling Attributes
    
- 
    {{SVGAttr('class')}}, {{SVGAttr('style')}}
    
- 
    Conditional Processing Attributes
    
- 
    Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
    
- 
    Presentation Attributes
    
- 
    Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{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')}}
    
-
    
+- [Core Attributes](https://developer.mozilla.org/docs/Web/SVG/Attribute/Core)
+  - : Most notably: {{SVGAttr('id')}}
+- [Styling Attributes](https://developer.mozilla.org/docs/Web/SVG/Attribute/Styling)
+  - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
+- [Conditional Processing Attributes](https://developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing)
+  - : Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+- [Presentation Attributes](https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation)
+  - : Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{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')}}
 
-
    用法
    
+## 用法
 
-
    {{svginfo}}
    
+{{svginfo}}
 
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
 
-
    相关内容
    
+## 相关内容
 
-
      
- 
    • Other clipping and masking SVG elements: {{SVGElement("mask")}}
      • 
- 
    • Some CSS properties: {{cssxref("clip-path")}}, {{cssxref("pointer-events")}}
      • 
-
    
+- Other clipping and masking SVG elements: {{SVGElement("mask")}}
+- Some CSS properties: {{cssxref("clip-path")}}, {{cssxref("pointer-events")}}
diff --git a/files/zh-cn/web/svg/element/cursor/index.md b/files/zh-cn/web/svg/element/cursor/index.md
index 229bf93c1380c7..514c7db25de9a1 100644
--- a/files/zh-cn/web/svg/element/cursor/index.md
+++ b/files/zh-cn/web/svg/element/cursor/index.md
@@ -9,48 +9,41 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Element/cursor
 ---
-
    {{SVGRef}}{{Deprecated_Header}}
    
+{{SVGRef}}{{Deprecated_Header}}
 
-
    Note: 尽量使用 CSS 中的 {{cssxref("cursor")}} 属性来替换该属性。
+> **备注：** 尽量使用 CSS 中的 {{cssxref("cursor")}} 属性来替换该属性。
 
+`cursor`元素可以用来定义独立于平台的自定义指针。要想定义独立于平台的指针，建议先创建一个 PNG 图象，然后定义一个引用该 PNG 图像的`cursor`元素，并在图像内部标识指针头（亦即，热点）的精确位置。
 
-
    
+建议使用 PNG 格式，因为它支持利用 alpha 通道定义透明并遮罩的能力。如果使用了别的图像格式，这个格式必须支持透明度遮罩的定义（两个选项：提供一个明确的 alpha 通道或者使用一个特殊的像素色以表示透明度）。如果能够确定透明度遮罩，遮罩确定了指针的形状；否则，指针将是一个不透明的矩形。通常地，别的像素信息（例如，R、G、B 通道）定义了指针没有被遮罩到的部分的颜色，注意指针一般至少包含两个颜色，这样在大多数背景中都能看到指针。
 
-
    cursor元素可以用来定义独立于平台的自定义指针。要想定义独立于平台的指针，建议先创建一个 PNG 图象，然后定义一个引用该 PNG 图像的cursor元素，并在图像内部标识指针头（亦即，热点）的精确位置。
    
+## 用法
 
-
    建议使用 PNG 格式，因为它支持利用 alpha 通道定义透明并遮罩的能力。如果使用了别的图像格式，这个格式必须支持透明度遮罩的定义（两个选项：提供一个明确的 alpha 通道或者使用一个特殊的像素色以表示透明度）。如果能够确定透明度遮罩，遮罩确定了指针的形状；否则，指针将是一个不透明的矩形。通常地，别的像素信息（例如，R、G、B 通道）定义了指针没有被遮罩到的部分的颜色，注意指针一般至少包含两个颜色，这样在大多数背景中都能看到指针。
    
+{{SVGInfo}}
 
-
    用法
    
+## 属性
 
-
    {{SVGInfo}}
    
+### 全局属性
 
-
    属性
    
+- [条件处理属性](/zh-CN/docs/SVG/Attribute#ConditionalProccessing) »
+- [核心属性](/zh-CN/docs/SVG/Attribute#Core) »
+- [Xlink 属性](/zh-CN/docs/SVG/Attribute#XLink) »
+- {{SVGAttr("externalResourcesRequired")}}
 
-
    全局属性
    
+### 专有属性
 
-
+- {{SVGAttr("x")}}
+- {{SVGAttr("y")}}
+- {{SVGAttr("xlink:href")}}
 
-
    专有属性
    
+## DOM 接口
 
-
      
- 
    • {{SVGAttr("x")}}
      • 
- 
    • {{SVGAttr("y")}}
      • 
- 
    • {{SVGAttr("xlink:href")}}
      • 
-
    
+该元素实现了[`SVGCursorElement`](/en-US/docs/DOM/SVGCursorElement)接口。
 
-
    DOM 接口
    
-
-
    该元素实现了SVGCursorElement接口。
    
-
-
    规范
    
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/element/fediffuselighting/index.md b/files/zh-cn/web/svg/element/fediffuselighting/index.md
index 35fec571c8cef0..b078d9c4dd31b6 100644
--- a/files/zh-cn/web/svg/element/fediffuselighting/index.md
+++ b/files/zh-cn/web/svg/element/fediffuselighting/index.md
@@ -8,121 +8,117 @@ tags:
   - 需要兼容性表
 translation_of: Web/SVG/Element/feDiffuseLighting
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    滤镜光照一个图像，使用 alpha 通道作为隆起映射。结果图像，是一个 RGBA 不透明图像，取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。
    
+滤镜光照一个图像，使用 alpha 通道作为隆起映射。结果图像，是一个 RGBA 不透明图像，取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。
 
-
    滤镜制造的光映射可以与一个纹理图像组合，使用{{SVGElement("feComposite")}}滤镜的多重arithmetic 操作。在应用纹理图案之前合加多个光映射可以模拟多重光源。
    
+滤镜制造的光映射可以与一个纹理图像组合，使用{{SVGElement("feComposite")}}滤镜的多重`arithmetic 操作。在应用纹理图案之前合加多个光映射可以模拟多重光源。`
 
-
    用法
    
+## 用法
 
-
    {{svginfo}}
    
+{{svginfo}}
 
-
    示例
    
+## 示例
 
-
    以下示例演示了一个圆上的feDiffuseLighting元素的效果，演示了每种可用的光源，光的方向来自左上角。
    
+以下示例演示了一个圆上的`feDiffuseLighting`元素的效果，演示了每种可用的光源，光的方向来自左上角。
 
-
    <svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">
+```html
+
 
-  <!-- No light is applied -->
-  <text text-anchor="middle" x="60" y="22">No Light</text>
-  <circle cx="60" cy="80" r="50" fill="green" />
+  
+  No Light
+  
 
-  <!-- the light source is a fePointLight element -->
-  <text text-anchor="middle" x="170" y="22">fePointLight</text>
-  <filter id="lightMe1">
-    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
-      <fePointLight x="150" y="60" z="20" />
-    </feDiffuseLighting>
+  
+  fePointLight
+  
+    
+      
+    
 
-    <feComposite in="SourceGraphic" in2="light"
-                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
-  </filter>
+    
+  
 
-  <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightMe1)" />
+  
 
-  <!-- the light source is a feDistantLight element -->
-  <text text-anchor="middle" x="280" y="22">feDistantLight</text>
-  <filter id="lightMe2">
-    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
-      <feDistantLight azimuth="240" elevation="20"/>
-    </feDiffuseLighting>
+  
+  feDistantLight
+  
+    
+      
+    
 
-    <feComposite in="SourceGraphic" in2="light"
-                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
-  </filter>
+    
+  
 
-  <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightMe2)" />
+  
 
-  <!-- the light source is a feSpotLight source -->
-  <text text-anchor="middle" x="390" y="22">feSpotLight</text>
-  <filter id="lightMe3">
-    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
-      <feSpotLight x="360" y="5" z="30" limitingConeAngle="20"
-                   pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
-    </feDiffuseLighting>
+  
+  feSpotLight
+  
+    
+      
+    
 
-    <feComposite in="SourceGraphic" in2="light"
-                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
-  </filter>
+    
+  
 
-  <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightMe3)" />
-</svg>
    
+  
+
+```
 
-
    预计的呈现：
    
+预计的呈现：
 
-
    Expected rendering for the example
    
+![Expected rendering for the example](/files/4447/feDiffuseLighting.png)
 
-
    实时呈现：
    
+实时呈现：
 
-
    {{EmbedLiveSample("Example",470,170)}}
    
+{{EmbedLiveSample("Example",470,170)}}
 
-
    属性
    
+## 属性
 
-
    全局属性
    
+### 全局属性
 
-
+- [核心属性](/en/SVG/Attribute#Core) »
+- [外观属性](/en/SVG/Attribute#Presentation) »
+- [滤镜属性](/en/SVG/Attribute#Filter) »
+- {{ SVGAttr("class") }}
+- {{ SVGAttr("style") }}
 
-
    专有属性
    
+### 专有属性
 
-
      
- 
    • {{ SVGAttr("in") }}
      • 
- 
    • {{ SVGAttr("surfaceScale") }}
      • 
- 
    • {{ SVGAttr("diffuseConstant") }}
      • 
- 
    • {{ SVGAttr("kernelUnitLength") }}
      • 
-
    
+- {{ SVGAttr("in") }}
+- {{ SVGAttr("surfaceScale") }}
+- {{ SVGAttr("diffuseConstant") }}
+- {{ SVGAttr("kernelUnitLength") }}
 
-
    DOM 接口
    
+## DOM 接口
 
-
    该元素实现了SVGFEDiffuseLightingElement接口。
    
+该元素实现了[`SVGFEDiffuseLightingElement`](/en/DOM/SVGFEDiffuseLightingElement)接口。
 
-
    参见
    
+## 参见
 
-
      
- 
    • {{ SVGElement("filter") }}
      • 
- 
    • {{ SVGElement("feBlend") }}
      • 
- 
    • {{ SVGElement("feColorMatrix") }}
      • 
- 
    • {{ SVGElement("feComponentTransfer") }}
      • 
- 
    • {{ SVGElement("feComposite") }}
      • 
- 
    • {{ SVGElement("feConvolveMatrix") }}
      • 
- 
    • {{ SVGElement("feDisplacementMap") }}
      • 
- 
    • {{ SVGElement("feDistantLight") }}
      • 
- 
    • {{ SVGElement("feFlood") }}
      • 
- 
    • {{ SVGElement("feGaussianBlur") }}
      • 
- 
    • {{ SVGElement("feImage") }}
      • 
- 
    • {{ SVGElement("feMerge") }}
      • 
- 
    • {{ SVGElement("feMorphology") }}
      • 
- 
    • {{ SVGElement("feOffset") }}
      • 
- 
    • {{ SVGElement("fePointLight") }}
      • 
- 
    • {{ SVGElement("feSpecularLighting") }}
      • 
- 
    • {{ SVGElement("feSpotLight") }}
      • 
- 
    • {{ SVGElement("feTile") }}
      • 
- 
    • {{ SVGElement("feTurbulence") }}
      • 
- 
    • SVG 教程：滤镜效果
      • 
-
    
+- {{ SVGElement("filter") }}
+- {{ SVGElement("feBlend") }}
+- {{ SVGElement("feColorMatrix") }}
+- {{ SVGElement("feComponentTransfer") }}
+- {{ SVGElement("feComposite") }}
+- {{ SVGElement("feConvolveMatrix") }}
+- {{ SVGElement("feDisplacementMap") }}
+- {{ SVGElement("feDistantLight") }}
+- {{ SVGElement("feFlood") }}
+- {{ SVGElement("feGaussianBlur") }}
+- {{ SVGElement("feImage") }}
+- {{ SVGElement("feMerge") }}
+- {{ SVGElement("feMorphology") }}
+- {{ SVGElement("feOffset") }}
+- {{ SVGElement("fePointLight") }}
+- {{ SVGElement("feSpecularLighting") }}
+- {{ SVGElement("feSpotLight") }}
+- {{ SVGElement("feTile") }}
+- {{ SVGElement("feTurbulence") }}
+- [SVG 教程：滤镜效果](/en/SVG/Tutorial/Filter_effects)
diff --git a/files/zh-cn/web/svg/element/foreignobject/index.md b/files/zh-cn/web/svg/element/foreignobject/index.md
index fa0afc2284b835..136c353b6324d9 100644
--- a/files/zh-cn/web/svg/element/foreignobject/index.md
+++ b/files/zh-cn/web/svg/element/foreignobject/index.md
@@ -7,16 +7,19 @@ tags:
   - 参考
 translation_of: Web/SVG/Element/foreignObject
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    SVG中的<foreignObject>元素允许包含来自不同的 XML 命名空间的元素。在浏览器的上下文中，很可能是 XHTML / HTML。
    
+[SVG](/zh-CN/docs/Web/SVG)中的**``**元素允许包含来自不同的 XML 命名空间的元素。在浏览器的上下文中，很可能是 XHTML / HTML。
 
-
    示例
    
+## 示例
 
-
+```css hidden
+html,body,svg { height:100% }
+```
 
-
    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <style>
+```html
+
+  
 
-  <polygon points="5,5 195,10 185,185 10,195" />
+  
 
-  <!-- Common use case: embed HTML text into SVG -->
-  <foreignObject x="20" y="20" width="160" height="160">
-    <!--
+  
+  
+    
+    
    
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
       porta vel dui convallis, rutrum imperdiet eros. Aliquam
       erat volutpat.
-    </div>
-  </foreignObject>
-</svg>
-
-
    {{EmbedLiveSample('示例', 150, '100%')}}
    
-
-
    属性
    
-
-
    
- 
    {{SVGAttr("height")}}
    
- 
    设置 foreignObject 的高度。
    
- 值得类型：<length>|<percentage> ; 默认值: auto; 是否可设置动画: yes
    
- 
    {{SVGAttr("width")}}
    
- 
    设置 foreignObject 的宽度。
    
- 值得类型：<length>|<percentage> ; 默认值: auto; 是否可设置动画: yes
    
- 
    {{SVGAttr("x")}}
    
- 
    设置 foreignObject 的 x 坐标。
    
- 值得类型：<length>|<percentage> ; 默认值: 0; 是否可设置动画: yes
    
- 
    {{SVGAttr("y")}}
    
- 
    设置 foreignObject 的 y 坐标。
    
- 值得类型：<length>|<percentage> ; 默认值: 0; 是否可设置动画: yes
    
-
    
-
-
    
-
    注意：从 SVG2 开始，x、y、宽度和高度都是几何属性，这意味着这些属性也可以用作该元素的 CSS 属性。
    
-
    
-
-
    Global attributes
    
-
-
    
- 
    Core Attributes
    
- 
    Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
    
- 
    Styling Attributes
    
- 
    {{SVGAttr('class')}}, {{SVGAttr('style')}}
    
- 
    Conditional Processing Attributes
    
- 
    Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
    
- 
    Event Attributes
    
- 
    Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
    
- 
    Presentation Attributes
    
- 
    Most notably: {{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')}}
    
- 
    Aria Attributes
    
- 
    aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
    
-
    
-
-
    用法
    
-
-
    {{svginfo}}
    
-
-
    规范
    
+    
    
+      
+    
+```
+
+{{EmbedLiveSample('示例', 150, '100%')}}
+
+## 属性
+
+- {{SVGAttr("height")}}
+  - : 设置 foreignObject 的高度。
+    值得类型：[**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _默认值_: `auto`; _是否可设置动画_: **yes**
+- {{SVGAttr("width")}}
+  - : 设置 foreignObject 的宽度。
+    值得类型：[**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _默认值_: `auto`; _是否可设置动画_: **yes**
+- {{SVGAttr("x")}}
+  - : 设置 foreignObject 的 x 坐标。
+    值得类型：[**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _默认值_: `0`; _是否可设置动画_: **yes**
+- {{SVGAttr("y")}}
+  - : 设置 foreignObject 的 y 坐标。
+    值得类型：[**\**](/docs/Web/SVG/Content_type#Length)|[**\**](/docs/Web/SVG/Content_type#Percentage) ; _默认值_: `0`; _是否可设置动画_: **yes**
+
+> **备注：** 从 SVG2 开始，x、y、宽度和高度都是几何属性，这意味着这些属性也可以用作该元素的 CSS 属性。
+
+### Global attributes
+
+- [Core Attributes](/docs/Web/SVG/Attribute/Core)
+  - : Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+- [Styling Attributes](/docs/Web/SVG/Attribute/Styling)
+  - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
+- [Conditional Processing Attributes](/docs/Web/SVG/Attribute/Conditional_Processing)
+  - : Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+- Event Attributes
+  - : [Global event attributes](/docs/Web/SVG/Attribute/Events#Global_Event_Attributes), [Graphical event attributes](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes), [Document event attributes](/docs/Web/SVG/Attribute/Events#Document_Event_Attributes), [Document element event attributes](/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes)
+- [Presentation Attributes](/docs/Web/SVG/Attribute/Presentation)
+  - : Most notably: {{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')}}
+- Aria Attributes
+  - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`
+
+## 用法
+
+{{svginfo}}
+
+## 规范
 
 {{Specifications}}
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
-
    {{Compat}}
    
+{{Compat}}
diff --git a/files/zh-cn/web/svg/element/g/index.md b/files/zh-cn/web/svg/element/g/index.md
index d5f24bb3905bdf..ce4d539c214aca 100644
--- a/files/zh-cn/web/svg/element/g/index.md
+++ b/files/zh-cn/web/svg/element/g/index.md
@@ -8,52 +8,51 @@ tags:
   - 参考
 translation_of: Web/SVG/Element/g
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过{{SVGElement("use")}}元素来引用它们。
    
+元素`g`是用来组合对象的容器。添加到`g`元素上的变换会应用到其所有的子元素上。添加到`g`元素的属性会被其所有的子元素继承。此外，`g`元素也可以用来定义复杂的对象，之后可以通过{{SVGElement("use")}}元素来引用它们。
 
-
    用法
    
+## 用法
 
-
    {{svginfo}}
    
+{{svginfo}}
 
-
    示例
    
+## 示例
 
-
    <svg width="100%" height="100%" viewBox="0 0 95 50"
-     xmlns="http://www.w3.org/2000/svg">
-  <g stroke="green" fill="white" stroke-width="5">
-    <circle cx="25" cy="25" r="15" />
-    <circle cx="40" cy="25" r="15" />
-    <circle cx="55" cy="25" r="15" />
-    <circle cx="70" cy="25" r="15" />
-  </g>
-</svg>
-
    
+```html
+
+  
+    
+    
+    
+    
+  
+
+```
 
-
    {{EmbedLiveSample("Example",220,130)}}
    
+{{EmbedLiveSample("Example",220,130)}}
 
-
    属性
    
+## 属性
 
-
    全局属性
    
+### 全局属性
 
-
+- [条件处理属性](/zh-CN/docs/SVG/Attribute#ConditionalProccessing) »
+- [核心属性](/zh-CN/docs/SVG/Attribute#Core) »
+- [图形事件属性](/zh-CN/docs/SVG/Attribute#GraphicalEvent) »
+- [外观属性](/zh-CN/docs/SVG/Attribute#Presentation) »
+- {{SVGAttr("class")}}
+- {{SVGAttr("style")}}
+- {{SVGAttr("externalResourcesRequired")}}
+- {{SVGAttr("transform")}}
 
-
    专有属性
    
+### 专有属性
 
-
    没有专有属性。
    
+_没有专有属性。_
 
-
    DOM 接口
    
+## DOM 接口
 
-
    该元素实现了SVGGElement的所有接口.
    
+该元素实现了`SVGGElement的所有接口`.
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
 {{Compat("svg.elements.g")}}
diff --git a/files/zh-cn/web/svg/element/index.md b/files/zh-cn/web/svg/element/index.md
index f4ea164c84c656..87e90adf4a7e92 100644
--- a/files/zh-cn/web/svg/element/index.md
+++ b/files/zh-cn/web/svg/element/index.md
@@ -6,283 +6,247 @@ tags:
   - SVG 参考
 translation_of: Web/SVG/Element
 ---
-
    « SVG / SVG 属性参考 »
    
-
-
    SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。在这里，您可以找到每个 SVG 元素的参考文档。
    
-
-
    SVG 元素（从 A-Z 排序）
    
-
-
    A
    
-
-
      
- 
    • {{SVGElement("a")}}
      • 
- 
    • {{SVGElement("animate")}}
      • 
- 
    • {{SVGElement("animateMotion")}}
      • 
- 
    • {{SVGElement("animateTransform")}}
      • 
-
    
-
-
    C
    
-
-
      
- 
    • {{SVGElement("circle")}}
      • 
- 
    • {{SVGElement("clipPath")}}
      • 
- 
    • {{SVGElement("color-profile")}}
      • 
-
    
-
-
    D
    
-
-
      
- 
    • {{SVGElement("defs")}}
      • 
- 
    • {{SVGElement("desc")}}
      • 
- 
    • {{SVGElement("discard")}}
      • 
-
    
-
-
    E
    
-
-
      
- 
    • {{SVGElement("ellipse")}}
      • 
-
    
-
-
    F
    
-
-
      
- 
    • {{SVGElement("feBlend")}}
      • 
- 
    • {{SVGElement("feColorMatrix")}}
      • 
- 
    • {{SVGElement("feComponentTransfer")}}
      • 
- 
    • {{SVGElement("feComposite")}}
      • 
- 
    • {{SVGElement("feConvolveMatrix")}}
      • 
- 
    • {{SVGElement("feDiffuseLighting")}}
      • 
- 
    • {{SVGElement("feDisplacementMap")}}
      • 
- 
    • {{SVGElement("feDistantLight")}}
      • 
- 
    • {{SVGElement("feDropShadow")}}
      • 
- 
    • {{SVGElement("feFlood")}}
      • 
- 
    • {{SVGElement("feFuncA")}}
      • 
- 
    • {{SVGElement("feFuncB")}}
      • 
- 
    • {{SVGElement("feFuncG")}}
      • 
- 
    • {{SVGElement("feFuncR")}}
      • 
- 
    • {{SVGElement("feGaussianBlur")}}
      • 
- 
    • {{SVGElement("feImage")}}
      • 
- 
    • {{SVGElement("feMerge")}}
      • 
- 
    • {{SVGElement("feMergeNode")}}
      • 
- 
    • {{SVGElement("feMorphology")}}
      • 
- 
    • {{SVGElement("feOffset")}}
      • 
- 
    • {{SVGElement("fePointLight")}}
      • 
- 
    • {{SVGElement("feSpecularLighting")}}
      • 
- 
    • {{SVGElement("feSpotLight")}}
      • 
- 
    • {{SVGElement("feTile")}}
      • 
- 
    • {{SVGElement("feTurbulence")}}
      • 
- 
    • {{SVGElement("filter")}}
      • 
- 
    • {{SVGElement("foreignObject")}}
      • 
-
    
-
-
    G
    
-
-
      
- 
    • {{SVGElement("g")}}
      • 
-
    
+« [SVG](/zh-CN/docs/SVG) / [SVG 属性参考](/zh-CN/docs/Web/SVG/Attribute) »
 
-
    H
    
+SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。在这里，您可以找到每个 SVG 元素的参考文档。
 
-
      
- 
    • {{SVGElement("hatch")}}
      • 
- 
    • {{SVGElement("hatchpath")}}
      • 
-
    
+## SVG 元素（从 A-Z 排序）
 
-
    I
    
+### A
 
-
      
- 
    • {{SVGElement("image")}}
      • 
-
    
+- {{SVGElement("a")}}
+- {{SVGElement("animate")}}
+- {{SVGElement("animateMotion")}}
+- {{SVGElement("animateTransform")}}
 
-
    L
    
+### C
 
-
      
- 
    • {{SVGElement("line")}}
      • 
- 
    • {{SVGElement("linearGradient")}}
      • 
-
    
+- {{SVGElement("circle")}}
+- {{SVGElement("clipPath")}}
+- {{SVGElement("color-profile")}}
 
-
    M
    
+### D
 
-
      
- 
    • {{SVGElement("marker")}}
      • 
- 
    • {{SVGElement("mask")}}
      • 
- 
    • {{SVGElement("mesh")}}
      • 
- 
    • {{SVGElement("meshgradient")}}
      • 
- 
    • {{SVGElement("meshpatch")}}
      • 
- 
    • {{SVGElement("meshrow")}}
      • 
- 
    • {{SVGElement("metadata")}}
      • 
- 
    • {{SVGElement("mpath")}}
      • 
-
    
+- {{SVGElement("defs")}}
+- {{SVGElement("desc")}}
+- {{SVGElement("discard")}}
 
-
    P
    
+### E
 
-
      
- 
    • {{SVGElement("path")}}
      • 
- 
    • {{SVGElement("pattern")}}
      • 
- 
    • {{SVGElement("polygon")}}
      • 
- 
    • {{SVGElement("polyline")}}
      • 
-
    
+- {{SVGElement("ellipse")}}
 
-
    R
    
+### F
 
-
      
- 
    • {{SVGElement("radialGradient")}}
      • 
- 
    • {{SVGElement("rect")}}
      • 
-
    
+- {{SVGElement("feBlend")}}
+- {{SVGElement("feColorMatrix")}}
+- {{SVGElement("feComponentTransfer")}}
+- {{SVGElement("feComposite")}}
+- {{SVGElement("feConvolveMatrix")}}
+- {{SVGElement("feDiffuseLighting")}}
+- {{SVGElement("feDisplacementMap")}}
+- {{SVGElement("feDistantLight")}}
+- {{SVGElement("feDropShadow")}}
+- {{SVGElement("feFlood")}}
+- {{SVGElement("feFuncA")}}
+- {{SVGElement("feFuncB")}}
+- {{SVGElement("feFuncG")}}
+- {{SVGElement("feFuncR")}}
+- {{SVGElement("feGaussianBlur")}}
+- {{SVGElement("feImage")}}
+- {{SVGElement("feMerge")}}
+- {{SVGElement("feMergeNode")}}
+- {{SVGElement("feMorphology")}}
+- {{SVGElement("feOffset")}}
+- {{SVGElement("fePointLight")}}
+- {{SVGElement("feSpecularLighting")}}
+- {{SVGElement("feSpotLight")}}
+- {{SVGElement("feTile")}}
+- {{SVGElement("feTurbulence")}}
+- {{SVGElement("filter")}}
+- {{SVGElement("foreignObject")}}
 
-
    S
    
+### G
 
-
      
- 
    • {{SVGElement("script")}}
      • 
- 
    • {{SVGElement("set")}}
      • 
- 
    • {{SVGElement("solidcolor")}}
      • 
- 
    • {{SVGElement("stop")}}
      • 
- 
    • {{SVGElement("style")}}
      • 
- 
    • {{SVGElement("svg")}}
      • 
- 
    • {{SVGElement("switch")}}
      • 
- 
    • {{SVGElement("symbol")}}
      • 
-
    
+- {{SVGElement("g")}}
 
-
    T
    
+### H
 
-
      
- 
    • {{SVGElement("text")}}
      • 
- 
    • {{SVGElement("textPath")}}
      • 
- 
    • {{SVGElement("title")}}
      • 
- 
    • {{SVGElement("tspan")}}
      • 
-
    
+- {{SVGElement("hatch")}}
+- {{SVGElement("hatchpath")}}
 
-
    U
    
+### I
 
-
      
- 
    • {{SVGElement("unknown")}}
      • 
- 
    • {{SVGElement("use")}}
      • 
-
    
+- {{SVGElement("image")}}
 
-
    V
    
+### L
 
-
      
- 
    • {{SVGElement("view")}}
      • 
-
    
+- {{SVGElement("line")}}
+- {{SVGElement("linearGradient")}}
 
-
    SVG 元素（按类别分类）
    
+### M
 
-
    动画元素
    
+- {{SVGElement("marker")}}
+- {{SVGElement("mask")}}
+- {{SVGElement("mesh")}}
+- {{SVGElement("meshgradient")}}
+- {{SVGElement("meshpatch")}}
+- {{SVGElement("meshrow")}}
+- {{SVGElement("metadata")}}
+- {{SVGElement("mpath")}}
 
-
    {{SVGElement("animate")}}，{{SVGElement("animateColor")}}，{{SVGElement("animateMotion")}}，{{SVGElement("animateTransform")}}，{{SVGElement("discard")}}，{{SVGElement("mpath")}}，{{SVGElement("set")}}
    
+### P
 
-
    基本形状元素
    
+- {{SVGElement("path")}}
+- {{SVGElement("pattern")}}
+- {{SVGElement("polygon")}}
+- {{SVGElement("polyline")}}
 
-
    {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
    
+### R
 
-
    容器元素
    
+- {{SVGElement("radialGradient")}}
+- {{SVGElement("rect")}}
 
-
    {{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}
    
+### S
 
-
    描述性元素
    
+- {{SVGElement("script")}}
+- {{SVGElement("set")}}
+- {{SVGElement("solidcolor")}}
+- {{SVGElement("stop")}}
+- {{SVGElement("style")}}
+- {{SVGElement("svg")}}
+- {{SVGElement("switch")}}
+- {{SVGElement("symbol")}}
 
-
    {{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}
    
+### T
 
-
    滤镜元素
    
+- {{SVGElement("text")}}
+- {{SVGElement("textPath")}}
+- {{SVGElement("title")}}
+- {{SVGElement("tspan")}}
 
-
    {{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}
    
+### U
 
-
    字体元素
    
+- {{SVGElement("unknown")}}
+- {{SVGElement("use")}}
 
-
    {{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}
    
+### V
 
-
    渐变元素
    
+- {{SVGElement("view")}}
 
-
    {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}
    
+## SVG 元素（按类别分类）
 
-
    图形元素
    
+### 动画元素
 
-
    {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}
    
+{{SVGElement("animate")}}，{{SVGElement("animateColor")}}，{{SVGElement("animateMotion")}}，{{SVGElement("animateTransform")}}，{{SVGElement("discard")}}，{{SVGElement("mpath")}}，{{SVGElement("set")}}
 
-
    图像渲染元素
    
+### 基本形状元素
 
-
    {{SVGElement("mesh")}}, {{SVGElement("use")}}
    
+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
 
-
    光源元素
    
+### 容器元素
 
-
    {{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}
    
+{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}
 
-
    非渲染元素
    
+### 描述性元素
 
-
    {{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}
    
+{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}
 
-
    绘制服务器元素
    
+### 滤镜元素
 
-
    {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}
    
+{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}
 
-
    可渲染元素
    
+### 字体元素
 
-
    {{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}
    
+{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}
 
-
    形状元素
    
+### 渐变元素
 
-
    {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
    
+{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}
 
-
    结构元素
    
+### 图形元素
 
-
    {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}
    
+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}
 
-
    文本内容元素
    
+### 图像渲染元素
 
-
    {{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
    
+{{SVGElement("mesh")}}, {{SVGElement("use")}}
 
-
    文本子内容元素
    
+### 光源元素
 
-
    {{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
    
+{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}
 
-
    未分类元素
    
+### 非渲染元素
 
-
    {{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}
    
+{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}
 
-
    过时和弃用的元素
    
+### 绘制服务器元素
 
-
    
-
    警告： 这些是旧的 SVG 元素，已弃用且不应使用。您绝不应在新项目中使用它们，并应尽快在旧项目中替换它们。在此列出，仅供参考。
    
-
    
+{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}
 
-
    A
    
+### 可渲染元素
 
-
    {{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}
    
+{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}
 
-
    C
    
+### 形状元素
 
-
    {{SVGElement("cursor")}}
    
+{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
 
-
    F
    
+### 结构元素
 
-
    {{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}
    
+{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}
 
-
    G
    
+### 文本内容元素
 
-
    {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}
    
+{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
 
-
    H
    
+### 文本子内容元素
 
-
    {{SVGElement("hkern")}}
    
+{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}
 
-
    M
    
+### 未分类元素
 
-
    {{SVGElement("missing-glyph")}}
    
+{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}
 
-
    T
    
+## 过时和弃用的元素
 
-
    {{SVGElement("tref")}}
    
+> **警告：** 这些是旧的 SVG 元素，已弃用且不应使用。**您绝不应在新项目中使用它们，并应尽快在旧项目中替换它们。**在此列出，仅供参考。
 
-
    V
    
+### A
 
-
    {{SVGElement("vkern")}}
    
+{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}
 
-
    参见
    
+### C
 
-
+{{SVGElement("cursor")}}
 
-
    {{SVGRef}}
    
+### F
+
+{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}
+
+### G
+
+{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}
+
+### H
+
+{{SVGElement("hkern")}}
+
+### M
+
+{{SVGElement("missing-glyph")}}
+
+### T
+
+{{SVGElement("tref")}}
+
+### V
+
+{{SVGElement("vkern")}}
+
+## 参见
+
+- [SVG attribute reference](/zh-CN/docs/Web/SVG/Attribute)
+- [SVG Tutorial](/zh-CN/docs/Web/SVG/Tutorial)
+- [SVG interface reference](/zh-CN/docs/Web/API/Document_Object_Model#SVG_interfaces)
+
+{{SVGRef}}
diff --git a/files/zh-cn/web/svg/element/path/index.md b/files/zh-cn/web/svg/element/path/index.md
index efcd63c9310b3e..c34caeaea2c515 100644
--- a/files/zh-cn/web/svg/element/path/index.md
+++ b/files/zh-cn/web/svg/element/path/index.md
@@ -8,68 +8,64 @@ tags:
   - 参考
 translation_of: Web/SVG/Element/path
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    起步
    
-本教程将教你开始使用 SVG 路径。
    
+**[起步](/zh-CN/docs/Web/SVG/Tutorial/Paths)**
+本教程将教你开始使用 SVG 路径。
 
-
    path 元素是用来定义形状的通用元素。所有的基本形状都可以用 path 元素来创建。
    
+path 元素是用来定义形状的通用元素。所有的基本形状都可以用 path 元素来创建。
 
-
    用法
    
+## 用法
 
-
    {{svginfo}}
    
+{{svginfo}}
 
-
    示例
    
+## 示例
 
-
    <svg width="100%" height="100%" viewBox="0 0 400 400"
-     xmlns="http://www.w3.org/2000/svg">
+```plain
+
 
-  <path d="M 100 100 L 300 100 L 200 300 z"
-        fill="orange" stroke="black" stroke-width="3" />
-</svg>
    
+  
+
+```
 
-
    输出结果：
    
+输出结果：
 
-
    {{EmbedLiveSample("Example",200,215)}}
    
+{{EmbedLiveSample("Example",200,215)}}
 
-
    属性
    
+## 属性
 
-
    全局属性
    
+### 全局属性
 
-
+- [条件处理属性](/zh-CN/docs/Web/SVG/Attribute#ConditionalProccessing) »
+- [核心属性](/zh-CN/docs/Web/SVG/Attribute#Core) »
+- [图形事件属性](/zh-CN/docs/Web/SVG/Attribute#GraphicalEvent) »
+- [外观属性](/zh-CN/docs/Web/SVG/Attribute#Presentation) »
+- {{SVGAttr("class")}}
+- {{SVGAttr("style")}}
+- {{SVGAttr("externalResourcesRequired")}}
+- {{SVGAttr("transform")}}
 
-
    专有属性
    
+### 专有属性
 
-
      
- 
    • {{SVGAttr("d")}}
      • 
- 
    • {{SVGAttr("pathLength")}}
      • 
-
    
+- {{SVGAttr("d")}}
+- {{SVGAttr("pathLength")}}
 
-
    DOM 接口
    
+## DOM 接口
 
-
    该元素实现了SVGPathElement接口。
    
+该元素实现了[`SVGPathElement`](/en-US/docs/DOM/SVGPathElement)接口。
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
 {{Compat("svg.elements.path")}}
 
-
    参见
    
-
-
+## 参见
+
+- {{SVGElement("circle")}}
+- {{SVGElement("ellipse")}}
+- {{SVGElement("line")}}
+- {{SVGElement("polygon")}}
+- {{SVGElement("polyline")}}
+- {{SVGElement("rect")}}
+- [The MDN SVG "Getting Started" tutorial : Path](/zh-CN/docs/Web/SVG/Tutorial/Paths)
diff --git a/files/zh-cn/web/svg/element/switch/index.md b/files/zh-cn/web/svg/element/switch/index.md
index ff45850be54bf0..f401cdecaa8a7a 100644
--- a/files/zh-cn/web/svg/element/switch/index.md
+++ b/files/zh-cn/web/svg/element/switch/index.md
@@ -8,43 +8,39 @@ tags:
   - 需要示例
 translation_of: Web/SVG/Element/switch
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    switch元素对它的直接子元素上的属性{{ SVGAttr("requiredFeatures") }}、属性{{ SVGAttr("requiredExtensions") }} 和 属性{{ SVGAttr("systemLanguage") }}按照顺序进行评估，然后处理和呈现第一个评估为true的子元素。 其他子元素会被绕过不会被呈现。如果某个子元素是容器元素比如说是一个{{ SVGElement("g") }}元素，那么整个子树会被处理呈现或者全部绕过不呈现。
    
+`switch`元素对它的直接子元素上的属性{{ SVGAttr("requiredFeatures") }}、属性{{ SVGAttr("requiredExtensions") }} 和 属性{{ SVGAttr("systemLanguage") }}按照顺序进行评估，然后处理和呈现第一个评估为`true`的子元素。 其他子元素会被绕过不会被呈现。如果某个子元素是容器元素比如说是一个{{ SVGElement("g") }}元素，那么整个子树会被处理呈现或者全部绕过不呈现。
 
-
    注意：属性display和属性visibility的值对switch 元素处理是不起作用的。特别是， 在switch 元素的子元素上设置display为 none，对switch 元素的 true/false 测试处理不起作用。
    
+注意：属性`display`和属性`visibility`的值对`switch 元素处理是不起作用的。`特别是， 在`switch 元素的子元素上`设置`display`为 none，对`switch` 元素的 true/false 测试处理不起作用。
 
-
    用法
    
+## 用法
 
-
    {{svginfo}}
    
+{{svginfo}}
 
-
    示例
    
+## 示例
 
-
    属性
    
+## 属性
 
-
    全局属性
    
+### 全局属性
 
-
+- [条件处理属性](/zh-CN/docs/SVG/Attribute#ConditionalProccessing) »
+- [核心属性](/zh-CN/docs/SVG/Attribute#Core) »
+- [图形事件属性](/zh-CN/docs/SVG/Attribute#GraphicalEvent) »
+- [外观属性](/zh-CN/docs/SVG/Attribute#Presentation) »
+- {{ SVGAttr("class") }}
+- {{ SVGAttr("style") }}
+- {{ SVGAttr("externalResourcesRequired") }}
+- {{ SVGAttr("transform") }}
 
-
    专有属性
    
+### 专有属性
 
-
      
- 
    • {{ SVGAttr("allowReorder") }}
      • 
-
    
+- {{ SVGAttr("allowReorder") }}
 
-
    DOM 接口
    
+## DOM 接口
 
-
    该元素实现了SVGSwitchElement 接口。
    
+该元素实现了[`SVGSwitchElement`](/en-US/docs/DOM/SVGSwitchElement) 接口。
 
-
    浏览器支持
    
+## 浏览器支持
 
 {{Compat("svg.elements.switch")}}
diff --git a/files/zh-cn/web/svg/element/text/index.md b/files/zh-cn/web/svg/element/text/index.md
index 95c01f77b29e63..e0661e25e01840 100644
--- a/files/zh-cn/web/svg/element/text/index.md
+++ b/files/zh-cn/web/svg/element/text/index.md
@@ -8,102 +8,100 @@ tags:
   - 参考
 translation_of: Web/SVG/Element/text
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    text元素定义了一个由文字组成的图形。注意：我们可以将渐变、图案、剪切路径、遮罩或者滤镜应用到 text 上。
    
+`text`元素定义了一个由文字组成的图形。注意：我们可以将渐变、图案、剪切路径、遮罩或者滤镜应用到 text 上。
 
-
    使用上下文
    
+## 使用上下文
 
-
    {{svginfo}}
    
+{{svginfo}}
 
-
    示例
    
+## 示例
 
-
    <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100px" height="30px" viewBox="0 0 1000 300">
+```xml
+
+
 
-  <text x="250" y="150"
+  
     Hello, out there
-  </text>
+  
 
-  <!-- Show outline of canvas using 'rect' element -->
-  <rect x="1" y="1" width="998" height="298"
-        fill="none" stroke="1" stroke-width="2" />
-</svg>
-
    
+  
+  
+
+```
 
-
    <text>元素用来绘制文本。下面这段代码展示了如何在坐标系中绘制一段文本。
    
+\元素用来绘制文本。下面这段代码展示了如何在坐标系中绘制一段文本。
 
-
    <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
-  <text x="10" y="20">SVG Text Example</text>
-</svg>
-
    
+```xml
+
+  SVG Text Example
+
+```
 
-
    可以旋转 SVG 文本。下面的代码做了一个演示。
    
+可以旋转 SVG 文本。下面的代码做了一个演示。
 
-
    <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
-  <text x="10"  y="20"
-        transform="rotate(30 20,40)">
+```xml
+
+  
     SVG Text Rotation example
-  </text>
-</svg>
-
    
+      
+
+```
 
-
    SVG 文本还可以应用样式。
    
+SVG 文本还可以应用样式。
 
-
    <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
-  <text x="10"  y="20"
+```xml
+
+  
     SVG text styling
-  </text>
-</svg>
-
    
+  
+
+```
 
-
    属性
    
+## 属性
 
-
    全局属性
    
+### 全局属性
 
-
+- [条件处理属性](/en/SVG/Attribute#ConditionalProccessing) »
+- [核心属性](/en/SVG/Attribute#Core) »
+- [图形事件属性](/en/SVG/Attribute#GraphicalEvent) »
+- [外观属性](/en/SVG/Attribute#Presentation) »
+- {{ SVGAttr("class") }}
+- {{ SVGAttr("style") }}
+- {{ SVGAttr("externalResourcesRequired") }}
+- {{ SVGAttr("transform") }}
 
-
    专有属性
    
+### 专有属性
 
-
      
- 
    • {{ SVGAttr("x") }}
      • 
- 
    • {{ SVGAttr("y") }}
      • 
- 
    • {{ SVGAttr("dx") }}
      • 
- 
    • {{ SVGAttr("dy") }}
      • 
- 
    • {{ SVGAttr("text-anchor") }}
      • 
- 
    • {{ SVGAttr("rotate") }}
      • 
- 
    • {{ SVGAttr("textLength") }}
      • 
- 
    • {{ SVGAttr("lengthAdjust") }}
      • 
-
    
+- {{ SVGAttr("x") }}
+- {{ SVGAttr("y") }}
+- {{ SVGAttr("dx") }}
+- {{ SVGAttr("dy") }}
+- {{ SVGAttr("text-anchor") }}
+- {{ SVGAttr("rotate") }}
+- {{ SVGAttr("textLength") }}
+- {{ SVGAttr("lengthAdjust") }}
 
-
    DOM 接口
    
+## DOM 接口
 
-
    该元素实现了SVGTextElement接口。
    
+该元素实现了[`SVGTextElement`](/en/DOM/SVGTextElement)接口。
 
-
    浏览器兼容性
    
+## 浏览器兼容性
 
 {{Compat("svg.elements.text")}}
 
-
    相关内容
    
+## 相关内容
 
-
      
- 
    • {{ SVGElement("tspan") }}
      • 
- 
    • {{ SVGElement("tref") }}
      • 
- 
    • {{ SVGElement("altGlyph") }}
      • 
-
    
+- {{ SVGElement("tspan") }}
+- {{ SVGElement("tref") }}
+- {{ SVGElement("altGlyph") }}
diff --git a/files/zh-cn/web/svg/element/use/index.md b/files/zh-cn/web/svg/element/use/index.md
index b0a663665ea753..2424c1fe56c3de 100644
--- a/files/zh-cn/web/svg/element/use/index.md
+++ b/files/zh-cn/web/svg/element/use/index.md
@@ -9,67 +9,64 @@ tags:
   - 需要浏览器兼容性
 translation_of: Web/SVG/Element/use
 ---
-
    {{SVGRef}}
    
+{{SVGRef}}
 
-
    use元素在 SVG 文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的 DOM 中，然后将其粘贴到use元素的位置，很像 HTML5 中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的 DOM 不能保证继承 CSS 属性，除非你明文设置使用CSS 继承。
    
+`use`元素在 SVG 文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的 DOM 中，然后将其粘贴到`use`元素的位置，很像 HTML5 中的克隆[模板元素](/zh-CN/docs/Web/HTML/Element/template)。因为克隆的节点是不可见的，所以当使用[CSS](/en/CSS)样式化一个`use`元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的 DOM 不能保证继承 CSS 属性，除非你明文设置使用[CSS 继承](/en/CSS/inheritance)。
 
-
    出于安全原因，一些浏览器可能在 use 元素上应用同源策略，还有可能拒绝载入 xlink:href 属性内的跨源 URI。
    
+出于安全原因，一些浏览器可能在 use 元素上应用同源策略，还有可能拒绝载入 xlink:href 属性内的跨源 URI。
 
-
    用法
    
+## 用法
 
-
    {{svginfo}}
    
+{{svginfo}}
 
-
    示例
    
+## 示例
 
-
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <style>
+```xml
+
+  
    
-
-
    属性
    
-
-
    全局属性
    
-
-
-
-
    专有属性
    
-
-
      
- 
    • {{ SVGAttr("x") }}
      • 
- 
    • {{ SVGAttr("y") }}
      • 
- 
    • {{ SVGAttr("width") }}
      • 
- 
    • {{ SVGAttr("height") }}
      • 
- 
    • {{ SVGAttr("xlink:href") }}
      • 
-
    
-
-
    DOM 接口
    
-
-
    该元素实现了SVGUseElement接口。
    
-
-
    浏览器兼容性
    
+  
+  
+    
+      
+    
+  
+
+  black
+  
+  red
+  
+  blue
+  
+ 
+```
+
+## 属性
+
+### 全局属性
+
+- [条件处理属性](/en/SVG/Attribute#ConditionalProccessing) »
+- [核心属性](/en/SVG/Attribute#Core) »
+- [图形事件属性](/en/SVG/Attribute#GraphicalEvent) »
+- [外观属性](/en/SVG/Attribute#Presentation) »
+- [Xlink 属性](/en/SVG/Attribute#XLink) »
+- {{ SVGAttr("class") }}
+- {{ SVGAttr("style") }}
+- {{ SVGAttr("externalResourcesRequired") }}
+- {{ SVGAttr("transform") }}
+
+### 专有属性
+
+- {{ SVGAttr("x") }}
+- {{ SVGAttr("y") }}
+- {{ SVGAttr("width") }}
+- {{ SVGAttr("height") }}
+- {{ SVGAttr("xlink:href") }}
+
+## DOM 接口
+
+该元素实现了[`SVGUseElement`](/en/DOM/SVGUseElement)接口。
+
+## 浏览器兼容性
 
 {{Compat("svg.elements.use")}}
diff --git a/files/zh-cn/web/svg/index.md b/files/zh-cn/web/svg/index.md
index 2cf5e1c38b05f5..57e646be5c6255 100644
--- a/files/zh-cn/web/svg/index.md
+++ b/files/zh-cn/web/svg/index.md
@@ -10,53 +10,39 @@ tags:
   - 矢量图形
 translation_of: Web/SVG
 ---
-
    {{SVGRef}}
    
-
-
    准备开始吧！
    
-这篇教程会帮助你开始使用 SVG。
    
-
-
    可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
    
-
-
    SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
    
-
-
    和传统的点阵图像模式，像{{Glossary("JPEG")}}和{{Glossary("PNG")}}不同，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。
    
-
-
    SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。
    
-
-
    文档
    
-
-
    
- 
    SVG 元素参考
    
- 
    了解所有 SVG 元素的细节。
    
- 
    SVG 属性参考
    
- 
    了解所有 SVG 属性的细节。
    
- 
    SVG DOM 接口参考
    
- 
    了解有关 SVG DOM API 的全部细节。
    
- 
    在 HTML 内容中应用 SVG 效果
    
- 
    SVG 与 {{Glossary("HTML")}}、{{Glossary("CSS")}} 和 {{Glossary("JavaScript")}}一起工作，使用 SVG 增强常规 HTML 页面和 Web 应用。
    
- 
    SVG 与 Mozilla
    
- 
    SVG 在 Mozilla 产品中的实现情况。
- 
- 
    
-
    
-
-
    工具
    
-
-
-
-
    实例
    
-
-
+{{SVGRef}}
+
+**[准备开始吧！](/zh-CN/docs/Web/SVG/Tutorial)**
+这篇教程会帮助你开始使用 SVG。
+
+**可缩放矢量图形**（**Scalable Vector Graphics，SVG**），是一种用于描述二维的[矢量图形](https://zh.wikipedia.org/wiki/%E7%9F%A2%E9%87%8F%E5%9B%BE%E5%BD%A2)，基于 [XML](/zh-CN/docs/Web/XML/XML_Introduction) 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和[CSS](/zh-CN/docs/Learn/CSS)，[DOM](/zh-CN/docs/Web/API/Document_Object_Model)，[JavaScript](/zh-CN/docs/Web/JavaScript)和[SMIL](/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL)等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 [HTML](/zh-CN/docs/Web/HTML) 相对于文本。
+
+SVG 图像及其相关行为被定义于 [XML](/zh-CN/docs/Web/XML/XML_Introduction) 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
+
+和传统的点阵图像模式，像{{Glossary("JPEG")}}和{{Glossary("PNG")}}不同，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。
+
+SVG 是由[万维网联盟（W3C）](https://www.w3.org/)自 1999 年开始开发的开放标准。
+
+## 文档
+
+- [SVG 元素参考](/zh-CN/docs/Web/SVG/Element)
+  - : 了解所有 SVG 元素的细节。
+- [SVG 属性参考](/zh-CN/docs/Web/SVG/Attribute)
+  - : 了解所有 SVG 属性的细节。
+- [SVG DOM 接口参考](/zh-CN/docs/Web/API/Document_Object_Model#svg_接口)
+  - : 了解有关 SVG DOM API 的全部细节。
+- [在 HTML 内容中应用 SVG 效果](/zh-CN/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
+  - : SVG 与 {{Glossary("HTML")}}、{{Glossary("CSS")}} 和 {{Glossary("JavaScript")}} 一起工作，使用 SVG [增强常规 HTML 页面和 Web 应用](/zh-CN/docs/SVG_In_HTML_Introduction)。
+
+## 工具
+
+- [SVG 测试套件](https://github.com/w3c/svgwg/wiki/Testing)
+- [SVG 语法校验工具](https://validator.w3.org/#validate_by_input)
+
+## 实例
+
+- [SVG 创作指南](https://jwatt.org/svg/authoring/)
+- [SVG 作为图片](/zh-CN/docs/Web/SVG/SVG_as_an_Image)
+- [使用 SMIL 的 SVG 动画](/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL)
+- [SVG 艺术画廊](https://www1.plurib.us/svg_gallery/)
+- [D3](https://d3js.org/)（用于使用 HTML、SVG 和 CSS 可视化数据的 JavaScript 库）
diff --git a/files/zh-cn/web/svg/namespaces_crash_course/index.md b/files/zh-cn/web/svg/namespaces_crash_course/index.md
index af8ab96f5f9bf8..0ba3b00f1c52e6 100644
--- a/files/zh-cn/web/svg/namespaces_crash_course/index.md
+++ b/files/zh-cn/web/svg/namespaces_crash_course/index.md
@@ -3,188 +3,156 @@ title: Namespaces Crash Course
 slug: Web/SVG/Namespaces_Crash_Course
 translation_of: Web/SVG/Namespaces_Crash_Course
 ---
-
    作为 XML 的一个方言，SVG 需要在一个命名空间内（is namespaced）。理解命名空间的概念，以及在你打算编辑 SVG 内容时，命名空间如何使用，是很重要的。SVG 查看器的版本早于 Firefox 1.5 的发布的，都几乎没有注意命名空间的问题， but they are essential to multi-XML dialect supporting user agents such as Gecko-based browsers which must be very strict. 现在，花一点时间来理解命名空间，这会让你以后避免各种麻烦。
    
+作为 [XML](/zh-CN/docs/Glossary/XML) 的一个方言，[SVG](/zh-CN/docs/Web/SVG) 需要在一个命名空间内（is namespaced）。理解命名空间的概念，以及在你打算编辑 SVG 内容时，命名空间如何使用，是很重要的。SVG 查看器的版本早于 Firefox 1.5 的发布的，都几乎没有注意命名空间的问题， but they are essential to multi-XML dialect supporting user agents such as [Gecko](/zh-CN/docs/Mozilla/Gecko)-based browsers which must be very strict. 现在，花一点时间来理解命名空间，这会让你以后避免各种麻烦。
 
-
    背景
    
+### 背景
 
-
    W3C 的长期目标是使不同类型的 XML 基本内容可以混合在同一个 XML 文件中。例如，SVG 和 MathML 可以直接并入基于 XHTML 的科学文档中。 能够混合这样的内容类型有很多优点，但也需要解决一个非常实际的问题。
    
+W3C 的长期目标是使不同类型的 XML 基本内容可以混合在同一个 XML 文件中。例如，SVG 和 [MathML](/zh-CN/docs/Web/MathML) 可以直接并入基于 XHTML 的科学文档中。 能够混合这样的内容类型有很多优点，但也需要解决一个非常实际的问题。
 
-
    合理来说，每个 XML 语言定义其规范中描述的标记标签名称的含义。 在单个 XML 文档中混合来自不同 XML 方言的内容的问题是，由一个方言定义的标签可能与另一个方言定义的标签具有相同的名称。例如，XHTML 和 SVG 都有一个<title>标签。专业使用者如何区分两者？其实当 XML 内容是它所知道的，而不仅仅是一个没有意义的包含任意标签名的 XML 文件时，专业使用者如何告诉它？
    
+合理来说，每个 XML 语言定义其规范中描述的标记标签名称的含义。 在单个 XML 文档中混合来自不同 XML 方言的内容的问题是，由一个方言定义的标签可能与另一个方言定义的标签具有相同的名称。例如，XHTML 和 SVG 都有一个\标签。专业使用者如何区分两者？其实当 XML 内容是它所知道的，而不仅仅是一个没有意义的包含任意标签名的 XML 文件时，专业使用者如何告诉它？
 
-<p>与大众想法相反，这个问题的答案不是 “可以从 DOCTYPE 声明中得知”。DTDs 的设计不考虑混合内容，而过去尝试创建混合内容的 DTDs 现在被认为是失败的。XML 和一些 XML 方言 (包括 SVG), 不要求<code>DOCTYPE</code> 声明，SVG 1.2 更不会有。DOCTYPE 声明（通常）与单个内容类型文件中的内容匹配的事实只是巧合的。DTDs 仅用于验证，而不是内容的识别。使用其 DOCTYPE 声明欺骗和标识 XML 内容的使用者会造成危害（User agents that cheat and identify XML content using its DOCTYPE declaration cause harm）。</p>
+与大众想法相反，这个问题的答案不是 “可以从 DOCTYPE 声明中得知”。DTDs 的设计不考虑混合内容，而过去尝试创建混合内容的 DTDs 现在被认为是失败的。XML 和一些 XML 方言 (包括 SVG), 不要求`DOCTYPE` 声明，SVG 1.2 更不会有。DOCTYPE 声明（通常）与单个内容类型文件中的内容匹配的事实只是巧合的。DTDs 仅用于验证，而不是内容的识别。使用其 DOCTYPE 声明欺骗和标识 XML 内容的使用者会造成危害（User agents that cheat and identify XML content using its DOCTYPE declaration cause harm）。
 
-<p>问题的真正答案是，XML 内容通过给明确的标签显示“命名空间声明”来告诉使用者哪个方言标签名称属于哪个。</p>
+问题的真正答案是，XML 内容通过给明确的标签显示“命名空间声明”来告诉使用者哪个方言标签名称属于哪个。
 
-<h3 id="Declaring_namespaces">声明命名空间</h3>
+### 声明命名空间
 
-<p>所以这些命名空间声明是什么样的呢，并且在什么地方用他们，如下的例子所示：</p>
+所以这些命名空间声明是什么样的呢，并且在什么地方用他们，如下的例子所示：
 
-<pre><svg xmlns="http://www.w3.org/2000/svg">
-  <!-- more tags here -->
-</svg>
-
-</pre>
-
-<p>命名空间声明是通过 xmlns attribute 提供的。xmlns 属性意味着这个 <svg> 标签和它的子节点都属于 'http://www.w3.org/2000/svg' 这个 SVG 命名空间。注意，这个命名空间声明只需要在根节点上声明一次。这个声明定义了默认的命名空间，所以用户代理知道所有的 <svg> 标签的子标签也属于相同的命名空间。用户代理如果能识别这个命名空间就决定他们如何处理这个标记。</p>
-
-<p>请注意，命名空间仅仅只是一些字符串，所以 SVG 上那些看起来像 URI 的命名空间并不重要。因为 URIs 的唯一性从而被广泛使用，它的本意并不是要 “链接” 到某个地址。（实际上 URIs 被如此频繁地使用是 “命名空间 URI"普遍使用而不是” 命名空间的名字“被使用。）</p>
-
-<h4 id="Redeclaring_the_default_namespace">重新定义默认命名空间</h4>
-
-<p>如果根节点的所有子节点也被定义为默认命名空间，那么你如何混合使用另一种命名空间呢？很简单，你仅仅只需重新定义默认命名空间即可。这里是一个简单的例子。</p>
-
-<pre><html xmlns="http://www.w3.org/1999/xhtml">
-  <body>
-    <!-- 在这里放置一些 XHTML 标签 -->
-    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
-      <!-- 在这里放置一些 SVG 标签 -->
-    </svg>
-    <!-- 在这里放置一些 XHTML 标签 -->
-  </body>
-</html></pre>
-
-<p>在这个例子中根节点<code><html></code> 的 <code>xmlns</code> 属性定义了 XHTML 为默认命名空间。结果就是它和它所有的子节标签，除了 <code><svg></code> 标签，都被用户代理解释为属于 XHTML 命名空间。 <code><svg></code> 标签拥有它自己的<code>xmlns</code>属性，通过重新定义默认的命名空间，告诉用户代理 <code><svg></code> 标签以及他所包含的标签（除非他们也重新定义了默认名称空间）属于 SVG.</p>
-
-<p>看到没，命名空间其实没有那么难以理解。</p>
-
-<h4 id="Declaring_namespace_prefixes">Declaring namespace prefixes</h4>
-
-<p>XML dialects not only define their own tags, but also their own attributes. By default, attributes don't have a namespace at all, and are only known to be unique because they appear on an element that itself has a unique name. However, sometimes it is necessary to define attributes so that they can be reused on many different elements and still be considered to be the same attribute, independently of the element with which they are used. A very good example of this is the <code>href</code> attribute defined by the XLink specification. This attribute is commonly used by other XML dialects as a means to link to external resources. But how do you tell the user agent which dialect the attribute belongs to, in this case XLink? Consider the following example.</p>
-
-<pre><svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-  <script xlink:href="cool-script.js" type="text/ecmascript"/>
-</svg>
-</pre>
-
-<p>This example has the rather unusual looking attribute <code>xmlns:xlink</code>. As you may guess from the first 'xmlns' part, this is another namespace declaration. However, instead of setting the default namespace, this namespace declaration sets the namespace for something called a "namespace prefix". In this case, we have chosen to use the prefix <code>xlink</code> (the second part) since the prefix will be used to tell the user agent about attributes that belong to XLink.</p>
-
-<p>As their name suggests, namespace prefixes are used to prefix attribute names and tag names. This is done by putting the namespace prefix and a colon before the attribute name as shown on the <code><script></code> tag in the example above. This tells the user agent that that particular attribute belongs to the namespace assigned to the namespace prefix (XLink), and is an attribute that can be used with the same meaning on other tags.</p>
-
-<p>Note that it is an XML error to use a prefix that hasn't been bound to a namespace name. The binding created by the <code>xmlns:xlink</code> attribute in the example above is absolutely essential if the <code>xlink:href</code> attribute isn't to cause an error. This XLink attribute is also frequently used in SVG on the <code><a></code>, <code><use></code> and <code><image></code> tags among others, so it's a good idea to always include the XLink declaration in your documents.</p>
-
-<p>As an aside, it's useful to know that namespace prefixes can also be used for tag names. This tells the user agent that that particular tag (but not its children this time!) belongs to the namespace assigned to the prefix. Knowing this will save you some confusion if you come across markup like that in the following example:</p>
-
-<pre><html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:svg="http://www.w3.org/2000/svg">
-  <body>
-    <h1>SVG embedded inline in XHTML</h1>
-    <svg:svg width="300px" height="200px">
-      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
-    </svg:svg>
-  </body>
-</html>
-</pre>
-
-<p>Note that because a namespace prefix is used for the <code><svg:svg></code> tag and its child <code><svg:circle></code>, it wasn't necessary to redeclare the default namespace. In general though it is better to redeclare the default namespace rather than prefix lots of tags in this way.</p>
-
-<h3 id="Scripting_in_namespaced_XML">Scripting in namespaced XML</h3>
-
-<p>Namespaces affect not only markup, but also scripting. If you write scripts for namespaced XML such as SVG, read on.</p>
-
-<p>The <a href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM Level 1</a> recommendation was created before the <a href="http://www.w3.org/TR/REC-xml-names/">original Namespaces in XML</a> recommendation was released; therefore, DOM1 isn't namespace aware. This causes problems for namespaced XML such as SVG. To resolve these problems, <a href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2 Core</a> added namespace aware equivalents of all the applicable DOM Level 1 methods. When scripting SVG, <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">it is important to use the namespace aware methods</a>. The table below lists the DOM1 methods that shouldn't be used in SVG, along with their equivalent DOM2 counterparts that should be used instead.</p>
-
-<table class="fullwidth-table">
- <tbody>
-  <tr>
-   <th>DOM1 (don't use)</th>
-   <th>DOM2 (use these instead!)</th>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createAttribute">createAttribute</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrAttrNS">createAttributeNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createElement">createElement</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">createElementNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">getAttributeNode</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">getAttributeNodeNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">getAttribute</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">getAttributeNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName">getElementsByTagName</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">getElementsByTagNameNS</a> (also <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">added to Element</a>)</td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getNamedItem">getNamedItem</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getNamedItemNS">getNamedItemNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#">hasAttribute</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">hasAttributeNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">removeAttribute</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">removeAttributeNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeNamedItem">removeNamedItem</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-removeNamedItemNS">removeNamedItemNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">setAttribute</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">setAttributeNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">setAttributeNode</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">setAttributeNodeNS</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setNamedItem">setNamedItem</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-setNamedItemNS">setNamedItemNS</a></td>
-  </tr>
- </tbody>
-</table>
-
-<p>The first argument for all the DOM2 namespace aware methods must be the namespace name (also known as the namespace URI) of the element or attribute in question. For SVG <strong>elements</strong> this is 'http://www.w3.org/2000/svg'. However, note carefully: the <a href="http://www.w3.org/TR/xml-names11/#defaulting">Namespaces in XML 1.1</a> recommendation states that the namespace name for attributes without a prefix does not have a value. In other words, although the attributes belong to the namespace of the tag, you do not use the tag's namespace name. Instead, <strong>you must use null as the namespace name for unqualified (prefixless) attributes</strong>. So, to create an SVG <code>rect</code> <em>element</em> using <code>document.createElementNS()</code>, you must write:</p>
-
-<pre>document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-</pre>
-
-<p>But to retrieve the value of the <code>x</code> <em>attribute</em> on an SVG <code>rect</code> element, you must write:</p>
-
-<pre class="eval">rect.getAttributeNS(<strong>null</strong>, 'x');
-</pre>
-
-<p>Note that this isn't the case for attributes <em>with</em> a namespace prefix (attributes that don't belong to the same XML dialect as the tag). Attributes such as the <code>xlink:href</code> attribute require the namespace name that was assigned to that prefix (http://www.w3.org/1999/xlink for XLink). Hence to get the value of the <code>xlink:href</code> attribute of an <code><a></code> element in SVG you would write:</p>
-
-<pre>elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
-</pre>
-
-<p>For setting attributes that have a namespace, it is recommended (but not required) that you also include their prefix in the second argument so that the DOM can later be more easily converted back to XML (if for instance you want to send it back to the server). For example:</p>
-
-<pre>elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');
-</pre>
-
-<p>As a final example, here's a demonstration of how you should dynamically create an <code><image></code> element using script:</p>
-
-<pre>var SVG_NS = 'http://www.w3.org/2000/svg';
+```plain
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- more tags here -->
+</svg>
+```
+
+命名空间声明是通过 xmlns attribute 提供的。xmlns 属性意味着这个 \<svg> 标签和它的子节点都属于 'http\://www\.w3.org/2000/svg' 这个 SVG 命名空间。注意，这个命名空间声明只需要在根节点上声明一次。这个声明定义了默认的命名空间，所以用户代理知道所有的 \<svg> 标签的子标签也属于相同的命名空间。用户代理如果能识别这个命名空间就决定他们如何处理这个标记。
+
+请注意，命名空间仅仅只是一些字符串，所以 SVG 上那些看起来像 URI 的命名空间并不重要。因为 URIs 的唯一性从而被广泛使用，它的本意并不是要 “链接” 到某个地址。（实际上 URIs 被如此频繁地使用是 “命名空间 URI"普遍使用而不是” 命名空间的名字“被使用。）
+
+#### 重新定义默认命名空间
+
+如果根节点的所有子节点也被定义为默认命名空间，那么你如何混合使用另一种命名空间呢？很简单，你仅仅只需重新定义默认命名空间即可。这里是一个简单的例子。
+
+```plain
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <body>
+    <!-- 在这里放置一些 XHTML 标签 -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
+      <!-- 在这里放置一些 SVG 标签 -->
+    </svg>
+    <!-- 在这里放置一些 XHTML 标签 -->
+  </body>
+</html>
+```
+
+在这个例子中根节点`<html>` 的 `xmlns` 属性定义了 XHTML 为默认命名空间。结果就是它和它所有的子节标签，除了 `<svg>` 标签，都被用户代理解释为属于 XHTML 命名空间。 `<svg>` 标签拥有它自己的`xmlns`属性，通过重新定义默认的命名空间，告诉用户代理 `<svg>` 标签以及他所包含的标签（除非他们也重新定义了默认名称空间）属于 SVG.
+
+看到没，命名空间其实没有那么难以理解。
+
+#### Declaring namespace prefixes
+
+XML dialects not only define their own tags, but also their own attributes. By default, attributes don't have a namespace at all, and are only known to be unique because they appear on an element that itself has a unique name. However, sometimes it is necessary to define attributes so that they can be reused on many different elements and still be considered to be the same attribute, independently of the element with which they are used. A very good example of this is the `href` attribute defined by the XLink specification. This attribute is commonly used by other XML dialects as a means to link to external resources. But how do you tell the user agent which dialect the attribute belongs to, in this case XLink? Consider the following example.
+
+```plain
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="cool-script.js" type="text/ecmascript"/>
+</svg>
+```
+
+This example has the rather unusual looking attribute `xmlns:xlink`. As you may guess from the first 'xmlns' part, this is another namespace declaration. However, instead of setting the default namespace, this namespace declaration sets the namespace for something called a "namespace prefix". In this case, we have chosen to use the prefix `xlink` (the second part) since the prefix will be used to tell the user agent about attributes that belong to XLink.
+
+As their name suggests, namespace prefixes are used to prefix attribute names and tag names. This is done by putting the namespace prefix and a colon before the attribute name as shown on the `<script>` tag in the example above. This tells the user agent that that particular attribute belongs to the namespace assigned to the namespace prefix (XLink), and is an attribute that can be used with the same meaning on other tags.
+
+Note that it is an XML error to use a prefix that hasn't been bound to a namespace name. The binding created by the `xmlns:xlink` attribute in the example above is absolutely essential if the `xlink:href` attribute isn't to cause an error. This XLink attribute is also frequently used in SVG on the `<a>`, `<use>` and `<image>` tags among others, so it's a good idea to always include the XLink declaration in your documents.
+
+As an aside, it's useful to know that namespace prefixes can also be used for tag names. This tells the user agent that that particular tag (but not its children this time!) belongs to the namespace assigned to the prefix. Knowing this will save you some confusion if you come across markup like that in the following example:
+
+```plain
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+  <body>
+    <h1>SVG embedded inline in XHTML</h1>
+    <svg:svg width="300px" height="200px">
+      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
+    </svg:svg>
+  </body>
+</html>
+```
+
+Note that because a namespace prefix is used for the `<svg:svg>` tag and its child `<svg:circle>`, it wasn't necessary to redeclare the default namespace. In general though it is better to redeclare the default namespace rather than prefix lots of tags in this way.
+
+### Scripting in namespaced XML
+
+Namespaces affect not only markup, but also scripting. If you write scripts for namespaced XML such as SVG, read on.
+
+The [DOM Level 1](http://www.w3.org/TR/REC-DOM-Level-1/) recommendation was created before the [original Namespaces in XML](http://www.w3.org/TR/REC-xml-names/) recommendation was released; therefore, DOM1 isn't namespace aware. This causes problems for namespaced XML such as SVG. To resolve these problems, [DOM Level 2 Core](http://www.w3.org/TR/DOM-Level-2-Core/) added namespace aware equivalents of all the applicable DOM Level 1 methods. When scripting SVG, [it is important to use the namespace aware methods](http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations). The table below lists the DOM1 methods that shouldn't be used in SVG, along with their equivalent DOM2 counterparts that should be used instead.
+
+| DOM1 (don't use)                                                                                             | DOM2 (use these instead!)                                                                                                                                                      |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [createAttribute](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createAttribute)           | [createAttributeNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrAttrNS)                                                                                            |
+| [createElement](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createElement)               | [createElementNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS)                                                                                                |
+| [getAttributeNode](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode)         | [getAttributeNodeNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS)                                                                                         |
+| [getAttribute](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute)                 | [getAttributeNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS)                                                                                               |
+| [getElementsByTagName](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName) | [getElementsByTagNameNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS) (also [added to Element](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942)) |
+| [getNamedItem](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getNamedItem)                 | [getNamedItemNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getNamedItemNS)                                                                                            |
+| [hasAttribute](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#)                                    | [hasAttributeNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS)                                                                                               |
+| [removeAttribute](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute)           | [removeAttributeNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS)                                                                                              |
+| [removeNamedItem](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeNamedItem)           | [removeNamedItemNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-removeNamedItemNS)                                                                                      |
+| [setAttribute](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute)                 | [setAttributeNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS)                                                                                               |
+| [setAttributeNode](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode)         | [setAttributeNodeNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS)                                                                                         |
+| [setNamedItem](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setNamedItem)                 | [setNamedItemNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-setNamedItemNS)                                                                                            |
+
+The first argument for all the DOM2 namespace aware methods must be the namespace name (also known as the namespace URI) of the element or attribute in question. For SVG **elements** this is 'http\://www\.w3.org/2000/svg'. However, note carefully: the [Namespaces in XML 1.1](http://www.w3.org/TR/xml-names11/#defaulting) recommendation states that the namespace name for attributes without a prefix does not have a value. In other words, although the attributes belong to the namespace of the tag, you do not use the tag's namespace name. Instead, **you must use null as the namespace name for unqualified (prefixless) attributes**. So, to create an SVG `rect` _element_ using `document.createElementNS()`, you must write:
+
+```plain
+document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+```
+
+But to retrieve the value of the `x` _attribute_ on an SVG `rect` element, you must write:
+
+```plain
+rect.getAttributeNS(null, 'x');
+```
+
+Note that this isn't the case for attributes _with_ a namespace prefix (attributes that don't belong to the same XML dialect as the tag). Attributes such as the `xlink:href` attribute require the namespace name that was assigned to that prefix (http\://www\.w3.org/1999/xlink for XLink). Hence to get the value of the `xlink:href` attribute of an `<a>` element in SVG you would write:
+
+```plain
+elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
+```
+
+For setting attributes that have a namespace, it is recommended (but not required) that you also include their prefix in the second argument so that the DOM can later be more easily converted back to XML (if for instance you want to send it back to the server). For example:
+
+```plain
+elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');
+```
+
+As a final example, here's a demonstration of how you should dynamically create an `<image>` element using script:
+
+```plain
+var SVG_NS = 'http://www.w3.org/2000/svg';
 var XLink_NS = 'http://www.w3.org/1999/xlink';
 var image = document.createElementNS(SVG_NS, 'image');
 image.setAttributeNS(null, 'width', '100');
 image.setAttributeNS(null, 'height', '100');
 image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');
-</pre>
+```
 
-<h3 id="Conclusion">Conclusion</h3>
+### Conclusion
 
-<p>Make sure you always declare the namespaces you use in your XML files. If you don't, user agents such as Firefox won't recognize your content and will simply show the XML markup or inform the user that there's an error in the XML. It's a good idea to use a template that includes all the commonly used namespace declarations when creating new SVG files. If you don't already have one, make one up starting with the following code:</p>
+Make sure you always declare the namespaces you use in your XML files. If you don't, user agents such as Firefox won't recognize your content and will simply show the XML markup or inform the user that there's an error in the XML. It's a good idea to use a template that includes all the commonly used namespace declarations when creating new SVG files. If you don't already have one, make one up starting with the following code:
 
-<pre><svg version="1.1"
+```plain
+<svg version="1.1"
      baseProfile="full"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
-     xmlns:ev="http://www.w3.org/2001/xml-events">
-</svg>
-</pre>
+     xmlns:ev="http://www.w3.org/2001/xml-events">
+</svg>
+```
 
-<p>Even if you don't use all those namespaces in a particular document, there's no harm in including the namespace declarations. It may save you from some annoying errors if you end up adding content from one of the unused namespaces at a later date.</p>
+Even if you don't use all those namespaces in a particular document, there's no harm in including the namespace declarations. It may save you from some annoying errors if you end up adding content from one of the unused namespaces at a later date.
 
-<h3 id="A_full_example">A full example</h3>
+### A full example
 
-<p>For a full example see <a href="/en-US/docs/Web/SVG/Namespaces_Crash_Course/Example">SVG: Namespaces Crash Course: Example</a>.</p>
+For a full example see [SVG: Namespaces Crash Course: Example](/zh-CN/docs/Web/SVG/Namespaces_Crash_Course/Example).
diff --git a/files/zh-cn/web/svg/tutorial/basic_shapes/index.md b/files/zh-cn/web/svg/tutorial/basic_shapes/index.md
index 92070fc969d96f..84b409203f157a 100644
--- a/files/zh-cn/web/svg/tutorial/basic_shapes/index.md
+++ b/files/zh-cn/web/svg/tutorial/basic_shapes/index.md
@@ -3,144 +3,144 @@ title: 基本形状
 slug: Web/SVG/Tutorial/Basic_Shapes
 tags:
   - SVG
-  - 'SVG:教程'
+  - SVG:教程
 translation_of: Web/SVG/Tutorial/Basic_Shapes
 ---
-<p> {{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
 
-<p>这里介绍的几个基本的形状用于大多数的 SVG 绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小，但一个元素参考可能包含对元素属性的更准确和完整的描述，这里先不做介绍。然而，由于有些元素可以用在大多数 SVG 文档中，所以很有必要在这里介绍这部分元素。</p>
+这里介绍的几个基本的形状用于大多数的 SVG 绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小，但一个元素参考可能包含对元素属性的更准确和完整的描述，这里先不做介绍。然而，由于有些元素可以用在大多数 SVG 文档中，所以很有必要在这里介绍这部分元素。
 
-<h2 id="Basic_shapes">基本形状</h2>
+## 基本形状
 
-<p>要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余， 但是它们用起来方便，可让我们的 SVG 文档简洁易懂。右边的图片展示了所有的基本形状。生成它们的代码如下：</p>
+要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余， 但是它们用起来方便，可让我们的 SVG 文档简洁易懂。右边的图片展示了所有的基本形状。生成它们的代码如下：
 
-<p>                                                                                                                               <img alt="" src="https://developer.mozilla.org/@api/deki/files/359/=Shapes.png"></p>
+![](https://developer.mozilla.org/@api/deki/files/359/=Shapes.png)
 
-<pre><?xml version="1.0" standalone="no"?>
-<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+```plain
+<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
-  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
 
-  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
-  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
 
-  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
-  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
-      stroke="orange" fill="transparent" stroke-width="5"/>
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
 
-  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
-      stroke="green" fill="transparent" stroke-width="5"/>
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
 
-  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
-</svg></pre>
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+```
 
-<div class="note">
-<p><strong>注意：</strong><code>stroke</code>、<code>stroke-width</code> <code>和 fill</code> 等属性在后面的章节中解释。</p>
-</div>
+> **备注：** `stroke`、`stroke-width` 和 `fill` 等属性在后面的章节中解释。
 
-<h3 id="Rectangles">矩形</h3>
+### 矩形
 
-<p>就像你能联想到的，<code>rect</code>元素会在屏幕上绘制一个矩形 。其实只要 6 个基本属性就可以控制它在屏幕上的位置和形状。 上面的图例中最先展示了 2 个矩形，虽然这有点冗余了。右边的那个图形设置了 rx 和 ry 属性用来控制圆角。如果没有设置圆角，则默认为 0。</p>
+就像你能联想到的，`rect`元素会在屏幕上绘制一个矩形 。其实只要 6 个基本属性就可以控制它在屏幕上的位置和形状。 上面的图例中最先展示了 2 个矩形，虽然这有点冗余了。右边的那个图形设置了 rx 和 ry 属性用来控制圆角。如果没有设置圆角，则默认为 0。
 
-<pre><rect x="10" y="10" width="30" height="30"/>
-<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/></pre>
+```plain
+<rect x="10" y="10" width="30" height="30"/>
+<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+```
 
-<dl>
- <dt>x</dt>
- <dd>矩形左上角的 x 位置</dd>
- <dt>y</dt>
- <dd>矩形左上角的 y 位置</dd>
- <dt>width</dt>
- <dd>矩形的宽度</dd>
- <dt>height</dt>
- <dd>矩形的高度</dd>
- <dt>rx</dt>
- <dd>圆角的 x 方位的半径</dd>
- <dt>ry</dt>
- <dd>圆角的 y 方位的半径</dd>
-</dl>
+- x
+  - : 矩形左上角的 x 位置
+- y
+  - : 矩形左上角的 y 位置
+- width
+  - : 矩形的宽度
+- height
+  - : 矩形的高度
+- rx
+  - : 圆角的 x 方位的半径
+- ry
+  - : 圆角的 y 方位的半径
 
-<h3 id="Circle">圆形 </h3>
+### 圆形
 
-<p>正如你猜到的，<code>circle</code>元素会在屏幕上绘制一个圆形。它只有 3 个属性用来设置圆形。</p>
+正如你猜到的，`circle`元素会在屏幕上绘制一个圆形。它只有 3 个属性用来设置圆形。
 
-<pre><circle cx="25" cy="75" r="20"/></pre>
+```plain
+<circle cx="25" cy="75" r="20"/>
+```
 
-<dl>
- <dt>r</dt>
- <dd>圆的半径</dd>
- <dt>cx</dt>
- <dd>圆心的 x 位置</dd>
- <dt>cy</dt>
- <dd>圆心的 y 位置</dd>
-</dl>
+- r
+  - : 圆的半径
+- cx
+  - : 圆心的 x 位置
+- cy
+  - : 圆心的 y 位置
 
-<h3 id="Ellipse">椭圆</h3>
+### 椭圆
 
-<p><a href="/en-US/Web/SVG/Element/ellipse">Ellipse</a> 是<code>circle</code>元素更通用的形式，你可以分别缩放圆的 x 半径和 y 半径（通常数学家称之为长轴半径和短轴半径）。</p>
+[Ellipse](/en-US/Web/SVG/Element/ellipse) 是`circle`元素更通用的形式，你可以分别缩放圆的 x 半径和 y 半径（通常数学家称之为长轴半径和短轴半径）。
 
-<pre><ellipse cx="75" cy="75" rx="20" ry="5"/></pre>
+```plain
+<ellipse cx="75" cy="75" rx="20" ry="5"/>
+```
 
-<dl>
- <dt>rx</dt>
- <dd>椭圆的 x 半径</dd>
- <dt>ry</dt>
- <dd>椭圆的 y 半径</dd>
- <dt>cx</dt>
- <dd>椭圆中心的 x 位置</dd>
- <dt>cy</dt>
- <dd>椭圆中心的 y 位置</dd>
-</dl>
+- rx
+  - : 椭圆的 x 半径
+- ry
+  - : 椭圆的 y 半径
+- cx
+  - : 椭圆中心的 x 位置
+- cy
+  - : 椭圆中心的 y 位置
 
-<h3 id="线条">线条</h3>
+### 线条
 
-<p><a href="/en-US/Web/SVG/Element/line">Line</a> 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。</p>
+[Line](/en-US/Web/SVG/Element/line) 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。
 
-<pre><line x1="10" x2="50" y1="110" y2="150"/></pre>
+```plain
+<line x1="10" x2="50" y1="110" y2="150"/>
+```
 
-<dl>
- <dt>x1</dt>
- <dd>起点的 x 位置</dd>
- <dt>y1</dt>
- <dd>起点的 y 位置</dd>
- <dt>x2</dt>
- <dd>终点的 x 位置</dd>
- <dt>y2</dt>
- <dd>终点的 y 位置</dd>
-</dl>
+- x1
+  - : 起点的 x 位置
+- y1
+  - : 起点的 y 位置
+- x2
+  - : 终点的 x 位置
+- y2
+  - : 终点的 y 位置
 
-<h3 id="Polyline">折线</h3>
+### 折线
 
-<p><a href="/en-US/Web/SVG/Element/polyline">Polyline</a>是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个 points 属性中：</p>
+[Polyline](/en-US/Web/SVG/Element/polyline)是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个 points 属性中：
 
-<pre><polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/></pre>
+```plain
+<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+```
 
-<dl>
- <dt>points</dt>
- <dd>点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。</dd>
-</dl>
+- points
+  - : 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。
 
-<h3 id="Polygon">多边形</h3>
+### 多边形
 
-<p><code><a href="https://developer.mozilla.org/en/SVG/Element/polygon">polygon</a></code>和折线很像，它们都是由连接一组点集的直线构成。不同的是，<code>polygon</code>的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。</p>
+[`polygon`](https://developer.mozilla.org/en/SVG/Element/polygon)和折线很像，它们都是由连接一组点集的直线构成。不同的是，`polygon`的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。
 
-<pre><polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/></pre>
+```plain
+<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+```
 
-<dl>
- <dt>points</dt>
- <dd>点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置 (2,2) 连接到位置 (0,0)。</dd>
-</dl>
+- points
+  - : 点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置 (2,2) 连接到位置 (0,0)。
 
-<h3 id="Path">路径</h3>
+### 路径
 
-<p><code>path</code>可能是 SVG 中最常见的形状。你可以用 path 元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2 次曲线等曲线。因为 path 很强大也很复杂，所以会在<a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths">下一章</a>进行详细介绍。这里只介绍一个定义路径形状的属性。</p>
+`path`可能是 SVG 中最常见的形状。你可以用 path 元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2 次曲线等曲线。因为 path 很强大也很复杂，所以会在[下一章](https://developer.mozilla.org/en/SVG/Tutorial/Paths)进行详细介绍。这里只介绍一个定义路径形状的属性。
 
-<pre><path d="M 20 230 Q 40 205, 50 230 T 90230"/></pre>
+```plain
+<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+```
 
-<dl>
- <dt>d</dt>
- <dd>一个点集数列以及其它关于如何绘制路径的信息。请阅读<a href="https://developer.mozilla.org/en-US/Web/SVG/Tutorial/Paths">Paths</a> 章节以了解更多信息。</dd>
-</dl>
+- d
+  - : 一个点集数列以及其它关于如何绘制路径的信息。请阅读[Paths](https://developer.mozilla.org/en-US/Web/SVG/Tutorial/Paths) 章节以了解更多信息。
 
-<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
diff --git a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md
index 05fac37e3d901e..9afbac62606ced 100644
--- a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md
+++ b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.md
@@ -3,85 +3,89 @@ title: 剪切和遮罩
 slug: Web/SVG/Tutorial/Clipping_and_masking
 tags:
   - SVG
-  - 'SVG:Tutorial'
+  - SVG:Tutorial
 translation_of: Web/SVG/Tutorial/Clipping_and_masking
 ---
-<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}
 
-<p>擦除已经创建的元素的部分内容，最初看起来有点矛盾。但是如果你打算在 SVG 中创建一个半圆形，你将很快发现下面的属性的作用了。</p>
+擦除已经创建的元素的部分内容，最初看起来有点矛盾。但是如果你打算在 SVG 中创建一个半圆形，你将很快发现下面的属性的作用了。
 
-<p><strong>Clipping</strong>用来移除在别处定义的元素的部分内容。在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。</p>
+**Clipping**用来移除在别处定义的元素的部分内容。在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。
 
-<p><strong>Masking</strong>允许使用透明度和灰度值遮罩计算得的软边缘。</p>
+**Masking**允许使用透明度和灰度值遮罩计算得的软边缘。
 
-<h3 id="创建剪切">创建剪切</h3>
+### 创建剪切
 
-<p>我们在一个圆形的基础上创建上面提到的半圆形：</p>
+我们在一个圆形的基础上创建上面提到的半圆形：
 
-<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <clipPath id="cut-off-bottom">
-      <rect x="0" y="0" width="200" height="100" />
-    </clipPath>
-  </defs>
+```html
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <clipPath id="cut-off-bottom">
+      <rect x="0" y="0" width="200" height="100" />
+    </clipPath>
+  </defs>
 
-  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
-</svg>
-</pre>
+  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
+</svg>
+```
 
-<p>在 (100,100) 创建一个圆形，半径是 100。属性<code>clip-path</code>引用了一个带单个 rect 元素的<code>{{ SVGElement("clipPath") }}</code>元素。它内部的这个矩形将把画布的上半部分涂黑。注意，<code>clipPath</code>元素经常放在一个<code>defs</code>元素内。</p>
+在 (100,100) 创建一个圆形，半径是 100。属性`clip-path`引用了一个带单个 rect 元素的`{{ SVGElement("clipPath") }}`元素。它内部的这个矩形将把画布的上半部分涂黑。注意，`clipPath`元素经常放在一个`defs`元素内。
 
-<p>然而，该 rect 不会被绘制。它的象素数据将用来确定：圆形的哪些像素需要最终呈现出来。因为矩形只覆盖了圆形的上半部分，所以下半部分将消失了：</p>
+然而，该 rect 不会被绘制。它的象素数据将用来确定：圆形的哪些像素需要最终呈现出来。因为矩形只覆盖了圆形的上半部分，所以下半部分将消失了：
 
-<p>{{ EmbedLiveSample('创建剪切','240','240') }}</p>
+{{ EmbedLiveSample('创建剪切','240','240') }}
 
-<p>现在我们已经有了一个半圆形，不用处理弧形路径元素。对于这个剪切，<code>clipPath</code>内部的每个路径都会被检查到、与它的描边属性一起被估值、变形。然后目标的位于 clipPath 内容的结果的透明度区域的每一块都不会呈现。颜色、不透明度都没有这种效果，因为它们不能让一部分彻底消失。</p>
+现在我们已经有了一个半圆形，不用处理弧形路径元素。对于这个剪切，`clipPath`内部的每个路径都会被检查到、与它的描边属性一起被估值、变形。然后目标的位于 clipPath 内容的结果的透明度区域的每一块都不会呈现。颜色、不透明度都没有这种效果，因为它们不能让一部分彻底消失。
 
-<h3 id="遮罩">遮罩</h3>
+### 遮罩
 
-<p>遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现这一点。</p>
+遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现这一点。
 
-<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <linearGradient id="Gradient">
-      <stop offset="0" stop-color="white" stop-opacity="0" />
-      <stop offset="1" stop-color="white" stop-opacity="1" />
-    </linearGradient>
-    <mask id="Mask">
-      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
-    </mask>
-  </defs>
+```html
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="Gradient">
+      <stop offset="0" stop-color="white" stop-opacity="0" />
+      <stop offset="1" stop-color="white" stop-opacity="1" />
+    </linearGradient>
+    <mask id="Mask">
+      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
+    </mask>
+  </defs>
 
-  <rect x="0" y="0" width="200" height="200" fill="green" />
-  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
-</svg>
-</pre>
+  <rect x="0" y="0" width="200" height="200" fill="green" />
+  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
+</svg>
+```
 
-<p>你看到有一个绿色填充的矩形在底层，一个红色填充的矩形在上层。后者有一个<code>mask</code>属性指向一个<code>mask</code>元素。<code>mask</code>元素的内容是一个单一的<code>rect</code>元素，它填充了一个透明到白色的渐变。作为红色矩形继承<code>mark</code>内容的<code>alpha</code>值（透明度）的结果，我们看到一个从绿色到红色渐变的输出：</p>
+你看到有一个绿色填充的矩形在底层，一个红色填充的矩形在上层。后者有一个`mask`属性指向一个`mask`元素。`mask`元素的内容是一个单一的`rect`元素，它填充了一个透明到白色的渐变。作为红色矩形继承`mark`内容的`alpha`值（透明度）的结果，我们看到一个从绿色到红色渐变的输出：
 
-<p>{{ EmbedLiveSample('遮罩','240','240') }}</p>
+{{ EmbedLiveSample('遮罩','240','240') }}
 
-<h3 id="用opacity定义透明度">用 <code>opacity</code> 定义透明度</h3>
+### 用 `opacity` 定义透明度
 
-<p>有一个简单方法可以用来为整个元素设置透明度。它就是<code>opacity</code>属性：</p>
+有一个简单方法可以用来为整个元素设置透明度。它就是`opacity`属性：
 
-<pre class="brush: xml"><rect x="0" y="0" width="100" height="100" opacity=".5" />
-</pre>
+```xml
+<rect x="0" y="0" width="100" height="100" opacity=".5" />
+```
 
-<p>上面的矩形将绘制为半透明。填充和描边还有两个属性是<code>fill-opacity</code>和<code>stroke-opacity</code>，分别用来控制填充和描边的不透明度。需要注意的是描边将绘制在填充的上面。因此，如果你在一个元素上设置了描边透明度，但它同时设有填充，则描边的一半应用填充色，另一半将应用背景色。</p>
+上面的矩形将绘制为半透明。填充和描边还有两个属性是`fill-opacity`和`stroke-opacity`，分别用来控制填充和描边的不透明度。需要注意的是描边将绘制在填充的上面。因此，如果你在一个元素上设置了描边透明度，但它同时设有填充，则描边的一半应用填充色，另一半将应用背景色。
 
-<pre class="brush: html"><svg  width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
-  <rect x="0" y="0" width="200" height="200" fill="blue" />
-  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
-</svg>
-</pre>
+```html
+<svg  width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
+  <rect x="0" y="0" width="200" height="200" fill="blue" />
+  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
+</svg>
+```
 
-<p>{{ EmbedLiveSample('用 opacity 定义透明度','240','240') }}</p>
+{{ EmbedLiveSample('用 opacity 定义透明度','240','240') }}
 
-<p>你看到这个示例，红色的圆形在蓝色的背景上，黄色描边设置为 50% 不透明度，导到双色描边的效果。</p>
+你看到这个示例，红色的圆形在蓝色的背景上，黄色描边设置为 50% 不透明度，导到双色描边的效果。
 
-<h2 id="利用广为人知的CSS技术">利用广为人知的 CSS 技术</h2>
+## 利用广为人知的 CSS 技术
 
-<p>Web 开发工具箱中有一个很有用的工具是<code>display:none</code>。它虽然几无悬念，但是依然可以在 SVG 上使用该 CSS 属性，连同 CSS2 定义的<code>visibility</code>和<code>clip</code>属性。为了恢复以前设置的<code>display:none</code>，知道这一点很重要：所有的 SVG 元素的初始<code>display</code>值都是<code>inline</code>。</p>
+Web 开发工具箱中有一个很有用的工具是`display:none`。它虽然几无悬念，但是依然可以在 SVG 上使用该 CSS 属性，连同 CSS2 定义的`visibility`和`clip`属性。为了恢复以前设置的`display:none`，知道这一点很重要：所有的 SVG 元素的初始`display`值都是`inline`。
 
-<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}
diff --git a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
index cd87d9e0b55ffa..1a6cfa144eb7d0 100644
--- a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
+++ b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.md
@@ -8,133 +8,146 @@ tags:
   - Tutorial
 translation_of: Web/SVG/Tutorial/Fills_and_Strokes
 ---
-<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}
 
-<p>可以使用几种方法来着色（包括指定对象的属性）使用内联 CSS 样式、内嵌 CSS 样式，或者使用外部 CSS 样式文件。大多数的 web 网站的 SVG 使用的是内联样式 CSS，对于这些方法都有优缺点。</p>
+可以使用几种方法来着色（包括指定对象的属性）使用内联 CSS 样式、内嵌 CSS 样式，或者使用外部 CSS 样式文件。大多数的 web 网站的 SVG 使用的是内联样式 CSS，对于这些方法都有优缺点。
 
-<h2 id="Fill_and_Stroke_Attributes">Fill 和 Stroke 属性</h2>
+## Fill 和 Stroke 属性
 
-<h3 id="Painting">上色</h3>
+### 上色
 
-<p>现在你难免面露难色，但是大多数基本的涂色可以通过在元素上设置两个属性来搞定：<code>fill</code>属性和<code>stroke</code>属性。<code>fill</code>属性设置对象内部的颜色，<code>stroke</code>属性设置绘制对象的线条的颜色。你可以使用在 HTML 中的 CSS 颜色命名方案定义它们的颜色，比如说颜色名（像<em>red</em>这种）、rgb 值（像 rgb(255,0,0) 这种）、十六进制值、rgba 值，等等。</p>
+现在你难免面露难色，但是大多数基本的涂色可以通过在元素上设置两个属性来搞定：`fill`属性和`stroke`属性。`fill`属性设置对象内部的颜色，`stroke`属性设置绘制对象的线条的颜色。你可以使用在 HTML 中的 CSS 颜色命名方案定义它们的颜色，比如说颜色名（像*red*这种）、rgb 值（像 rgb(255,0,0) 这种）、十六进制值、rgba 值，等等。
 
-<pre class="brush:xml;"> <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
-       fill-opacity="0.5" stroke-opacity="0.8"/>
-</pre>
+```xml
+ <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
+       fill-opacity="0.5" stroke-opacity="0.8"/>
+```
 
-<p>此外，在 SVG 中你可以分别定义填充色和边框色的不透明度，属性<code>fill-opacity</code>控制填充色的不透明度，属性<code>stroke-opacity</code>控制描边的不透明度。</p>
+此外，在 SVG 中你可以分别定义填充色和边框色的不透明度，属性`fill-opacity`控制填充色的不透明度，属性`stroke-opacity`控制描边的不透明度。
 
-<div class="note"><p><strong>备注：</strong> FireFox 3+ 支持 rgba 值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和填充/描边的不透明度分开使用。如果同时指定了 rgba 值和填充/描边不透明度，它们将都被调用。</p></div>
+> **备注：** FireFox 3+ 支持 rgba 值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和填充/描边的不透明度分开使用。如果同时指定了 rgba 值和填充/描边不透明度，它们将都被调用。
 
-<h3 id="Stroke">描边</h3>
+### 描边
 
-<p>除了颜色属性，还有其他一些属性用来控制绘制描边的方式。</p>
+除了颜色属性，还有其他一些属性用来控制绘制描边的方式。
 
-<p><img alt="" src="svg_stroke_linecap_example.png"></p>
+![](svg_stroke_linecap_example.png)
 
-<pre class="brush:xml"><?xml version="1.0" standalone="no"?>
-<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
-  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
-  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
-</svg></pre>
+```xml
+<?xml version="1.0" standalone="no"?>
+<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
+  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
+  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
+</svg>
+```
 
-<p><code>stroke-width</code>属性定义了描边的宽度。注意，描边是以路径为中心线绘制的，在上面的例子里，路径是粉红色的，描边是黑色的。如你所见，路径的每一侧都有均匀分布的描边。</p>
+`stroke-width`属性定义了描边的宽度。注意，描边是以路径为中心线绘制的，在上面的例子里，路径是粉红色的，描边是黑色的。如你所见，路径的每一侧都有均匀分布的描边。
 
-<p>第二个影响描边的属性是<code>stroke-linecap</code>属性，如上所示。它控制边框终点的形状。</p>
+第二个影响描边的属性是`stroke-linecap`属性，如上所示。它控制边框终点的形状。
 
-<p><code>stroke-linecap</code>属性的值有三种可能值：</p>
+`stroke-linecap`属性的值有三种可能值：
 
-<ul>
- <li><code>butt</code>用直边结束线段，它是常规做法，线段边界 90 度垂直于描边的方向、贯穿它的终点。</li>
- <li><code>square</code>的效果差不多，但是会稍微超出<code>实际路径</code>的范围，超出的大小由<code>stroke-width</code>控制。</li>
- <li><code>round</code>表示边框的终点是圆角，圆角的半径也是由<code>stroke-width</code>控制的。</li>
-</ul>
+- `butt`用直边结束线段，它是常规做法，线段边界 90 度垂直于描边的方向、贯穿它的终点。
+- `square`的效果差不多，但是会稍微超出`实际路径`的范围，超出的大小由`stroke-width`控制。
+- `round`表示边框的终点是圆角，圆角的半径也是由`stroke-width`控制的。
 
-<p>还有一个<code>stroke-linejoin</code>属性，用来控制两条描边线段之间，用什么方式连接。</p>
+还有一个`stroke-linejoin`属性，用来控制两条描边线段之间，用什么方式连接。
 
-<p><img alt="" src="svg_stroke_linejoin_example.png"></p>
+![](svg_stroke_linejoin_example.png)
 
-<pre class="brush:xml"><?xml version="1.0" standalone="no"?>
-<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
-      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
+```xml
+<?xml version="1.0" standalone="no"?>
+<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
 
-  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
-      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
+  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
 
-  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
-      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
-</svg></pre>
+  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
+</svg>
+```
 
-<p>每条折线都是由两个线段连接起来的，连接处的样式由<code>stroke-linejoin</code>属性控制，它有三个可用的值，<code>miter</code>是默认值，表示用方形画笔在连接处形成尖角，<code>round</code>表示用圆角连接，实现平滑效果。最后还有一个值<code>bevel</code>，连接处会形成一个斜接。</p>
+每条折线都是由两个线段连接起来的，连接处的样式由`stroke-linejoin`属性控制，它有三个可用的值，`miter`是默认值，表示用方形画笔在连接处形成尖角，`round`表示用圆角连接，实现平滑效果。最后还有一个值`bevel`，连接处会形成一个斜接。
 
-<p>最后，你可以通过指定<code>stroke-dasharray</code>属性，将虚线类型应用在描边上。</p>
+最后，你可以通过指定`stroke-dasharray`属性，将虚线类型应用在描边上。
 
-<p><img alt="" src="svg_stroke_dasharray_example.png"></p>
+![](svg_stroke_dasharray_example.png)
 
-<pre class="brush:xml;"><?xml version="1.0" standalone="no"?>
-<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
-    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
-  <path d="M 10 75 L 190 75" stroke="red"
-    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
-</svg></pre>
+```xml
+<?xml version="1.0" standalone="no"?>
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
+  <path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
+</svg>
+```
 
-<p><code>stroke-dasharray</code>属性的参数，是一组用逗号分割的数字组成的数列。注意，和<code>path</code>不一样，这里的数字<strong>必须</strong>用逗号分割（空格会被忽略）。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。所以在上面的例子里，第二个路径会先做 5 个像素单位的填色，紧接着是 5 个空白单位，然后又是 5 个单位的填色。如果你想要更复杂的虚线模式，你可以定义更多的数字。第一个例子指定了 3 个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式（奇数个循环两次变偶数个）。所以该路径首先渲染 5 个填色单位，10 个空白单位，5 个填色单位，然后回头以这 3 个数字做一次循环，但是这次是创建 5 个空白单位，10 个填色单位，5 个空白单位。通过这两次循环得到偶数模式，并将这个偶数模式不断重复。</p>
+`stroke-dasharray`属性的参数，是一组用逗号分割的数字组成的数列。注意，和`path`不一样，这里的数字**必须**用逗号分割（空格会被忽略）。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。所以在上面的例子里，第二个路径会先做 5 个像素单位的填色，紧接着是 5 个空白单位，然后又是 5 个单位的填色。如果你想要更复杂的虚线模式，你可以定义更多的数字。第一个例子指定了 3 个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式（奇数个循环两次变偶数个）。所以该路径首先渲染 5 个填色单位，10 个空白单位，5 个填色单位，然后回头以这 3 个数字做一次循环，但是这次是创建 5 个空白单位，10 个填色单位，5 个空白单位。通过这两次循环得到偶数模式，并将这个偶数模式不断重复。
 
-<p>另外还有一些关于填充和边框的属性，包括<code>fill-rule</code>，用于定义如何给图形重叠的区域上色；<code>stroke-miterlimit</code>，定义什么情况下绘制或不绘制边框连接的<code>miter</code>效果；还有<code>stroke-dashoffset</code>，定义虚线开始的位置。</p>
+另外还有一些关于填充和边框的属性，包括`fill-rule`，用于定义如何给图形重叠的区域上色；`stroke-miterlimit`，定义什么情况下绘制或不绘制边框连接的`miter`效果；还有`stroke-dashoffset`，定义虚线开始的位置。
 
-<h2 id="Using_CSS">使用 CSS</h2>
+## 使用 CSS
 
-<p>除了定义对象的属性外，你也可以通过 CSS 来样式化<code>填充</code>和<code>描边</code>。语法和在 HTML 里使用 CSS 一样，只不过你要把<code>background-color</code>、<code>border</code>改成<code>fill</code>和<code>stroke</code>。注意，不是所有的属性都能用 CSS 来设置。上色和填充的部分一般是可以用 CSS 来设置的，比如<code>fill</code>，<code>stroke</code>，<code>stroke-dasharray</code>等，但是不包括下面会提到的渐变和图案等功能。另外，<code>width</code>、<code>height</code>，以及路径的命令等等，都不能用 CSS 设置。判断它们能不能用 CSS 设置还是比较容易的。</p>
+除了定义对象的属性外，你也可以通过 CSS 来样式化`填充`和`描边`。语法和在 HTML 里使用 CSS 一样，只不过你要把`background-color`、`border`改成`fill`和`stroke`。注意，不是所有的属性都能用 CSS 来设置。上色和填充的部分一般是可以用 CSS 来设置的，比如`fill`，`stroke`，`stroke-dasharray`等，但是不包括下面会提到的渐变和图案等功能。另外，`width`、`height`，以及路径的命令等等，都不能用 CSS 设置。判断它们能不能用 CSS 设置还是比较容易的。
 
-<div class="note"><p><strong>备注：</strong> <a href="http://www.w3.org/TR/SVG/propidx.html">SVG 规范</a>将属性区分成 properties 和其他 attributes，前者是可以用 CSS 设置的，后者不能。</p></div>
+> **备注：** [SVG 规范](http://www.w3.org/TR/SVG/propidx.html)将属性区分成 properties 和其他 attributes，前者是可以用 CSS 设置的，后者不能。
 
-<p>CSS 可以利用 style 属性插入到元素的行间：</p>
+CSS 可以利用 style 属性插入到元素的行间：
 
-<pre class="brush:xml;"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
-</pre>
+```xml
+ <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
+```
 
-<p>或者利用 <style> 设置一段样式段落。就像在 HTML 里这样的 <style> 一般放在<code><head></code>里，在 svg 里 <style> 则放在<a href="https://developer.mozilla.org/en/SVG/Element/defs"><code><defs></code></a>标签里。<code><defs></code>表示定义，这里面可以定义一些不会在 SVG 图形中出现、但是可以被其他元素使用的元素。</p>
+或者利用 \<style> 设置一段样式段落。就像在 HTML 里这样的 \<style> 一般放在`<head>`里，在 svg 里 \<style> 则放在[`<defs>`](https://developer.mozilla.org/en/SVG/Element/defs)标签里。`<defs>`表示定义，这里面可以定义一些不会在 SVG 图形中出现、但是可以被其他元素使用的元素。
 
-<pre class="brush:xml;"><?xml version="1.0" standalone="no"?>
-<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <defs>
-    <style type="text/css"><![CDATA[
+```xml
+<?xml version="1.0" standalone="no"?>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <style type="text/css"><![CDATA[
        #MyRect {
          stroke: black;
          fill: red;
        }
-    ]]></style>
-  </defs>
-  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
-</svg></pre>
+    ]]></style>
+  </defs>
+  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
+</svg>
+```
 
-<p>如上把样式放到一块你可以更轻松地调整一大组元素的样式，同样你也可以使用<strong>hover</strong>这样的伪类来创建翻转之类的效果：</p>
+如上把样式放到一块你可以更轻松地调整一大组元素的样式，同样你也可以使用**hover**这样的伪类来创建翻转之类的效果：
 
-<pre class="brush:css;"> #MyRect:hover {
+```css
+ #MyRect:hover {
    stroke: black;
    fill: blue;
  }
-</pre>
+```
 
-<p>你最好读一下 CSS 教程以便掌握它，一些可以在 HTML 里使用的 CSS，在 svg 里可能无法正常工作，比如<code>before</code>和<code>after</code>伪类。所以这里需要一点经验。</p>
+你最好读一下 CSS 教程以便掌握它，一些可以在 HTML 里使用的 CSS，在 svg 里可能无法正常工作，比如`before`和`after`伪类。所以这里需要一点经验。
 
-<p>你也可以定义一个外部的样式表，但是要符合<a href="http://www.w3.org/TR/xml-stylesheet/">normal XML-stylesheet syntax</a>的 CSS 规则：</p>
+你也可以定义一个外部的样式表，但是要符合[normal XML-stylesheet syntax](http://www.w3.org/TR/xml-stylesheet/)的 CSS 规则：
 
-<pre class="brush:xml;"><?xml version="1.0" standalone="no"?>
-<?xml-stylesheet type="text/css" href="style.css"?>
+```xml
+<?xml version="1.0" standalone="no"?>
+<?xml-stylesheet type="text/css" href="style.css"?>
 
-<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <rect height="10" width="10" id="MyRect"/>
-</svg></pre>
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect height="10" width="10" id="MyRect"/>
+</svg>
+```
 
-<p>style.css 看起来就像这样：</p>
+style.css 看起来就像这样：
 
-<pre class="brush:css;">#MyRect {
+```css
+#MyRect {
   fill: red;
   stroke: black;
-}</pre>
+}
+```
 
-<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}
diff --git a/files/zh-cn/web/svg/tutorial/filter_effects/index.md b/files/zh-cn/web/svg/tutorial/filter_effects/index.md
index 193937b526f7a8..d3198c05b1215e 100644
--- a/files/zh-cn/web/svg/tutorial/filter_effects/index.md
+++ b/files/zh-cn/web/svg/tutorial/filter_effects/index.md
@@ -3,145 +3,156 @@ title: 滤镜效果
 slug: Web/SVG/Tutorial/Filter_effects
 tags:
   - SVG
-  - 'SVG:Tutorial'
+  - SVG:Tutorial
 translation_of: Web/SVG/Tutorial/Filter_effects
 ---
-<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}
 
-<p>在某些情况下，一些基本的 SVG 图形并不能提供某种想要达到的效果。比如常见的阴影效果，就不能合理地与渐变类元素（<code><linearGradient></code>, <code><radialGradient></code>）一起被创建。滤镜（Filter）就是 SVG 中用于创建复杂效果的一种机制。</p>
+在某些情况下，一些基本的 SVG 图形并不能提供某种想要达到的效果。比如常见的阴影效果，就不能合理地与渐变类元素（`<linearGradient>`, `<radialGradient>`）一起被创建。滤镜（Filter）就是 SVG 中用于创建复杂效果的一种机制。
 
-<p>下面是一个为 SVG 内容添加模糊效果的基本示例。尽管基本的模糊效果可以使用渐变类元素创建，但是使用模糊滤镜可以做更多的事情。</p>
+下面是一个为 SVG 内容添加模糊效果的基本示例。尽管基本的模糊效果可以使用渐变类元素创建，但是使用模糊滤镜可以做更多的事情。
 
-<h2 id="示例">示例</h2>
+## 示例
 
-<p>滤镜通过 {{SVGElement('filter')}} 元素进行定义，并且置于 <code><defs></code> 区块中。在 <code>filter</code> 标签中提供一系列<em>图元</em>（<em>primitives</em>），以及在前一个基本变换操作上建立的另一个操作（比如添加模糊后又添加明亮效果）。如果要应用所创建的滤镜效果，只需要为 SVG 图形元素设置 {{SVGAttr('filter')}} 属性即可。</p>
+滤镜通过 {{SVGElement('filter')}} 元素进行定义，并且置于 `<defs>` 区块中。在 `filter` 标签中提供一系列*图元*（_primitives_），以及在前一个基本变换操作上建立的另一个操作（比如添加模糊后又添加明亮效果）。如果要应用所创建的滤镜效果，只需要为 SVG 图形元素设置 {{SVGAttr('filter')}} 属性即可。
 
-<pre class="brush: html"><svg width="250" viewBox="0 0 200 85"
-     xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <defs>
-    <!-- Filter declaration -->
-    <filter id="MyFilter" filterUnits="userSpaceOnUse"
+```html
+<svg width="250" viewBox="0 0 200 85"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <!-- Filter declaration -->
+    <filter id="MyFilter" filterUnits="userSpaceOnUse"
             x="0" y="0"
-            width="200" height="120">
+            width="200" height="120">
 
-      <!-- offsetBlur -->
-      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
-      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+      <!-- offsetBlur -->
+      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
 
-      <!-- litPaint -->
-      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+      <!-- litPaint -->
+      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
                           specularExponent="20" lighting-color="#bbbbbb"
-                          result="specOut">
-        <fePointLight x="-5000" y="-10000" z="20000"/>
-      </feSpecularLighting>
-      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
-      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
-                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
-
-      <!-- merge offsetBlur + litPaint -->
-      <feMerge>
-        <feMergeNode in="offsetBlur"/>
-        <feMergeNode in="litPaint"/>
-      </feMerge>
-    </filter>
-  </defs>
-
-  <!-- Graphic elements -->
-  <g filter="url(#MyFilter)">
-      <path fill="none" stroke="#D90000" stroke-width="10"
-            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
-      <path fill="#D90000"
-            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
-      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
-        <text x="52" y="52">SVG</text>
-      </g>
-  </g>
-</svg>
-</pre>
-
-<p>{{ EmbedLiveSample('示例', '100%', 120) }}</p>
-
-<h3 id="步骤_1">步骤 1</h3>
-
-<pre class="brush: html"><feGaussianBlur in="SourceAlpha"
+                          result="specOut">
+        <fePointLight x="-5000" y="-10000" z="20000"/>
+      </feSpecularLighting>
+      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+
+      <!-- merge offsetBlur + litPaint -->
+      <feMerge>
+        <feMergeNode in="offsetBlur"/>
+        <feMergeNode in="litPaint"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Graphic elements -->
+  <g filter="url(#MyFilter)">
+      <path fill="none" stroke="#D90000" stroke-width="10"
+            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
+      <path fill="#D90000"
+            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
+      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+        <text x="52" y="52">SVG</text>
+      </g>
+  </g>
+</svg>
+```
+
+{{ EmbedLiveSample('示例', '100%', 120) }}
+
+### 步骤 1
+
+```html
+<feGaussianBlur in="SourceAlpha"
                 stdDeviation="4"
-                result="blur"/></pre>
+                result="blur"/>
+```
 
-<p>设置 {{SVGElement('feGaussianBlur')}} 中的 <code>in</code> 属性为 <code>"SourceAlpha"</code> 值，即原图像的 alpha 通道，并设置了模糊度为 4 以及把 <code>result</code> 保存在了一个名为 "blur" 的临时缓冲区中。</p>
+设置 {{SVGElement('feGaussianBlur')}} 中的 `in` 属性为 `"SourceAlpha"` 值，即原图像的 alpha 通道，并设置了模糊度为 4 以及把 `result` 保存在了一个名为 "blur" 的临时缓冲区中。
 
-<h3 id="步骤_2">步骤 2</h3>
+### 步骤 2
 
-<pre class="brush: html"><feOffset in="blur"
+```html
+<feOffset in="blur"
           dx="4" dy="4"
-          result="offsetBlur"/></pre>
+          result="offsetBlur"/>
+```
 
-<p>{{SVGElement('feOffset')}} 设置 <code>in</code> 的值为 "blur"，即我们前面保存 <code>result</code> 的那个临时缓冲区。然后设置相对坐标，向右偏移 4，向下偏移 4。最后把结果 <code>result</code> 保存到名为 "offsetBlur" 的缓冲区中。步骤 1、2 其实是创建图形阴影的两个图元。</p>
+{{SVGElement('feOffset')}} 设置 `in` 的值为 "blur"，即我们前面保存 `result` 的那个临时缓冲区。然后设置相对坐标，向右偏移 4，向下偏移 4。最后把结果 `result` 保存到名为 "offsetBlur" 的缓冲区中。步骤 1、2 其实是创建图形阴影的两个图元。
 
-<h3 id="步骤_3">步骤 3</h3>
+### 步骤 3
 
-<pre class="brush: html"><feSpecularLighting in="offsetBlur"
+```html
+<feSpecularLighting in="offsetBlur"
                     surfaceScale="5" specularConstant=".75"
                     specularExponent="20" lighting-color="#bbbbbb"
-                    result="specOut">
-  <fePointLight x="-5000" y="-10000" z="20000"/>
-</feSpecularLighting></pre>
+                    result="specOut">
+  <fePointLight x="-5000" y="-10000" z="20000"/>
+</feSpecularLighting>
+```
 
-<p>{{SVGelement('feSpecularLighting')}} 设置输入源 <code>in</code> 为 "offsetBlur"，将会生成一个光照效果，并将结果 <code>result</code> 保存在 "specOut" 中。</p>
+{{SVGelement('feSpecularLighting')}} 设置输入源 `in` 为 "offsetBlur"，将会生成一个光照效果，并将结果 `result` 保存在 "specOut" 中。
 
-<h3 id="步骤_4">步骤 4</h3>
+### 步骤 4
 
-<pre class="brush: html"><feComposite in="specOut" in2="SourceAlpha"
+```html
+<feComposite in="specOut" in2="SourceAlpha"
              operator="in"
-             result="specOut"/></pre>
+             result="specOut"/>
+```
 
-<p>第一个 {{SVGElement('feComposite')}} 元素设置输入源为 "specOut"，第二个输入源（<code>in2</code>）为 "SourceAlpha"，将 "specOut" 的结果效果遮盖掉，以致于最后的结果不会大于 "SourceAlpha"（源图像），最后覆盖输出结果 <code>result</code> 为 "specOut"。</p>
+第一个 {{SVGElement('feComposite')}} 元素设置输入源为 "specOut"，第二个输入源（`in2`）为 "SourceAlpha"，将 "specOut" 的结果效果遮盖掉，以致于最后的结果不会大于 "SourceAlpha"（源图像），最后覆盖输出结果 `result` 为 "specOut"。
 
-<h3 id="步骤_5">步骤 5</h3>
+### 步骤 5
 
-<pre><feComposite in="SourceGraphic" in2="specOut"
+```plain
+<feComposite in="SourceGraphic" in2="specOut"
              operator="arithmetic"
              k1="0" k2="1" k3="1" k4="0"
-             result="litPaint"/></pre>
+             result="litPaint"/>
+```
 
-<p>第二个 {{SVGElement('feComposite')}} 设置 <code>in</code> 为 "SourceGraphic" 和 "specOut"，即在 "SourceGraphic" 之上添加 "specOut" 的效果，复合模式为 "arithmetic"，然后保存结果为 "litPaint"。</p>
+第二个 {{SVGElement('feComposite')}} 设置 `in` 为 "SourceGraphic" 和 "specOut"，即在 "SourceGraphic" 之上添加 "specOut" 的效果，复合模式为 "arithmetic"，然后保存结果为 "litPaint"。
 
-<h3 id="步骤_6">步骤 6</h3>
+### 步骤 6
 
-<pre><feMerge>
-  <feMergeNode in="offsetBlur"/>
-  <feMergeNode in="litPaint"/>
-</feMerge></pre>
+```plain
+<feMerge>
+  <feMergeNode in="offsetBlur"/>
+  <feMergeNode in="litPaint"/>
+</feMerge>
+```
 
-<p>最后，{{SVGElement('feMerge')}} 元素合并了阴影效果 "offsetBlur" 和源图像的光照效果 "litPaint"。</p>
+最后，{{SVGElement('feMerge')}} 元素合并了阴影效果 "offsetBlur" 和源图像的光照效果 "litPaint"。
 
-<div style="display: flex; text-align: center;">
-<div><img alt="Source graphic" src="filters01-0.png">
-<p>源图像</p>
-</div>
+![Source graphic](filters01-0.png)
 
-<div><img alt="Primitive 1" src="filters01-1.png">
-<p>图元 1</p>
-</div>
+源图像
 
-<div><img alt="Primitive 2" src="filters01-2.png">
-<p>图元 2</p>
-</div>
+![Primitive 1](filters01-1.png)
 
-<div><img alt="Primitive 3" src="filters01-3.png">
-<p>图元 3</p>
-</div>
+图元 1
 
-<div><img alt="Primitive 4" src="filters01-4.png">
-<p>图元 4</p>
-</div>
+![Primitive 2](filters01-2.png)
 
-<div><img alt="Primitive 5" src="filters01-5.png">
-<p>图元 5</p>
-</div>
+图元 2
 
-<div><img alt="Primitive 6" src="filters01-6.png">
-<p>图元 6</p>
-</div>
-</div>
+![Primitive 3](filters01-3.png)
 
-<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p>
+图元 3
+
+![Primitive 4](filters01-4.png)
+
+图元 4
+
+![Primitive 5](filters01-5.png)
+
+图元 5
+
+![Primitive 6](filters01-6.png)
+
+图元 6
+
+{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}
diff --git a/files/zh-cn/web/svg/tutorial/getting_started/index.md b/files/zh-cn/web/svg/tutorial/getting_started/index.md
index f7cada0bd51c01..1c3fe9ae28a896 100644
--- a/files/zh-cn/web/svg/tutorial/getting_started/index.md
+++ b/files/zh-cn/web/svg/tutorial/getting_started/index.md
@@ -7,88 +7,94 @@ tags:
   - 起步
 translation_of: Web/SVG/Tutorial/Getting_Started
 ---
-<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}
 
-<h3 id="A_Simple_Example">一个简单的示例</h3>
+### 一个简单的示例
 
-<p>让我们直接从一个简单的例子开始，看一下下面代码：</p>
+让我们直接从一个简单的例子开始，看一下下面代码：
 
-<pre class="brush: xml"><svg version="1.1"
+```xml
+<svg version="1.1"
      baseProfile="full"
      width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
+     xmlns="http://www.w3.org/2000/svg">
 
-  <rect width="100%" height="100%" fill="red" />
+  <rect width="100%" height="100%" fill="red" />
 
-  <circle cx="150" cy="100" r="80" fill="green" />
+  <circle cx="150" cy="100" r="80" fill="green" />
 
-  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
 
-</svg>
-</pre>
+</svg>
+```
 
-<p>复制并粘贴代码到文件 demo1.svg。然后用 Firefox 打开该文件。 它将会呈现为下面的截图。(Firefox 用户点击<a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3075/89b1e0a26e8421e19f907e0522b188bd/svgdemo1.xml">这里</a>)</p>
+复制并粘贴代码到文件 demo1.svg。然后用 Firefox 打开该文件。 它将会呈现为下面的截图。(Firefox 用户点击[这里](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3075/89b1e0a26e8421e19f907e0522b188bd/svgdemo1.xml))
 
-<p><img alt="svgdemo1.png" src="svgdemo1.png"></p>
+![svgdemo1.png](svgdemo1.png)
 
-<p>绘制流程包括以下几步：</p>
+绘制流程包括以下几步：
 
-<ol>
- <li>从<code>svg</code>根元素开始：
+1.  从`svg`根元素开始：
 
-  <ul>
-   <li>应舍弃来自 (X)HTML 的 doctype 声明，因为基于 SVG 的 DTD 验证导致的问题比它能解决的问题更多。</li>
-   <li>SVG 2 之前，version 属性和 baseProfile 属性用来供其他类型的验证识别 SVG 的版本。SVG 2 不推荐使用 version 和 baseProfile 这两个属性。</li>
-   <li>作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在 xmlns 属性中绑定）。 请阅读<a href="https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course">命名空间速成</a> 页面获取更多信息。</li>
-  </ul>
- </li>
- <li>绘制一个完全覆盖图像区域的矩形 <code><a href="/en/SVG/Element/rect"><rect/></a>，</code>把背景颜色设为红色。</li>
- <li><code>一个半径 80px 的绿色圆圈<a href="/en/SVG/Element/circle"><circle/></a></code>绘制在红色矩形的正中央（向右偏移 150px，向下偏移 100px）。</li>
- <li>绘制文字“SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。</li>
-</ol>
+    - 应舍弃来自 (X)HTML 的 doctype 声明，因为基于 SVG 的 DTD 验证导致的问题比它能解决的问题更多。
+    - SVG 2 之前，version 属性和 baseProfile 属性用来供其他类型的验证识别 SVG 的版本。SVG 2 不推荐使用 version 和 baseProfile 这两个属性。
+    - 作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在 xmlns 属性中绑定）。 请阅读[命名空间速成](/zh-CN/docs/Web/SVG/Namespaces_Crash_Course) 页面获取更多信息。
 
-<h3 id="SVG文件的基本属性">SVG 文件的基本属性</h3>
+2.  绘制一个完全覆盖图像区域的矩形 `<rect/>，`把背景颜色设为红色。
+3.  `一个半径 80px 的绿色圆圈<circle/>`绘制在红色矩形的正中央（向右偏移 150px，向下偏移 100px）。
+4.  绘制文字“SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。
 
-<ul>
- <li>最值得注意的一点是元素的渲染顺序。SVG 文件全局有效的规则是 “后来居上”，越后面的元素越可见。</li>
- <li>web 上的 svg 文件可以直接在浏览器上展示，或者通过以下几种方法嵌入到 HTML 文件中：
-  <ul>
-   <li>如果 HTML 是 XHTML 并且声明类型为<code>application/xhtml+xml，</code>可以直接把 SVG 嵌入到 XML 源码中。</li>
-   <li>如果 HTML 是 HTML5 并且浏览器支持 HTML5，同样可以直接嵌入 SVG。然而为了符合 HTML5 标准，可能需要做一些语法调整。</li>
-   <li>可以通过 <code>object</code> 元素引用 SVG 文件：
-    <pre>        <object data="image.svg" type="image/svg+xml" /></pre>
-   </li>
-   <li>类似的也可以使用 <code>iframe</code> 元素引用 SVG 文件：
-    <pre>        <iframe src="image.svg"></iframe></pre>
-   </li>
-   <li>理论上同样可以使用 <code>img</code> 元素，但是在低于 4.0 版本的 Firefox 中不起作用。</li>
-   <li>最后 SVG 可以通过 JavaScript 动态创建并注入到 HTML DOM 中。 这样具有一个优点，可以对浏览器使用替代技术，在不能解析 SVG 的情况下，可以替换创建的内容。</li>
-  </ul>
-  阅读<a href="/en/SVG_In_HTML_Introduction">this dedicated article</a> 以深入了解该话题。</li>
- <li>SVG 如何处理大小和单位将在<a href="/zh-cn/docs/Web/SVG/Tutorial/Positions">下一页</a>详解。</li>
-</ul>
+### SVG 文件的基本属性
 
-<h3 id="SVG_File_Types">SVG 文件类型</h3>
+- 最值得注意的一点是元素的渲染顺序。SVG 文件全局有效的规则是 “后来居上”，越后面的元素越可见。
+- web 上的 svg 文件可以直接在浏览器上展示，或者通过以下几种方法嵌入到 HTML 文件中：
 
-<p>SVG 文件有两种形式。普通 SVG 文件是包含 SVG 标记的简单文本文件。推荐使用 “.svg”（全部小写）作为此类文件的扩展名。</p>
+  - 如果 HTML 是 XHTML 并且声明类型为`application/xhtml+xml，`可以直接把 SVG 嵌入到 XML 源码中。
+  - 如果 HTML 是 HTML5 并且浏览器支持 HTML5，同样可以直接嵌入 SVG。然而为了符合 HTML5 标准，可能需要做一些语法调整。
+  - 可以通过 `object` 元素引用 SVG 文件：
 
-<p>由于在某些应用（比如地图应用等）中使用时，SVG 文件可能会很大，SVG 标准同样允许 gzip 压缩的 SVG 文件。推荐使用 “.svgz”（全部小写）作为此类文件扩展名 。不幸的是，如果服务器是微软的 IIS 服务器，使 gzip 压缩的 SVG 文件在所有的可用 SVG 的用户代理上可靠地起作用是相当困难的，而且 Firefox 不能在本地机器上加载 gzip 压缩的 SVG 文件。 除非知道处理发布内容的 Web 服务器可以正确的处理 gzip，否则要避免使用 gzip 压缩的 SVG。</p>
+    ```plain
+            <object data="image.svg" type="image/svg+xml" />
+    ```
 
-<h3 id="A_Word_on_Webservers">关于 Web 服务器的小提示</h3>
+  - 类似的也可以使用 `iframe` 元素引用 SVG 文件：
 
-<p>如果你已经知道了如何创建基本 SVG 文件，下一步就是把它们上传到 web 服务器，但是在这阶段有一些陷阱。对于普通 SVG 文件，服务器应该会发送下面的 HTTP 头：</p>
+    ```plain
+            <iframe src="image.svg"></iframe>
+    ```
 
-<pre>Content-Type: image/svg+xml
-Vary: Accept-Encoding</pre>
+  - 理论上同样可以使用 `img` 元素，但是在低于 4.0 版本的 Firefox 中不起作用。
+  - 最后 SVG 可以通过 JavaScript 动态创建并注入到 HTML DOM 中。 这样具有一个优点，可以对浏览器使用替代技术，在不能解析 SVG 的情况下，可以替换创建的内容。
 
-<p>对于 gzip 压缩的 SVG 文件，服务器应该会发送下面的 HTTP 头：</p>
+  阅读[this dedicated article](/en/SVG_In_HTML_Introduction) 以深入了解该话题。
 
-<pre>Content-Type: image/svg+xml
+- SVG 如何处理大小和单位将在[下一页](/zh-CN/docs/Web/SVG/Tutorial/Positions)详解。
+
+### SVG 文件类型
+
+SVG 文件有两种形式。普通 SVG 文件是包含 SVG 标记的简单文本文件。推荐使用 “.svg”（全部小写）作为此类文件的扩展名。
+
+由于在某些应用（比如地图应用等）中使用时，SVG 文件可能会很大，SVG 标准同样允许 gzip 压缩的 SVG 文件。推荐使用 “.svgz”（全部小写）作为此类文件扩展名 。不幸的是，如果服务器是微软的 IIS 服务器，使 gzip 压缩的 SVG 文件在所有的可用 SVG 的用户代理上可靠地起作用是相当困难的，而且 Firefox 不能在本地机器上加载 gzip 压缩的 SVG 文件。 除非知道处理发布内容的 Web 服务器可以正确的处理 gzip，否则要避免使用 gzip 压缩的 SVG。
+
+### 关于 Web 服务器的小提示
+
+如果你已经知道了如何创建基本 SVG 文件，下一步就是把它们上传到 web 服务器，但是在这阶段有一些陷阱。对于普通 SVG 文件，服务器应该会发送下面的 HTTP 头：
+
+```plain
+Content-Type: image/svg+xml
+Vary: Accept-Encoding
+```
+
+对于 gzip 压缩的 SVG 文件，服务器应该会发送下面的 HTTP 头：
+
+```plain
+Content-Type: image/svg+xml
 Content-Encoding: gzip
-Vary: Accept-Encoding</pre>
+Vary: Accept-Encoding
+```
 
-<p>可以利用<a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Headers">Network Monitor panel</a>或者<a href="http://web-sniffer.net/">web-sniffer.net</a>之类的网站来检查服务器是否给 SVG 文件发送正确的 HTTP 头，向<a href="http://web-sniffer.net/">web-sniffer.net</a>提交你的一个 SVG 文件的链接，然后查看 HTTP 响应头。如果发现服务器没有发送上述的响应头部值，那么你应该联系你的服务器供应商。如果不能说服他们为 SVG 修正服务器配置，可能还有一些我们可以自行解决的办法。 请阅读 SVG 维基的<a href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">server configuration page</a>以找到一些简单的解决方案。</p>
+可以利用[Network Monitor panel](/zh-CN/docs/Tools/Network_Monitor#Headers)或者[web-sniffer.net](http://web-sniffer.net/)之类的网站来检查服务器是否给 SVG 文件发送正确的 HTTP 头，向[web-sniffer.net](http://web-sniffer.net/)提交你的一个 SVG 文件的链接，然后查看 HTTP 响应头。如果发现服务器没有发送上述的响应头部值，那么你应该联系你的服务器供应商。如果不能说服他们为 SVG 修正服务器配置，可能还有一些我们可以自行解决的办法。 请阅读 SVG 维基的[server configuration page](http://svg-whiz.com/wiki/index.php?title=Server_Configuration)以找到一些简单的解决方案。
 
-<p>服务器配置错误是 SVG 加载失败的常见原因，所以一定要确保你的服务器配置正确。如果不能把服务器配置成给 SVG 文件发送正确的响应头，这时 Firefox 很有可能把该文件的标记显示成文本或乱码，甚至会要求查看者选择打开文件的应用程序。</p>
+服务器配置错误是 SVG 加载失败的常见原因，所以一定要确保你的服务器配置正确。如果不能把服务器配置成给 SVG 文件发送正确的响应头，这时 Firefox 很有可能把该文件的标记显示成文本或乱码，甚至会要求查看者选择打开文件的应用程序。
 
-<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}
diff --git a/files/zh-cn/web/svg/tutorial/gradients/index.md b/files/zh-cn/web/svg/tutorial/gradients/index.md
index 47391fe2be2f35..7a4487a41e2172 100644
--- a/files/zh-cn/web/svg/tutorial/gradients/index.md
+++ b/files/zh-cn/web/svg/tutorial/gradients/index.md
@@ -3,175 +3,188 @@ title: 渐变
 slug: Web/SVG/Tutorial/Gradients
 translation_of: Web/SVG/Tutorial/Gradients
 ---
-<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}
 
-<p>并非只能简单填充颜色和描边，更令人兴奋的是，你还可以创建和并在填充和描边上应用渐变色。</p>
+并非只能简单填充颜色和描边，更令人兴奋的是，你还可以创建和并在填充和描边上应用渐变色。
 
-<p>有两种类型的渐变：线性渐变和径向渐变。你<strong>必须</strong>给渐变内容指定一个 id 属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。</p>
+有两种类型的渐变：线性渐变和径向渐变。你**必须**给渐变内容指定一个 id 属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在\<defs>标签内部，而不是定义在形状上面。
 
-<h2 id="SVGLinearGradient">线性渐变</h2>
+## 线性渐变
 
-<p>线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在 SVG 文件的<code>defs 元素</code>内部，创建一个{{SVGElement('linearGradient')}} 节点。</p>
+线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在 SVG 文件的`defs 元素`内部，创建一个{{SVGElement('linearGradient')}} 节点。
 
-<h3 id="基础示例">基础示例</h3>
+### 基础示例
 
-<pre class="brush: html"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <linearGradient id="Gradient1">
-        <stop class="stop1" offset="0%"/>
-        <stop class="stop2" offset="50%"/>
-        <stop class="stop3" offset="100%"/>
-      </linearGradient>
-      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="50%" stop-color="black" stop-opacity="0"/>
-        <stop offset="100%" stop-color="blue"/>
-      </linearGradient>
-      <style type="text/css"><![CDATA[
+```html
+<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <linearGradient id="Gradient1">
+        <stop class="stop1" offset="0%"/>
+        <stop class="stop2" offset="50%"/>
+        <stop class="stop3" offset="100%"/>
+      </linearGradient>
+      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="50%" stop-color="black" stop-opacity="0"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+      <style type="text/css"><![CDATA[
         #rect1 { fill: url(#Gradient1); }
         .stop1 { stop-color: red; }
         .stop2 { stop-color: black; stop-opacity: 0; }
         .stop3 { stop-color: blue; }
-      ]]></style>
-  </defs>
+      ]]></style>
+  </defs>
 
-  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
+  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
 
-</svg></pre>
+</svg>
+```
 
-<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p>
+{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}
 
-<p>以上是一个应用了线性渐变的<code><rect></code>元素的示例。线性渐变内部有几个{{SVGElement('stop')}} 结点，这些结点通过指定位置的 offset（偏移）属性和 stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；可以直接指定这两个属性值，也可以通过 CSS 来指定他们的值，该例子中混合使用了这两种方法。例如：该示例中指明了渐变开始颜色为红色，到中间位置时变成半透明的黑色，最后变成蓝色。虽然你可以根据需求按照自己的喜好插入很多中间颜色，但是偏移量应该始终从 0% 开始（或者 0 也可以，百分号可以扔掉），到 100%（或 1）结束。如果<code>stop</code>设置的位置有重合，将使用 XML 树中较晚设置的值。而且，类似于填充和描边，你也可以指定属性<code>stop-opacity</code>来设置某个位置的半透明度（同样，对于 FF3 你也可以设置 rgba 值）。</p>
+以上是一个应用了线性渐变的`<rect>`元素的示例。线性渐变内部有几个{{SVGElement('stop')}} 结点，这些结点通过指定位置的 offset（偏移）属性和 stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；可以直接指定这两个属性值，也可以通过 CSS 来指定他们的值，该例子中混合使用了这两种方法。例如：该示例中指明了渐变开始颜色为红色，到中间位置时变成半透明的黑色，最后变成蓝色。虽然你可以根据需求按照自己的喜好插入很多中间颜色，但是偏移量应该始终从 0% 开始（或者 0 也可以，百分号可以扔掉），到 100%（或 1）结束。如果`stop`设置的位置有重合，将使用 XML 树中较晚设置的值。而且，类似于填充和描边，你也可以指定属性`stop-opacity`来设置某个位置的半透明度（同样，对于 FF3 你也可以设置 rgba 值）。
 
-<pre class="eval"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
-</pre>
+```html
+ <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
+```
 
-<p>使用渐变时，我们需要在一个对象的属性<code>fill</code>或属性<code>stroke</code>中引用它，这跟你在 CSS 中使用<code>url</code>引用元素的方法一样。在本例中，url 只是一个渐变的引用，我们已经给这个渐变一个 ID——“Gradient”。要想附加它，将属性<code>fill</code>设置为<code>url(#Gradient)</code>即可。现在对象就变成多色的了，也可以用同样的方式处理<code>stroke</code>。</p>
+使用渐变时，我们需要在一个对象的属性`fill`或属性`stroke`中引用它，这跟你在 CSS 中使用`url`引用元素的方法一样。在本例中，url 只是一个渐变的引用，我们已经给这个渐变一个 ID——“Gradient”。要想附加它，将属性`fill`设置为`url(#Gradient)`即可。现在对象就变成多色的了，也可以用同样的方式处理`stroke`。
 
-<p><code><linearGradient>元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制，它们分别是属性 x1、x2、y1 和 y2，这些属性定义了渐变路线走向。渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。下例中的 Gradient2 创建了一个垂直渐变。</code></p>
+`<linearGradient>` 元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制，它们分别是属性 x1、x2、y1 和 y2，这些属性定义了渐变路线走向。渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。下例中的 Gradient2 创建了一个垂直渐变。
 
-<pre class="eval"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-</pre>
+```html
+ <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+```
 
-<div class="note"><strong>注意：</strong> 你也可以在渐变上使用<code>xlink:href 属性。如果</code>使用了该属性时，一个渐变的属性和颜色中值（stop）可以被另一个渐变包含引用。在下例中，你就不需要在 Grandient2 中重新创建全部的颜色中值（stop）。
+> **备注：** 你也可以在渐变上使用`xlink:href 属性。如果`使用了该属性时，一个渐变的属性和颜色中值（stop）可以被另一个渐变包含引用。在下例中，你就不需要在 Grandient2 中重新创建全部的颜色中值（stop）。
+>
+> ```html
+> <linearGradient id="Gradient1">
+> <stop id="stop1" offset="0%"/>
+> <stop id="stop2" offset="50%"/>
+> <stop id="stop3" offset="100%"/>
+> </linearGradient>
+> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
+>     xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+> ```
+>
+> 尽管通常你可能在文档的顶部就定义了 Gradient1，但我在结点上直接包含了 xlink 的命名空间，关于这点的更多信息我们会在[讨论图片](/en-US/Web/SVG/Tutorial/Other_content_in_SVG)的时候详解。
 
-<pre class="eval"> <linearGradient id="Gradient1">
-   <stop id="stop1" offset="0%"/>
-   <stop id="stop2" offset="50%"/>
-   <stop id="stop3" offset="100%"/>
- </linearGradient>
- <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
-    xmlns:xlink="<a href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/>
-</pre>
-尽管通常你可能在文档的顶部就定义了 Gradient1，但我在结点上直接包含了 xlink 的命名空间，关于这点的更多信息我们会在<a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG">讨论图片</a>的时候详解。</div>
+## 径向渐变
 
-<h2 id="Radial_Gradient">径向渐变</h2>
+径向渐变与线性渐变相似，只是它是从一个点开始发散绘制渐变。创建径向渐变需要在文档的`defs`中添加一个{{SVGElement('radialGradient')}}元素
 
-<p>径向渐变与线性渐变相似，只是它是从一个点开始发散绘制渐变。创建径向渐变需要在文档的<code>defs</code>中添加一个{{SVGElement('radialGradient')}}元素</p>
+### 示例
 
-<h3 id="示例">示例</h3>
+```html
+<?xml version="1.0" standalone="no"?>
+<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="RadialGradient1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
 
-<pre class="brush: html"><?xml version="1.0" standalone="no"?>
-<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="RadialGradient1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
+</svg>
+```
 
-</svg></pre>
+{{ EmbedLiveSample('Radial_Gradient','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}
 
-<p>{{ EmbedLiveSample('Radial_Gradient','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p>
+中值（stops）的使用方法与之前一致，但是现在这个对象的颜色是中间是红色的，且向着边缘的方向渐渐的变成蓝色。跟线性渐变一样，`<radialGradient>` 节点可以有多个属性来描述其位置和方向，但是它更加复杂。径向渐变也是通过两个点来定义其边缘位置，两点中的第一个点定义了渐变结束所围绕的圆环，它需要一个中心点，由 cx 和 cy 属性及半径 r 来定义，通过设置这些点我们可以移动渐变范围并改变它的大小，如上例的第二个\<rect>所展示的。
 
-<p>中值（stops）的使用方法与之前一致，但是现在这个对象的颜色是中间是红色的，且向着边缘的方向渐渐的变成蓝色。跟线性渐变一样，<code><radialGradient></code> 节点可以有多个属性来描述其位置和方向，但是它更加复杂。径向渐变也是通过两个点来定义其边缘位置，两点中的第一个点定义了渐变结束所围绕的圆环，它需要一个中心点，由 cx 和 cy 属性及半径 r 来定义，通过设置这些点我们可以移动渐变范围并改变它的大小，如上例的第二个<rect>所展示的。</p>
+第二个点被称为焦点，由 fx 和 fy 属性定义。第一个点描述了渐变边缘位置，焦点则描述了渐变的中心，如下例。
 
-<p>第二个点被称为焦点，由 fx 和 fy 属性定义。第一个点描述了渐变边缘位置，焦点则描述了渐变的中心，如下例。</p>
+### 中心和焦点
 
-<h3 id="中心和焦点">中心和焦点</h3>
+```html
+<?xml version="1.0" standalone="no"?>
 
-<pre class="brush: html"><?xml version="1.0" standalone="no"?>
+<svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
 
-<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
+  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
+  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
+  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
+  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
+  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
 
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+</svg>
+```
 
-</svg></pre>
+{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}
 
-<p>{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}</p>
+因为如果焦点如之前描述的那样被移到圆圈的外面，渐变将不能正确呈现，所以该点会被假定在圆圈范围内。如果没有给出焦点，将认为该点与中心点的位置一致。
 
-<p>因为如果焦点如之前描述的那样被移到圆圈的外面，渐变将不能正确呈现，所以该点会被假定在圆圈范围内。如果没有给出焦点，将认为该点与中心点的位置一致。</p>
+线性渐变和径向渐变都需要一些额外的属性用于描述渐变过程，这里我希望额外提及一个`spreadMethod`属性，该属性控制了当渐变到达终点的行为，但是此时该对象尚未被填充颜色。这个属性可以有三个值：pad、reflect 或 repeat。Pad 就是目前我们见到的效果，即当渐变到达终点时，最终的偏移颜色被用于填充对象剩下的空间。reflect 会让渐变一直持续下去，不过它的效果是与渐变本身是相反的，以 100% 偏移位置的颜色开始，逐渐偏移到 0% 位置的颜色，然后再回到 100% 偏移位置的颜色。repeat 也会让渐变继续，但是它不会像 reflect 那样反向渐变，而是跳回到最初的颜色然后继续渐变。
 
-<p>线性渐变和径向渐变都需要一些额外的属性用于描述渐变过程，这里我希望额外提及一个<code>spreadMethod</code>属性，该属性控制了当渐变到达终点的行为，但是此时该对象尚未被填充颜色。这个属性可以有三个值：pad、reflect 或 repeat。Pad 就是目前我们见到的效果，即当渐变到达终点时，最终的偏移颜色被用于填充对象剩下的空间。reflect 会让渐变一直持续下去，不过它的效果是与渐变本身是相反的，以 100% 偏移位置的颜色开始，逐渐偏移到 0% 位置的颜色，然后再回到 100% 偏移位置的颜色。repeat 也会让渐变继续，但是它不会像 reflect 那样反向渐变，而是跳回到最初的颜色然后继续渐变。</p>
+### spreadMethod
 
-<h3 id="spreadMethod">spreadMethod</h3>
+```html
+<?xml version="1.0" standalone="no"?>
 
-<pre class="brush: html"><?xml version="1.0" standalone="no"?>
-
-<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="GradientPad"
+<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="GradientPad"
             cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="pad">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-      <radialGradient id="GradientRepeat"
+            spreadMethod="pad">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="GradientRepeat"
             cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="repeat">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-      <radialGradient id="GradientReflect"
+            spreadMethod="repeat">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="GradientReflect"
             cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="reflect">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
+            spreadMethod="reflect">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
-  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
+  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
 
-  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
-  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
-  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
+  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
+  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
+  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
 
-</svg></pre>
+</svg>
+```
 
-<p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p>
+{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}
 
-<p>两种渐变都有一个叫做 <code>gradientUnits（渐变单元）</code>的属性，它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值：<code>userSpaceOnUse</code> 、<code>objectBoundingBox。默认值为 objectBoundingBox，我们目前看到的效果都是在这种系统下的，它大体上定义了对象的渐变大小范围，所以你只要指定从 0 到 1 的坐标值，渐变就会自动的缩放到对象相同大小。</code>userSpaceOnUse 使用绝对单元，所以你必须知道对象的位置，并将渐变放在同样地位置上。上例中的 radialGradient 需要被重写成：</p>
+两种渐变都有一个叫做 `gradientUnits（渐变单元）`的属性，它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值：`userSpaceOnUse` 、`objectBoundingBox。默认值为 objectBoundingBox，我们目前看到的效果都是在这种系统下的，它大体上定义了对象的渐变大小范围，所以你只要指定从 0 到 1 的坐标值，渐变就会自动的缩放到对象相同大小。`userSpaceOnUse 使用绝对单元，所以你必须知道对象的位置，并将渐变放在同样地位置上。上例中的 radialGradient 需要被重写成：
 
-<pre class="eval"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
-</pre>
+```plain
+ <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
+```
 
-<p>你也可以利用属性<code>gradientTransform</code>给渐变添加额外的变化，但是因为我们还没有介绍<code><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">transforms</a></code>，所以我们将在后续的章节中介绍它。</p>
+你也可以利用属性 `gradientTransform` 给渐变添加额外的变化，但是因为我们还没有介绍 [`transforms`](/en-US/Web/SVG/Tutorial/Basic_Transformations)，所以我们将在后续的章节中介绍它。
 
-<p>如果对象边界框不是一个正方形，处理<code>gradientUnits="objectBoundingBox"</code>还有一些其他警告<code>，但是这些方法特别复杂因此有待一些了解得更深的人来解释他们。</code></p>
+如果对象边界框不是一个正方形，处理`gradientUnits="objectBoundingBox"`还有一些其他警告`，但是这些方法特别复杂因此有待一些了解得更深的人来解释他们。`
 
-<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}
diff --git a/files/zh-cn/web/svg/tutorial/index.md b/files/zh-cn/web/svg/tutorial/index.md
index 305b1c8b78760a..2120b9f72d0ccd 100644
--- a/files/zh-cn/web/svg/tutorial/index.md
+++ b/files/zh-cn/web/svg/tutorial/index.md
@@ -10,47 +10,45 @@ tags:
   - 需要更新
 translation_of: Web/SVG/Tutorial
 ---
-<p>可缩放矢量图形，即<a href="/zh-CN/SVG">SVG</a>，是 W3C XML 的分支语言之一，用于标记可缩放的矢量图形。目前 SVG 在 Firefox、Opera、Webkit 浏览器、IE 等浏览器中已经部分实现。</p>
+可缩放矢量图形，即[SVG](/zh-CN/SVG)，是 W3C XML 的分支语言之一，用于标记可缩放的矢量图形。目前 SVG 在 Firefox、Opera、Webkit 浏览器、IE 等浏览器中已经部分实现。
 
-<p>本教程旨在解释 SVG 内部的技术细节。如果你希望绘制非常漂亮的图形，你可以在<a href="http://inkscape.org/doc/">Inkscape 的文档页面</a>上获取更多有用的资源。另外还有一个比较好的 SVG 介绍：<a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3C 的 SVG 入门</a>。</p>
+本教程旨在解释 SVG 内部的技术细节。如果你希望绘制非常漂亮的图形，你可以在[Inkscape 的文档页面](http://inkscape.org/doc/)上获取更多有用的资源。另外还有一个比较好的 SVG 介绍：[W3C 的 SVG 入门](http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html)。
 
-<div class="note">本教程还在初期阶段，如果你有能力，可以来增加扩展一两段，写一整页的话会给加分！</div>
+> **备注：** 本教程还在初期阶段，如果你有能力，可以来增加扩展一两段，写一整页的话会给加分！
 
-<h5 id="从头开始介绍SVG">从头开始介绍 SVG</h5>
+##### 从头开始介绍 SVG
 
-<ul>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Introduction">引言</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Getting_Started">入门</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Positions">坐标定位</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Shapes">基本形状</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Paths">路径</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Fills_and_Strokes">填充与边框</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Gradients">渐变</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Patterns">图案</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Texts">文字</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Transformations">基本变换</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Clipping_and_masking">裁剪和遮罩</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Other_content_in_SVG">其他 SVG 内容</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/Filter_effects">滤镜效果</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/SVG_fonts">SVG 字体</a></li>
- <li><a href="/zh-CN/Web/SVG/Tutorial/SVG_Image_Tag">SVG 的 Image 标签</a></li>
- <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Tools_for_SVG">SVG 工具</a></li>
-</ul>
+- [引言](/zh-CN/Web/SVG/Tutorial/Introduction)
+- [入门](/zh-CN/Web/SVG/Tutorial/Getting_Started)
+- [坐标定位](/zh-CN/Web/SVG/Tutorial/Positions)
+- [基本形状](/zh-CN/Web/SVG/Tutorial/Basic_Shapes)
+- [路径](/zh-CN/Web/SVG/Tutorial/Paths)
+- [填充与边框](/zh-CN/Web/SVG/Tutorial/Fills_and_Strokes)
+- [渐变](/zh-CN/Web/SVG/Tutorial/Gradients)
+- [图案](/zh-CN/Web/SVG/Tutorial/Patterns)
+- [文字](/zh-CN/Web/SVG/Tutorial/Texts)
+- [基本变换](/zh-CN/Web/SVG/Tutorial/Basic_Transformations)
+- [裁剪和遮罩](/zh-CN/Web/SVG/Tutorial/Clipping_and_masking)
+- [其他 SVG 内容](/zh-CN/Web/SVG/Tutorial/Other_content_in_SVG)
+- [滤镜效果](/zh-CN/Web/SVG/Tutorial/Filter_effects)
+- [SVG 字体](/zh-CN/Web/SVG/Tutorial/SVG_fonts)
+- [SVG 的 Image 标签](/zh-CN/Web/SVG/Tutorial/SVG_Image_Tag)
+- [SVG 工具](/zh-CN/docs/Web/SVG/Tutorial/Tools_for_SVG)
 
-<p>下面罗列的主题更高级，所以需要单独列出教程。</p>
+下面罗列的主题更高级，所以需要单独列出教程。
 
-<h5 id="JavaScript脚本化SVG">JavaScript 脚本化 SVG</h5>
+##### JavaScript 脚本化 SVG
 
-<p>待定（TBD：To be determined）</p>
+待定（TBD：To be determined）
 
-<h5 id="SVG滤镜教程">SVG 滤镜教程</h5>
+##### SVG 滤镜教程
 
-<p>待定</p>
+待定
 
-<h5 id="SVG的SMIL动画">SVG 的 SMIL 动画</h5>
+##### SVG 的 SMIL 动画
 
-<p>待定</p>
+待定
 
-<h5 id="在SVG中创建字体">在 SVG 中创建字体</h5>
+##### 在 SVG 中创建字体
 
-<p>待定</p>
+待定
diff --git a/files/zh-cn/web/svg/tutorial/introduction/index.md b/files/zh-cn/web/svg/tutorial/introduction/index.md
index 5f2d4622562362..789bf9461bae21 100644
--- a/files/zh-cn/web/svg/tutorial/introduction/index.md
+++ b/files/zh-cn/web/svg/tutorial/introduction/index.md
@@ -3,39 +3,37 @@ title: 引言
 slug: Web/SVG/Tutorial/Introduction
 translation_of: Web/SVG/Tutorial/Introduction
 ---
-<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}
 
-<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/en/SVG">SVG</a>是一种<a href="/en/XML">XML</a>语言，类似 XHTML，可以用来绘制矢量图形，例如右面展示的图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。</p>
+![](/@api/deki/files/348/=SVG_Overview.png)[SVG](/en/SVG)是一种[XML](/en/XML)语言，类似 XHTML，可以用来绘制矢量图形，例如右面展示的图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。
 
-<p>SVG 诞生于 1999 年，之前有几个相互竞争的格式规范被提交到<a href="http://www.w3.org">W3C</a>，但是都没有获得批准。主流浏览器均支持 SVG。加载慢是 SVG 的一个缺点。但是 SVG 也有自身的优点，比如它实现了 DOM 接口（比 Canvas 方便），不需要安装第三方扩展 (extensions，原文有误，应该是插件 plugins，类似 flash)。当然，是否使用 SVG 还要取决于你要实现什么。</p>
+SVG 诞生于 1999 年，之前有几个相互竞争的格式规范被提交到[W3C](http://www.w3.org)，但是都没有获得批准。主流浏览器均支持 SVG。加载慢是 SVG 的一个缺点。但是 SVG 也有自身的优点，比如它实现了 DOM 接口（比 Canvas 方便），不需要安装第三方扩展 (extensions，原文有误，应该是插件 plugins，类似 flash)。当然，是否使用 SVG 还要取决于你要实现什么。
 
-<h3 id="基本要素">基本要素</h3>
+### 基本要素
 
-<p>HTML 提供了定义标题、段落、表格等等内容的元素。与此类似，SVG 也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的 SVG 文档由<code>{{ SVGElement('svg') }}</code>根元素和基本的形状元素构成。另外还有一个<code>g</code>元素，它用来把若干个基本形状编成一个组。</p>
+HTML 提供了定义标题、段落、表格等等内容的元素。与此类似，SVG 也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的 SVG 文档由`{{ SVGElement('svg') }}`根元素和基本的形状元素构成。另外还有一个`g`元素，它用来把若干个基本形状编成一个组。
 
-<p>从这些开始，SVG 可以变得更加复杂。SVG 支持渐变、旋转、动画、滤镜效果、与 JavaScript 交互等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。</p>
+从这些开始，SVG 可以变得更加复杂。SVG 支持渐变、旋转、动画、滤镜效果、与 JavaScript 交互等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。
 
-<h3 id="Before_you_start">开始之前</h3>
+### 开始之前
 
-<p>包括<a href="http://www.inkscape.org/">Inkscape</a>在内的很多免费应用原生支持 SVG 格式的文件。但是本教程建议在学习过程中使用 XML 或文本编辑器，因为想要理解 SVG 内部的原理，最好的方法就是动手写一些 SVG 的标记。你需要注意到你的最终目标。各种 SVG 浏览器是有差异的，因此很可能你制作了一个 SVG 图形，并且用一个工具调试正常后，却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持 SVG 标准的程度不同，另外，如果你将其他技术和 SVG 一起使用（比如<a href="/en/JavaScript">JavaScript</a>和<a href="/en/CSS">CSS</a>），也会出现类似的情况。</p>
+包括[Inkscape](http://www.inkscape.org/)在内的很多免费应用原生支持 SVG 格式的文件。但是本教程建议在学习过程中使用 XML 或文本编辑器，因为想要理解 SVG 内部的原理，最好的方法就是动手写一些 SVG 的标记。你需要注意到你的最终目标。各种 SVG 浏览器是有差异的，因此很可能你制作了一个 SVG 图形，并且用一个工具调试正常后，却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持 SVG 标准的程度不同，另外，如果你将其他技术和 SVG 一起使用（比如[JavaScript](/en/JavaScript)和[CSS](/en/CSS)），也会出现类似的情况。
 
-<p>所有的现代浏览器都支持 SVG，在某些情况下甚至几个版本都支持 SVG。<a href="https://caniuse.com/#feat=svg">Can I use</a>上有一份比较详细的支持 SVG 的浏览器列表，Firefox 1.5 以后的版本支持 SVG 的部分内容，并且支持的程度越来越高。希望通过这份教程，MDN 能帮助开发者理解 Gecko 内核和其他一些主要编译器之间的差异。</p>
+所有的现代浏览器都支持 SVG，在某些情况下甚至几个版本都支持 SVG。[Can I use](https://caniuse.com/#feat=svg)上有一份比较详细的支持 SVG 的浏览器列表，Firefox 1.5 以后的版本支持 SVG 的部分内容，并且支持的程度越来越高。希望通过这份教程，MDN 能帮助开发者理解 Gecko 内核和其他一些主要编译器之间的差异。
 
-<p>正式开始之前，你需要基本掌握 XML 和其它标记语言比如说<abbr title="HyperText Markup Language">HTML</abbr>，如果你不是很熟悉 XML，这里有几个重点一定要记住：</p>
+正式开始之前，你需要基本掌握 XML 和其它标记语言比如说 HTML，如果你不是很熟悉 XML，这里有几个重点一定要记住：
 
-<ul>
- <li>SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 HTML 不同）</li>
- <li>SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。</li>
-</ul>
+- SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 HTML 不同）
+- SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。
 
-<p>SVG 是一个庞大的规范，本教程主要涵盖基础内容。掌握了这些内容之后，你就有能力使用<a href="/en/SVG/Element">元素参考</a>和<a href="/zh-CN/docs/Web/API/Document_Object_Model#SVG_%E6%8E%A5%E5%8F%A3">接口参考</a>，学习其他你需要知道的内容。</p>
+SVG 是一个庞大的规范，本教程主要涵盖基础内容。掌握了这些内容之后，你就有能力使用[元素参考](/en/SVG/Element)和[接口参考](/zh-CN/docs/Web/API/Document_Object_Model#SVG_%E6%8E%A5%E5%8F%A3)，学习其他你需要知道的内容。
 
-<h3 id="SVG的种类">SVG 的种类</h3>
+### SVG 的种类
 
-<p>自从 2003 年成为 W3C 推荐标准以来，最接近的“完整版”SVG 版本是 1.1 版，它基于 1.0 版，并且增加了更多便于实现的模块化内容，SVG1.1 的第二个版本在 2011 年成为推荐标准，完整的 SVG1.2 本来是下一个标准版本，但它又被 SVG2.0 取代。SVG2.0 正在制定当中，它采用了类似 CSS3 的制定方法，通过若干松散耦合的组件形成一套标准。</p>
+自从 2003 年成为 W3C 推荐标准以来，最接近的“完整版”SVG 版本是 1.1 版，它基于 1.0 版，并且增加了更多便于实现的模块化内容，SVG1.1 的第二个版本在 2011 年成为推荐标准，完整的 SVG1.2 本来是下一个标准版本，但它又被 SVG2.0 取代。SVG2.0 正在制定当中，它采用了类似 CSS3 的制定方法，通过若干松散耦合的组件形成一套标准。
 
-<p>除了完整的 SVG 推荐标准，W3C 工作组还在 2003 年推出了 SVG Tiny 和 SVG Basic。这两个配置文件主要瞄准移动设备。首先 SVG Tiny 主要是为性能低的小设备生成图元，而 SVG Basic 实现了完整版 SVG 里的很多功能，只是舍弃了难以实现的大型渲染（比如动画）。2008 年，SVG Tiny1.2 成为 W3C 推荐标准。</p>
+除了完整的 SVG 推荐标准，W3C 工作组还在 2003 年推出了 SVG Tiny 和 SVG Basic。这两个配置文件主要瞄准移动设备。首先 SVG Tiny 主要是为性能低的小设备生成图元，而 SVG Basic 实现了完整版 SVG 里的很多功能，只是舍弃了难以实现的大型渲染（比如动画）。2008 年，SVG Tiny1.2 成为 W3C 推荐标准。
 
-<p>另外还有一些关于 SVG 打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。</p>
+另外还有一些关于 SVG 打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。
 
-<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}
diff --git a/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md
index 700d20e2640caa..bab4e09ea46add 100644
--- a/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md
+++ b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.md
@@ -3,36 +3,38 @@ title: 其它 SVG 内容
 slug: Web/SVG/Tutorial/Other_content_in_SVG
 tags:
   - SVG
-  - 'SVG:Tutorial'
+  - SVG:Tutorial
 translation_of: Web/SVG/Tutorial/Other_content_in_SVG
 ---
-<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}
 
-<p>除了图形化原件，如矩形和圆形之外，SVG 还提供了一些元素用来在图片中嵌入别的类型的内容。</p>
+除了图形化原件，如矩形和圆形之外，SVG 还提供了一些元素用来在图片中嵌入别的类型的内容。
 
-<h3 id="嵌入光栅图像">嵌入光栅图像</h3>
+### 嵌入光栅图像
 
-<p>很像在 HTML 中的<code>img</code>元素，SVG 有一个<code>image</code>元素，用于同样的目的。你可以利用它嵌入任意光栅（以及矢量）图像。它的规格要求应用至少支持 PNG、JPG 和 SVG 格式文件。</p>
+很像在 HTML 中的`img`元素，SVG 有一个`image`元素，用于同样的目的。你可以利用它嵌入任意光栅（以及矢量）图像。它的规格要求应用至少支持 PNG、JPG 和 SVG 格式文件。
 
-<p>嵌入的图像变成一个普通的 SVG 元素。这意味着，你可以在其内容上用剪切、遮罩、滤镜、旋转以及其它 SVG 工具：</p>
+嵌入的图像变成一个普通的 SVG 元素。这意味着，你可以在其内容上用剪切、遮罩、滤镜、旋转以及其它 SVG 工具：
 
-<pre class="brush: html"><svg version="1.1"
+```html
+<svg version="1.1"
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="200" height="200">
-  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
-     xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/>
-</svg></pre>
+     width="200" height="200">
+  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
+     xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/>
+</svg>
+```
 
-<p>{{ EmbedLiveSample('嵌入光栅图像','220','220') }}</p>
+{{ EmbedLiveSample('嵌入光栅图像','220','220') }}
 
-<h3 id="嵌入任意XML">嵌入任意 XML</h3>
+### 嵌入任意 XML
 
-<p>因为 SVG 是一个 XML 应用，所以你<strong>总是</strong>可以在 SVG 文档的任何位置嵌入任意 XML。但是你没有必要定义周围的 SVG 需要怎样反作用于这个内容。实际上，在一个遵从的浏览者中，根本没有反作用的方法，数据将简单被忽略。因此特地在 SVG 中添加了{{ SVGElement("foreignObject") }} 元素。它的唯一的目的是作为其它标记的容器和 SVG 样式属性的载体（更突出的<code>width</code>和<code>height</code>用来定义该对象占用的空间。）。</p>
+因为 SVG 是一个 XML 应用，所以你**总是**可以在 SVG 文档的任何位置嵌入任意 XML。但是你没有必要定义周围的 SVG 需要怎样反作用于这个内容。实际上，在一个遵从的浏览者中，根本没有反作用的方法，数据将简单被忽略。因此特地在 SVG 中添加了{{ SVGElement("foreignObject") }} 元素。它的唯一的目的是作为其它标记的容器和 SVG 样式属性的载体（更突出的`width`和`height`用来定义该对象占用的空间。）。
 
-<p>foreignObject 元素是一个好办法，用来在 SVG 中嵌入 XHTML。如果你有更长的文本，该 HTML 布局比 SVG <code>text</code>元素更适合。另一个经常被引用的用例是用 MathML 写的方程式。对于 SVG 的科学应用，它是连接两个世界的一个很好的办法。</p>
+foreignObject 元素是一个好办法，用来在 SVG 中嵌入 XHTML。如果你有更长的文本，该 HTML 布局比 SVG `text`元素更适合。另一个经常被引用的用例是用 MathML 写的方程式。对于 SVG 的科学应用，它是连接两个世界的一个很好的办法。
 
-<div class="note">注意：请记住，<code>foreignObject</code>元素的内容是能被浏览器加工的。一个独立的 SVG 浏览器不太可能呈现 HTML 或 MathML。</div>
+> **备注：** 请记住，`foreignObject`元素的内容是能被浏览器加工的。一个独立的 SVG 浏览器不太可能呈现 HTML 或 MathML。
 
-<p>因为<code>foreignObject</code>是一个 SVG 元素，所以你可以像用图像那样，使用任何 SVG 的精华，它将被应用到它的内容。</p>
+因为`foreignObject`是一个 SVG 元素，所以你可以像用图像那样，使用任何 SVG 的精华，它将被应用到它的内容。
 
-<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}
diff --git a/files/zh-cn/web/svg/tutorial/paths/index.md b/files/zh-cn/web/svg/tutorial/paths/index.md
index 2c1ed89adeff68..4ed733fef228d8 100644
--- a/files/zh-cn/web/svg/tutorial/paths/index.md
+++ b/files/zh-cn/web/svg/tutorial/paths/index.md
@@ -3,212 +3,240 @@ title: 路径
 slug: Web/SVG/Tutorial/Paths
 translation_of: Web/SVG/Tutorial/Paths
 ---
-<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
 
-<p>如上一章所说，<a href="/zh-CN/docs/Web/SVG/Element/path"><code><path></code></a>元素是 SVG<a href="/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes">基本形状</a>中最强大的一个。  你可以用它创建线条，曲线，弧形等等。</p>
+如上一章所说，[`<path>`](/zh-CN/docs/Web/SVG/Element/path)元素是 SVG[基本形状](/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes)中最强大的一个。 你可以用它创建线条，曲线，弧形等等。
 
-<p>另外，path 只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然<code>polyline</code>元素也能实现类似的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），并且这种做法不能够放大（放大后，点的离散更明显）。所以在绘制 SVG 时，对路径的良好理解很重要。虽然不建议使用 XML 编辑器或文本编辑器创建复杂的路径，但了解它们的工作方式将有助于识别和修复 SVG 中的显示问题。</p>
+另外，path 只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然`polyline`元素也能实现类似的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），并且这种做法不能够放大（放大后，点的离散更明显）。所以在绘制 SVG 时，对路径的良好理解很重要。虽然不建议使用 XML 编辑器或文本编辑器创建复杂的路径，但了解它们的工作方式将有助于识别和修复 SVG 中的显示问题。
 
-<p><a href="/ㄣ/SVG/Tutorial/Basic_Shapes">上一章</a>提到过，path 元素的形状是通过属性<code>{{ SVGAttr("d") }}</code>定义的，属性<code>d</code>的值是一个 “命令 + 参数” 的序列，我们将讲解这些可用的命令，并且展示一些示例。</p>
+[上一章](/ㄣ/SVG/Tutorial/Basic_Shapes)提到过，path 元素的形状是通过属性`{{ SVGAttr("d") }}`定义的，属性`d`的值是一个 “命令 + 参数” 的序列，我们将讲解这些可用的命令，并且展示一些示例。
 
-<p>每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的 x 和 y 轴坐标。比如移动到 (10,10) 这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用<strong>大写字母</strong>，表示采用绝对定位。另一种是用<strong>小写字母</strong>，表示采用相对定位（例如：<em>从上一个点开始，向上移动 10px，向左移动 7px</em>）。</p>
+每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的 x 和 y 轴坐标。比如移动到 (10,10) 这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用**大写字母**，表示采用绝对定位。另一种是用**小写字母**，表示采用相对定位（例如：_从上一个点开始，向上移动 10px，向左移动 7px_）。
 
-<p><code>因为属性 d</code>采用的是用户坐标系统，所以<strong>不需标明单位</strong>。在后面的教程中，我们会学到如何让变换路径，以满足更多需求。</p>
+`因为属性 d`采用的是用户坐标系统，所以**不需标明单位**。在后面的教程中，我们会学到如何让变换路径，以满足更多需求。
 
-<h2 id="Line_commands">直线命令</h2>
+## 直线命令
 
-<p><code><path></code>元素里有 5 个画直线的命令，顾名思义，直线命令就是在两个点之间画直线。首先是“Move to”命令，M，前面已经提到过，它需要两个参数，分别是需要移动到的点的 x 轴和 y 轴的坐标。假设，你的画笔当前位于一个点，在使用 M 命令移动画笔后，只会移动画笔，但不会在两点之间画线。因为 M 命令仅仅是移动画笔，但不画线。所以 M 命令经常出现在路径的开始处，用来指明从何处开始画。</p>
+`<path>`元素里有 5 个画直线的命令，顾名思义，直线命令就是在两个点之间画直线。首先是“Move to”命令，M，前面已经提到过，它需要两个参数，分别是需要移动到的点的 x 轴和 y 轴的坐标。假设，你的画笔当前位于一个点，在使用 M 命令移动画笔后，只会移动画笔，但不会在两点之间画线。因为 M 命令仅仅是移动画笔，但不画线。所以 M 命令经常出现在路径的开始处，用来指明从何处开始画。
 
-<pre class="notranslate">M x y
-</pre>
+```plain
+M x y
+```
 
-<p>或</p>
+或
 
-<pre class="notranslate">m dx dy</pre>
+```plain
+m dx dy
+```
 
-<p>这有一个比较好的例子，不过我们没画任何东西，只是将画笔移动到路径的起点，所以我们不会看到任何图案。但是，我把我们移动到的点标注出来了，所以在下面的例子里会看到 (10,10) 坐标上有一个点。注意，如果只画 path，这里什么都不会显示。（这段不太好理解，说明一下：为了更好地展示路径，下面的所有例子里，在用 path 绘制路径的同时，也会用 circle 标注路径上的点。）<img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p>
+这有一个比较好的例子，不过我们没画任何东西，只是将画笔移动到路径的起点，所以我们不会看到任何图案。但是，我把我们移动到的点标注出来了，所以在下面的例子里会看到 (10,10) 坐标上有一个点。注意，如果只画 path，这里什么都不会显示。（这段不太好理解，说明一下：为了更好地展示路径，下面的所有例子里，在用 path 绘制路径的同时，也会用 circle 标注路径上的点。）![](/@api/deki/files/45/=Blank_Path_Area.png)
 
-<pre class="notranslate"><?xml version="1.0" standalone="no"?>
+```plain
+<?xml version="1.0" standalone="no"?>
 
-<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
-  <path d="M10 10"/>
+  <path d="M10 10"/>
 
-  <!-- Points -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
+  <!-- Points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
 
-</svg></pre>
+</svg>
+```
 
-<p>能够真正画出线的命令有三个（M 命令是移动画笔位置，但是不画线），最常用的是“Line to”命令，<code>L</code>，<code>L</code>需要两个参数，分别是一个点的 x 轴和 y 轴坐标，L 命令将会在当前位置和新位置（L 前面画笔所在的点）之间画一条线段。</p>
+能够真正画出线的命令有三个（M 命令是移动画笔位置，但是不画线），最常用的是“Line to”命令，`L`，`L`需要两个参数，分别是一个点的 x 轴和 y 轴坐标，L 命令将会在当前位置和新位置（L 前面画笔所在的点）之间画一条线段。
 
-<pre class="eval notranslate"> L x y (or l dx dy)
-</pre>
+```plain
+ L x y (or l dx dy)
+```
 
-<p>另外还有两个简写命令，用来绘制水平线和垂直线。<code>H</code>，绘制水平线。<code>V</code>，绘制垂直线。这两个命令都只带一个参数，标明在 x 轴或 y 轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。</p>
+另外还有两个简写命令，用来绘制水平线和垂直线。`H`，绘制水平线。`V`，绘制垂直线。这两个命令都只带一个参数，标明在 x 轴或 y 轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。
 
-<pre class="eval notranslate"> H x (or h dx)
+```plain
+ H x (or h dx)
  V y (or v dy)
-</pre>
+```
 
-<p>现在我们已经掌握了一些命令，可以开始画一些东西了。先从简单的地方开始，画一个简单的矩形（同样的效果用<code><rect/></code>元素可以更简单的实现），矩形是由水平线和垂直线组成的，所以这个例子可以很好地展现前面讲的画线的方法。<img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p>
+现在我们已经掌握了一些命令，可以开始画一些东西了。先从简单的地方开始，画一个简单的矩形（同样的效果用`<rect/>`元素可以更简单的实现），矩形是由水平线和垂直线组成的，所以这个例子可以很好地展现前面讲的画线的方法。![](/@api/deki/files/292/=Path_Line_Commands.png)
 
-<pre class="notranslate"><?xml version="1.0" standalone="no"?>
+```plain
+<?xml version="1.0" standalone="no"?>
 
-<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
-  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
+  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
 
-  <!-- Points -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-  <circle cx="90" cy="90" r="2" fill="red"/>
-  <circle cx="90" cy="10" r="2" fill="red"/>
-  <circle cx="10" cy="90" r="2" fill="red"/>
+  <!-- Points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+  <circle cx="90" cy="90" r="2" fill="red"/>
+  <circle cx="90" cy="10" r="2" fill="red"/>
+  <circle cx="10" cy="90" r="2" fill="red"/>
 
-</svg></pre>
+</svg>
+```
 
-<p>最后，我们可以通过一个“闭合路径命令”Z 来简化上面的 path，<code>Z</code>命令会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z 命令不用区分大小写。</p>
+最后，我们可以通过一个“闭合路径命令”Z 来简化上面的 path，`Z`命令会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z 命令不用区分大小写。
 
-<pre class="eval notranslate"> Z (or z)
-</pre>
+```plain
+ Z (or z)
+```
 
-<p>所以上面例子里用到的路径，可以简化成这样：</p>
+所以上面例子里用到的路径，可以简化成这样：
 
-<pre class="eval notranslate"> <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
-</pre>
+```plain
+ <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+```
 
-<p>你也可以使用这些命令的相对坐标形式来绘制相同的图形，如之前所述，相对命令使用的是小写字母，它们的参数不是指定一个明确的坐标，而是表示相对于它前面的点需要移动多少距离。例如前面的示例，画的是一个 80*80 的正方形，用相对命令可以这样描述：</p>
+你也可以使用这些命令的相对坐标形式来绘制相同的图形，如之前所述，相对命令使用的是小写字母，它们的参数不是指定一个明确的坐标，而是表示相对于它前面的点需要移动多少距离。例如前面的示例，画的是一个 80\*80 的正方形，用相对命令可以这样描述：
 
-<pre class="eval notranslate"> <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
-</pre>
+```plain
+ <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
+```
 
-<p>上述路径是：画笔移动到 (10,10) 点，由此开始，向右移动 80 像素构成一条水平线，然后向下移动 80 像素，然后向左移动 80 像素，然后再回到起点。</p>
+上述路径是：画笔移动到 (10,10) 点，由此开始，向右移动 80 像素构成一条水平线，然后向下移动 80 像素，然后向左移动 80 像素，然后再回到起点。
 
-<p>你可能会问这些命令有什么用，因为 <code><polygon></code> 和 <code><polyline></code> 可以做到画出一样的图形。答案是，这些命令可以做得更多。如果你只是画直线，那么其他元素可能会更好用，但是，path 却是众多开发者在 SVG 绘制中经常用到的。据我所知，它们之间不存在性能上的优劣。但是通过脚本生成 path 可能有所不同，因为另外两种方法只需要指明点，而 path 在这方面的语法会更复杂一些。</p>
+你可能会问这些命令有什么用，因为 `<polygon>` 和 `<polyline>` 可以做到画出一样的图形。答案是，这些命令可以做得更多。如果你只是画直线，那么其他元素可能会更好用，但是，path 却是众多开发者在 SVG 绘制中经常用到的。据我所知，它们之间不存在性能上的优劣。但是通过脚本生成 path 可能有所不同，因为另外两种方法只需要指明点，而 path 在这方面的语法会更复杂一些。
 
-<h2 id="Curve_commands">曲线命令</h2>
+## 曲线命令
 
-<p>绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。如果你在 Inkscape、Illustrator 或者 Photoshop 中用过路径工具，可能对贝塞尔曲线有一定程度的了解。欲了解贝塞尔曲线的完整数学讲解，请阅读这份<a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia 的文档</a>。在这里不用讲得太多。贝塞尔曲线的类型有很多，但是在 path 元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线 C，和二次贝塞尔曲线 Q。</p>
+绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。如果你在 Inkscape、Illustrator 或者 Photoshop 中用过路径工具，可能对贝塞尔曲线有一定程度的了解。欲了解贝塞尔曲线的完整数学讲解，请阅读这份[Wikipedia 的文档](http://en.wikipedia.org/wiki/B%C3%A9zier_curve)。在这里不用讲得太多。贝塞尔曲线的类型有很多，但是在 path 元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线 C，和二次贝塞尔曲线 Q。
 
-<h3 id="Bezier_Curves">贝塞尔曲线</h3>
+### 贝塞尔曲线
 
-<p>我们从稍微复杂一点的三次贝塞尔曲线 C 入手，三次贝塞尔曲线需要定义一个点和两个控制点，所以用 C 命令创建三次贝塞尔曲线，需要设置三组坐标参数：</p>
+我们从稍微复杂一点的三次贝塞尔曲线 C 入手，三次贝塞尔曲线需要定义一个点和两个控制点，所以用 C 命令创建三次贝塞尔曲线，需要设置三组坐标参数：
 
-<pre class="eval notranslate"> C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
-</pre>
+```plain
+ C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
+```
 
-<p>这里的最后一个坐标 (x,y) 表示的是曲线的终点，另外两个坐标是控制点，(x1,y1) 是起点的控制点，(x2,y2) 是终点的控制点。如果你熟悉代数或者微积分的话，会更容易理解控制点，控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。（文字描述不好，维基百科上有图示，更直观。）<img alt="" class="internal" src="/@api/deki/files/159/=Cubic_Bezier_Curves.png" style="float: right;"></p>
+这里的最后一个坐标 (x,y) 表示的是曲线的终点，另外两个坐标是控制点，(x1,y1) 是起点的控制点，(x2,y2) 是终点的控制点。如果你熟悉代数或者微积分的话，会更容易理解控制点，控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。（文字描述不好，维基百科上有图示，更直观。）![](/@api/deki/files/159/=Cubic_Bezier_Curves.png)
 
-<pre class="notranslate"><?xml version="1.0" standalone="no"?>
+```plain
+<?xml version="1.0" standalone="no"?>
 
-<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
-  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
-  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
-  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
-  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
-  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
-  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
-  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
-  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
-  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
+  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
+  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
+  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
+  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
+  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
+  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
+  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
+  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
 
-</svg>
-</pre>
+</svg>
+```
 
-<p>上面的例子里，创建了 9 个三次贝塞尔曲线。有一点比较遗憾，标记控制点的代码会比较庞大，所以在这里舍弃了。（之前所有点都用 circle 标记，此处一样，只不过没把代码列出来）。如果你想更准确地控制它们，可以自己动手把他们画出来。图例上的曲线从左往右看，控制点在水平方向上逐渐分开，图例上的曲线从上往下看，控制点和曲线坐标之间离得越来越远。这里要注意观察，曲线沿着起点到第一控制点的方向伸出，逐渐弯曲，然后沿着第二控制点到终点的方向结束。</p>
+上面的例子里，创建了 9 个三次贝塞尔曲线。有一点比较遗憾，标记控制点的代码会比较庞大，所以在这里舍弃了。（之前所有点都用 circle 标记，此处一样，只不过没把代码列出来）。如果你想更准确地控制它们，可以自己动手把他们画出来。图例上的曲线从左往右看，控制点在水平方向上逐渐分开，图例上的曲线从上往下看，控制点和曲线坐标之间离得越来越远。这里要注意观察，曲线沿着起点到第一控制点的方向伸出，逐渐弯曲，然后沿着第二控制点到终点的方向结束。
 
-<p>你可以将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。通常情况下，一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变）。这样，你可以使用一个简写的贝塞尔曲线命令 S，如下所示：</p>
+你可以将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。通常情况下，一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变）。这样，你可以使用一个简写的贝塞尔曲线命令 S，如下所示：
 
-<pre class="eval notranslate"> S x2 y2, x y (or s dx2 dy2, dx dy)
-</pre>
+```plain
+ S x2 y2, x y (or s dx2 dy2, dx dy)
+```
 
-<p>S 命令可以用来创建与前面一样的贝塞尔曲线，但是，如果 S 命令跟在一个 C 或 S 命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果 S 命令单独使用，前面没有 C 或 S 命令，那当前点将作为第一个控制点。下面是 S 命令的语法示例，图中左侧红色标记的点对应的控制点即为蓝色标记点。</p>
+S 命令可以用来创建与前面一样的贝塞尔曲线，但是，如果 S 命令跟在一个 C 或 S 命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果 S 命令单独使用，前面没有 C 或 S 命令，那当前点将作为第一个控制点。下面是 S 命令的语法示例，图中左侧红色标记的点对应的控制点即为蓝色标记点。
 
-<p><img alt="" class="internal" src="/@api/deki/files/363/=ShortCut_Cubic_Bezier.png" style="float: right;"></p>
+![](/@api/deki/files/363/=ShortCut_Cubic_Bezier.png)
 
-<pre class="notranslate"><?xml version="1.0" standalone="no"?>
-<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
-</svg></pre>
+```plain
+<?xml version="1.0" standalone="no"?>
+<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
+</svg>
+```
 
-<p>另一种可用的贝塞尔曲线是二次贝塞尔曲线 Q，它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。</p>
+另一种可用的贝塞尔曲线是二次贝塞尔曲线 Q，它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。
 
-<pre class="eval notranslate"> Q x1 y1, x y (or q dx1 dy1, dx dy)
-</pre>
+```plain
+ Q x1 y1, x y (or q dx1 dy1, dx dy)
+```
 
-<p><img alt="" class="internal" src="/@api/deki/files/326/=Quadratic_Bezier.png" style="float: right;"></p>
+![](/@api/deki/files/326/=Quadratic_Bezier.png)
 
-<pre class="notranslate"><?xml version="1.0" standalone="no"?>
-<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
-</svg></pre>
+```plain
+<?xml version="1.0" standalone="no"?>
+<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
+</svg>
+```
 
-<p>就像三次贝塞尔曲线有一个 S 命令，二次贝塞尔曲线有一个差不多的 T 命令，可以通过更简短的参数，延长二次贝塞尔曲线。</p>
+就像三次贝塞尔曲线有一个 S 命令，二次贝塞尔曲线有一个差不多的 T 命令，可以通过更简短的参数，延长二次贝塞尔曲线。
 
-<pre class="eval notranslate"> T x y (or t dx dy)
-</pre>
+```plain
+ T x y (or t dx dy)
+```
 
-<p>和之前一样，快捷命令 T 会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T 命令前面必须是一个 Q 命令，或者是另一个 T 命令，才能达到这种效果。如果 T 单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。</p>
+和之前一样，快捷命令 T 会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T 命令前面必须是一个 Q 命令，或者是另一个 T 命令，才能达到这种效果。如果 T 单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
 
-<p><img alt="" class="internal" src="/@api/deki/files/364/=Shortcut_Quadratic_Bezier.png" style="float: right;"></p>
+![](/@api/deki/files/364/=Shortcut_Quadratic_Bezier.png)
 
-<pre class="notranslate"><?xml version="1.0" standalone="no"?>
-<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
-</svg></pre>
+```plain
+<?xml version="1.0" standalone="no"?>
+<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
+</svg>
+```
 
-<p>虽然三次贝塞尔曲线拥有更大的自由度，但是两种曲线能达到的效果总是差不多的。具体使用哪种曲线，通常取决于需求，以及对曲线对称性的依赖程度。</p>
+虽然三次贝塞尔曲线拥有更大的自由度，但是两种曲线能达到的效果总是差不多的。具体使用哪种曲线，通常取决于需求，以及对曲线对称性的依赖程度。
 
-<h3 id="Arcs">弧形</h3>
+### 弧形
 
-<p>弧形命令 A 是另一个创建 SVG 曲线的命令。基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，并且已知两个点（在椭圆上），根据半径和两点，可以画出两个椭圆，在每个椭圆上根据两点都可以画出两种弧形。所以，仅仅根据半径和两点，可以画出四种弧形。为了保证创建的弧形唯一，A 命令需要用到比较多的参数：</p>
+弧形命令 A 是另一个创建 SVG 曲线的命令。基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，并且已知两个点（在椭圆上），根据半径和两点，可以画出两个椭圆，在每个椭圆上根据两点都可以画出两种弧形。所以，仅仅根据半径和两点，可以画出四种弧形。为了保证创建的弧形唯一，A 命令需要用到比较多的参数：
 
-<pre class="eval notranslate"> A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+```plain
+ A rx ry x-axis-rotation large-arc-flag sweep-flag x y
  a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
-</pre>
+```
 
-<p>弧形命令 A 的前两个参数分别是 x 轴半径和 y 轴半径，它们的作用很明显，不用多做解释，如果你不是很清楚它们的作用，可以参考一下椭圆<a href="/zh-CN/docs/Web/SVG/Element/ellipse">ellipse</a>命令中的相同参数。弧形命令 A 的第三个参数表示弧形的旋转情况，下面的例子可以很好地解释它：</p>
+弧形命令 A 的前两个参数分别是 x 轴半径和 y 轴半径，它们的作用很明显，不用多做解释，如果你不是很清楚它们的作用，可以参考一下椭圆[ellipse](/zh-CN/docs/Web/SVG/Element/ellipse)命令中的相同参数。弧形命令 A 的第三个参数表示弧形的旋转情况，下面的例子可以很好地解释它：
 
-<p><img alt="" class="internal" src="/@api/deki/files/346/=SVGArcs_XAxisRotation.png" style="float: right;"></p>
+![](/@api/deki/files/346/=SVGArcs_XAxisRotation.png)
 
-<pre class="notranslate"><?xml version="1.0" standalone="no"?>
-<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 315
+```plain
+<?xml version="1.0" standalone="no"?>
+<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 315
            L 110 215
            A 30 50 0 0 1 162.55 162.45
            L 172.55 152.45
            A 30 50 -45 0 1 215.1 109.9
-           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
-</svg></pre>
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+</svg>
+```
 
-<p>如图例所示，画布上有一条对角线，中间有两个椭圆弧被对角线切开 (x radius = 30, y radius = 50)。第一个椭圆弧的 x-axis-rotation（x 轴旋转角度）是 0，所以弧形所在的椭圆是正置的（没有倾斜）。在第二个椭圆弧中，x-axis-rotation 设置为-45，所以这是一个旋转了 45 度的椭圆，并以短轴为分割线，形成了两个对称的弧形。参看图示中的第二个椭圆形。</p>
+如图例所示，画布上有一条对角线，中间有两个椭圆弧被对角线切开 (x radius = 30, y radius = 50)。第一个椭圆弧的 x-axis-rotation（x 轴旋转角度）是 0，所以弧形所在的椭圆是正置的（没有倾斜）。在第二个椭圆弧中，x-axis-rotation 设置为-45，所以这是一个旋转了 45 度的椭圆，并以短轴为分割线，形成了两个对称的弧形。参看图示中的第二个椭圆形。
 
-<p>对于上图没有旋转的椭圆，只有 2 种弧形可以选择，不是 4 种，因为两点连线（也就是对角线）正好穿过了椭圆的中心。像下面这张图，就是普通的情况，可以画出两个椭圆，四种弧。</p>
+对于上图没有旋转的椭圆，只有 2 种弧形可以选择，不是 4 种，因为两点连线（也就是对角线）正好穿过了椭圆的中心。像下面这张图，就是普通的情况，可以画出两个椭圆，四种弧。
 
-<p><img src="svgarcs_xaxisrotation_with_grid_ellipses.png"></p>
+![](svgarcs_xaxisrotation_with_grid_ellipses.png)
 
-<p>上面提到的四种不同路径将由接下来的两个参数决定。如前所讲，还有两种可能的椭圆用来形成路径，它们给出的四种可能的路径中，有两种不同的路径。这里要讲的参数是 large-arc-flag（角度大小）和 sweep-flag（弧线方向），large-arc-flag 决定弧线是大于还是小于 180 度，0 表示小角度弧，1 表示大角度弧。sweep-flag 表示弧线的方向，0 表示从起点到终点沿逆时针画弧，1 表示从起点到终点沿顺时针画弧。下面的例子展示了这四种情况。</p>
+上面提到的四种不同路径将由接下来的两个参数决定。如前所讲，还有两种可能的椭圆用来形成路径，它们给出的四种可能的路径中，有两种不同的路径。这里要讲的参数是 large-arc-flag（角度大小）和 sweep-flag（弧线方向），large-arc-flag 决定弧线是大于还是小于 180 度，0 表示小角度弧，1 表示大角度弧。sweep-flag 表示弧线的方向，0 表示从起点到终点沿逆时针画弧，1 表示从起点到终点沿顺时针画弧。下面的例子展示了这四种情况。
 
-<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p>
+![](/@api/deki/files/345/=SVGArcs_Flags.png)
 
-<pre class="notranslate"><?xml version="1.0" standalone="no"?>
-<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <path d="M80 80
+```plain
+<?xml version="1.0" standalone="no"?>
+<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M80 80
            A 45 45, 0, 0, 0, 125 125
-           L 125 80 Z" fill="green"/>
-  <path d="M230 80
+           L 125 80 Z" fill="green"/>
+  <path d="M230 80
            A 45 45, 0, 1, 0, 275 125
-           L 275 80 Z" fill="red"/>
-  <path d="M80 230
+           L 275 80 Z" fill="red"/>
+  <path d="M80 230
            A 45 45, 0, 0, 1, 125 275
-           L 125 230 Z" fill="purple"/>
-  <path d="M230 230
+           L 125 230 Z" fill="purple"/>
+  <path d="M230 230
            A 45 45, 0, 1, 1, 275 275
-           L 275 230 Z" fill="blue"/>
-</svg></pre>
+           L 275 230 Z" fill="blue"/>
+</svg>
+```
 
-<p>你应该已经猜到了，最后两个参数是指定弧形的终点，弧形可以简单地创建圆形或椭圆形图标，比如你可以创建若干片弧形，组成一个<em>饼图</em>。</p>
+你应该已经猜到了，最后两个参数是指定弧形的终点，弧形可以简单地创建圆形或椭圆形图标，比如你可以创建若干片弧形，组成一个*饼图*。
 
-<p>如果你是从<a href="/zh-CN/HTML/Canvas">Canvas</a>过渡到 SVG，那么弧形会比较难以掌握，但它也是非常强大的。用路径来绘制完整的圆或者椭圆是比较困难的，因为圆上的任意点都可以是起点同时也是终点，无数种方案可以选择，真正的路径无法定义。通过绘制连续的路径段落，也可以达到近似的效果，但使用真正的 circle 或者 ellipse 元素会更容易一些。</p>
+如果你是从[Canvas](/zh-CN/HTML/Canvas)过渡到 SVG，那么弧形会比较难以掌握，但它也是非常强大的。用路径来绘制完整的圆或者椭圆是比较困难的，因为圆上的任意点都可以是起点同时也是终点，无数种方案可以选择，真正的路径无法定义。通过绘制连续的路径段落，也可以达到近似的效果，但使用真正的 circle 或者 ellipse 元素会更容易一些。
 
-<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
diff --git a/files/zh-cn/web/svg/tutorial/positions/index.md b/files/zh-cn/web/svg/tutorial/positions/index.md
index d2cdda4a573a0d..6e50c614994c08 100644
--- a/files/zh-cn/web/svg/tutorial/positions/index.md
+++ b/files/zh-cn/web/svg/tutorial/positions/index.md
@@ -3,46 +3,44 @@ title: 坐标定位
 slug: Web/SVG/Tutorial/Positions
 translation_of: Web/SVG/Tutorial/Positions
 ---
-<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}
 
-<h2 id="The_grid">网格</h2>
+## 网格
 
-<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;"> 对于所有元素，SVG 使用的坐标系统或者说网格系统，和<a href="/zh-CN/HTML/Canvas">Canvas</a>用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在 HTML 文档中，元素都是用这种方式定位的。</p>
+![](/@api/deki/files/78/=Canvas_default_grid.png) 对于所有元素，SVG 使用的坐标系统或者说网格系统，和[Canvas](/zh-CN/HTML/Canvas)用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在 HTML 文档中，元素都是用这种方式定位的。
 
-<h4 id="示例：">示例：</h4>
+#### 示例：
 
-<p>元素</p>
+元素
 
-<pre><rect x="0" y="0" width="100" height="100" />
+```plain
+<rect x="0" y="0" width="100" height="100" />
+```
 
-</pre>
+定义一个矩形，即从左上角开始，向右延展 100px，向下延展 100px，形成一个 100\*100 大的矩形。
 
-<p>定义一个矩形，即从左上角开始，向右延展 100px，向下延展 100px，形成一个 100*100 大的矩形。</p>
+### 什么是 "像素"?
 
-<h3 id="什么是_像素">什么是 "像素"?</h3>
+基本上，在 SVG 文档中的 1 个像素对应输出设备（比如显示屏）上的 1 个像素。但是这种情况是可以改变的，否则 SVG 的名字里也不至于会有“Scalable”（可缩放）这个词。如同 CSS 可以定义字体的绝对大小和相对大小，SVG 也可以定义绝对大小（比如使用“pt”或“cm”标识维度）同时 SVG 也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。
 
-<p>基本上，在 SVG 文档中的 1 个像素对应输出设备（比如显示屏）上的 1 个像素。但是这种情况是可以改变的，否则 SVG 的名字里也不至于会有“Scalable”（可缩放）这个词。如同 CSS 可以定义字体的绝对大小和相对大小，SVG 也可以定义绝对大小（比如使用“pt”或“cm”标识维度）同时 SVG 也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。</p>
+在没有进一步规范说明的情况下，1 个用户单位等同于 1 个屏幕单位。要明确改变这种设定，SVG 里有多种方法。我们从`svg`根元素开始：
 
-<p>在没有进一步规范说明的情况下，1 个用户单位等同于 1 个屏幕单位。要明确改变这种设定，SVG 里有多种方法。我们从<code>svg</code>根元素开始：</p>
+```plain
+<svg width="100" height="100">
+```
 
-<pre><svg width="100" height="100">
+上面的元素定义了一个 100\*100px 的 SVG 画布，这里 1 用户单位等同于 1 屏幕单位。
 
-</pre>
+```plain
+<svg width="200" height="200" viewBox="0 0 100 100">
+```
 
-<p>上面的元素定义了一个 100*100px 的 SVG 画布，这里 1 用户单位等同于 1 屏幕单位。</p>
+这里定义的画布尺寸是 200\*200px。但是，viewBox 属性定义了画布上可以显示的区域：从 (0,0) 点开始，100 宽\*100 高的区域。这个 100\*100 的区域，会放到 200\*200 的画布上显示。于是就形成了放大两倍的效果。
 
-<pre><svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>>
+用户单位和屏幕单位的映射关系被称为**用户坐标系统**。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统 1 用户像素等于设备上的 1 像素（但是设备上可能会自己定义 1 像素到底是多大）。在定义了具体尺寸单位的 SVG 中，比如单位是“cm”或“in”，最终图形会以实际大小的 1 比 1 比例呈现。
 
-</pre>
+下面是引自 SVG1.1 规范的一段说明：
 
-<p>这里定义的画布尺寸是 200*200px。但是，viewBox 属性定义了画布上可以显示的区域：从 (0,0) 点开始，100 宽*100 高的区域。这个 100*100 的区域，会放到 200*200 的画布上显示。于是就形成了放大两倍的效果。</p>
+> \[…] 假设在用户的设备环境里，1px 等于 0.2822222 毫米（即分辨率是 90dpi），那么所有的 SVG 内容都会按照这种比例处理： \[…] "1cm" 等于 "35.43307px"（即 35.43307 用户单位）；
 
-<p>用户单位和屏幕单位的映射关系被称为<strong>用户坐标系统</strong>。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统 1 用户像素等于设备上的 1 像素（但是设备上可能会自己定义 1 像素到底是多大）。在定义了具体尺寸单位的 SVG 中，比如单位是“cm”或“in”，最终图形会以实际大小的 1 比 1 比例呈现。</p>
-
-<p>下面是引自 SVG1.1 规范的一段说明：</p>
-
-<blockquote>
-<p>[…] 假设在用户的设备环境里，1px 等于 0.2822222 毫米（即分辨率是 90dpi），那么所有的 SVG 内容都会按照这种比例处理： […] "1cm" 等于 "35.43307px"（即 35.43307 用户单位）；</p>
-</blockquote>
-
-<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
+{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}
diff --git a/files/zh-cn/web/svg/tutorial/svg_and_css/index.md b/files/zh-cn/web/svg/tutorial/svg_and_css/index.md
index 06a1edced23f72..928a181b91193c 100644
--- a/files/zh-cn/web/svg/tutorial/svg_and_css/index.md
+++ b/files/zh-cn/web/svg/tutorial/svg_and_css/index.md
@@ -6,87 +6,91 @@ original_slug: Web/Guide/CSS/Getting_started/SVG_and_CSS
 ---
 {{ PreviousNext("Web/SVG/Tutorial/Tools_for_SVG") }}
 
-<p>本节将演示如何将 CSS 应用到 <a href="/en-US/docs/SVG">SVG</a> 中。</p>
-<p>你将创建一个简单的演示代码并在支持 SVG 的浏览器中运行。</p>
-<p>这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_started">CSS 教程</a> 第二部分的第二节<br>
- 前一节：<a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br>
- 下一节：<a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p>
-<h3 id="Information:_SVG">信息: SVG</h3>
-<p><em>SVG</em> (Scalable Vector Graphics) 是一个基于 XML 的图形描述语言。</p>
-<p>它可以用于描述静态图、动画，以及用户界面。</p>
-<p>和其他基于 XML 的语言一样，SVG 支持用 CSS 样式表将图形内容和图形样式分离。</p>
-<p>在样式表中你可以在任何可以可以指定图片的地方指定一个 SVG 的 URL。比如，在 HTML 的样式表中，你可以为 <code>background</code> 属性指定一个 SVG 的 URL。</p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
- <caption>
-  更多细节</caption>
- <tbody>
-  <tr>
-   <td>
-    <p>在这个教程编写的时间点 (2011 中旬)，绝大多数现代浏览器都对 SVG 有基本的支持。其中包括 Internet Explorer 9 及其后续版本。一些 SVG 特性只被某些浏览器支持。参见 <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a> 了解支持情况。 参见 <a href="/en-US/docs/SVG/Element">SVG element reference</a> 了解兼容情况。</p>
-    <p>通过安装 <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a> 提供的插件，你可以让某些浏览器支持 SVG。</p>
-    <p>欲在 Mozilla 了解更多关于 SVG 的信息，参考 <a href="/en-US/docs/SVG">这里 SVG</a>。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-<h3 id="Action:_An_SVG_demonstration">实例：一个 SVG 演示</h3>
-<p>建立一个 SVG 文件<code>doc8.svg。</code>复制下面所有内容：</p>
-<pre class="brush: xml"><?xml version="1.0" standalone="no"?>
-
-<?xml-stylesheet type="text/css" href="style8.css"?>
-
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg width="600px" height="600px" viewBox="-300 -300 600 600"
+本节将演示如何将 CSS 应用到 [SVG](/zh-CN/docs/SVG) 中。
+
+你将创建一个简单的演示代码并在支持 SVG 的浏览器中运行。
+
+这是 [CSS 教程](/zh-CN/docs/Web/Guide/CSS/Getting_started) 第二部分的第二节
+前一节：[JavaScript](/zh-CN/docs/Web/JavaScript/Getting_Started)
+下一节：[XML data](/zh-CN/docs/Web/Guide/CSS/Getting_started/XML_data)
+
+### 信息: SVG
+
+_SVG_ (Scalable Vector Graphics) 是一个基于 XML 的图形描述语言。
+
+它可以用于描述静态图、动画，以及用户界面。
+
+和其他基于 XML 的语言一样，SVG 支持用 CSS 样式表将图形内容和图形样式分离。
+
+在样式表中你可以在任何可以可以指定图片的地方指定一个 SVG 的 URL。比如，在 HTML 的样式表中，你可以为 `background` 属性指定一个 SVG 的 URL。
+
+| 在这个教程编写的时间点 (2011 中旬)，绝大多数现代浏览器都对 SVG 有基本的支持。其中包括 Internet Explorer 9 及其后续版本。一些 SVG 特性只被某些浏览器支持。参见 [SVG tables on caniuse.com](http://caniuse.com/#search=SVG) 了解支持情况。 参见 [SVG element reference](/zh-CN/docs/SVG/Element) 了解兼容情况。通过安装 [Adobe](http://www.adobe.com/svg/viewer/install/main.html) 提供的插件，你可以让某些浏览器支持 SVG。欲在 Mozilla 了解更多关于 SVG 的信息，参考 [这里 SVG](/zh-CN/docs/SVG)。 |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+
+### 实例：一个 SVG 演示
+
+建立一个 SVG 文件`doc8.svg。`复制下面所有内容：
+
+```xml
+<?xml version="1.0" standalone="no"?>
+
+<?xml-stylesheet type="text/css" href="style8.css"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="600px" height="600px" viewBox="-300 -300 600 600"
   xmlns="http://www.w3.org/2000/svg" version="1.1"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-
-<title>SVG demonstration</title>
-<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
-
-<defs>
-  <g id="segment" class="segment">
-    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
-    </g>
-  <g id="quadrant">
-    <use xlink:href="#segment"/>
-    <use xlink:href="#segment" transform="rotate(18)"/>
-    <use xlink:href="#segment" transform="rotate(36)"/>
-    <use xlink:href="#segment" transform="rotate(54)"/>
-    <use xlink:href="#segment" transform="rotate(72)"/>
-    </g>
-  <g id="petals">
-    <use xlink:href="#quadrant"/>
-    <use xlink:href="#quadrant" transform="rotate(90)"/>
-    <use xlink:href="#quadrant" transform="rotate(180)"/>
-    <use xlink:href="#quadrant" transform="rotate(270)"/>
-    </g>
-  <radialGradient id="fade" cx="0" cy="0" r="200"
-      gradientUnits="userSpaceOnUse">
-    <stop id="fade-stop-1" offset="33%"/>
-    <stop id="fade-stop-2" offset="95%"/>
-    </radialGradient>
-  </defs>
-
-<text id="heading" x="-280" y="-270">
-  SVG demonstration</text>
-<text  id="caption" x="-280" y="-250">
-  Move your mouse pointer over the flower.</text>
-
-<g id="flower">
-  <circle id="overlay" cx="0" cy="0" r="200"
-    stroke="none" fill="url(#fade)"/>
-  <use id="outer-petals" xlink:href="#petals"/>
-  <use id="inner-petals" xlink:href="#petals"
-    transform="rotate(9) scale(0.33)"/>
-  </g>
-
-</svg>
-</pre>
-<p>创建一个 CSS 文件，<code>style8.css。</code> 复制下面所有内容：</p>
-<pre class="brush: css">/*** SVG demonstration ***/
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<title>SVG demonstration
+Mozilla CSS Getting Started - SVG demonstration
+
+
+  
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+  
+    
+    
+    
+  
+
+
+  SVG demonstration
+
+  Move your mouse pointer over the flower.
+
+
+  
+  
+  
+  
+
+
+```
+
+创建一个 CSS 文件，`style8.css。` 复制下面所有内容：
+
+```css
+/*** SVG demonstration ***/
 
 /* page */
 svg {
@@ -133,12 +137,12 @@ svg {
   stroke-width: 3;
   }
 
-#outer-petals .segment:hover > .segment-fill {
+#outer-petals .segment:hover > .segment-fill {
   fill: plum;
   stroke: none;
   }
 
-#outer-petals .segment:hover > .segment-edge {
+#outer-petals .segment:hover > .segment-edge {
   stroke: slateblue;
   }
 
@@ -155,38 +159,33 @@ svg {
   stroke-width: 9;
   }
 
-#inner-petals .segment:hover > .segment-fill {
+#inner-petals .segment:hover > .segment-fill {
   fill: darkseagreen;
   stroke: none;
   }
 
-#inner-petals .segment:hover > .segment-edge {
+#inner-petals .segment:hover > .segment-edge {
   stroke: green;
   }
-
    
-
    在支持 SVG 的浏览器中打开上面的文档。将鼠标移到图上。
    
-
    由于这个 wiki 不支持嵌入 SVG，所以下面是一个截图供参考：
    
-
- 
-  
-   
-  
- 
-
    SVG demonstration
    
-
    解释：
    
-
      
- 
    • 这个 SVG 文档使用常见连接方法引入样式表。
      • 
- 
    • SVG 有自己一套 CSS 属性和对应的值。其中一些和 HTML 使用的 CSS 属性相似。
      • 
-
    
-
- 
- 
-  
-   
-  
- 
-
    
-  挑战
    修改样式表使得当鼠标指针移到任何一个内层花瓣上时所有内层花瓣都变为粉色，但不改变外层花瓣的效果。
    
-
    接下来？
    
-
    如果你有任何疑问或评论请移步到讨论区。
    
-
    在这个演示中，支持 SVG 的浏览器知道如何显示 SVG 元素。样式表只是修改其呈现的方式。同样，这对 HTML 和 XUL 文档也是适用的。你也可以将 CSS 用于 XML 文档。（与 HTML 相比，）XML 没有预先为元素定义样式。下一个节将对此进行演示：XML data
    
+```
+
+在支持 SVG 的浏览器中打开上面的文档。将鼠标移到图上。
+
+由于这个 wiki 不支持嵌入 SVG，所以下面是一个截图供参考：
+
+| ![SVG demonstration](https://mdn.mozillademos.org/files/719/SVG-flower.png) |
+| --------------------------------------------------------------------------- |
+
+解释：
+
+- 这个 SVG 文档使用常见连接方法引入样式表。
+- SVG 有自己一套 CSS 属性和对应的值。其中一些和 HTML 使用的 CSS 属性相似。
+
+| 修改样式表使得当鼠标指针移到任何一个内层花瓣上时所有内层花瓣都变为粉色，但不改变外层花瓣的效果。 |
+| ------------------------------------------------------------------------------------------------ |
+
+#### 接下来？
+
+如果你有任何疑问或评论请移步到[讨论区](/zh-CN/docs/Talk:CSS/Getting_Started/SVG_and_CSS)。
+
+在这个演示中，支持 SVG 的浏览器知道如何显示 SVG 元素。样式表只是修改其呈现的方式。同样，这对 HTML 和 XUL 文档也是适用的。你也可以将 CSS 用于 XML 文档。（与 HTML 相比，）XML 没有预先为元素定义样式。下一个节将对此进行演示：[XML data](/zh-CN/docs/Web/Guide/CSS/Getting_started/XML_data)
diff --git a/files/zh-cn/web/svg/tutorial/svg_fonts/index.md b/files/zh-cn/web/svg/tutorial/svg_fonts/index.md
index 1b7cdcb12b28ec..c469f6450fb030 100644
--- a/files/zh-cn/web/svg/tutorial/svg_fonts/index.md
+++ b/files/zh-cn/web/svg/tutorial/svg_fonts/index.md
@@ -3,92 +3,98 @@ title: SVG 字体
 slug: Web/SVG/Tutorial/SVG_fonts
 translation_of: Web/SVG/Tutorial/SVG_fonts
 ---
-
    {{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}
    
+{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}
 
-
    当规定 SVG 时，在浏览器支持 web 字体并不流行。因为访问正确的字体文件对于正确呈现字体是有确定性的，SVG 中添加了一个字体描述技术，以提供这个能力。它并不是为了和别的格式比如说 PostScript 或 OTF 兼容，而是为了将字形信息嵌入 SVG 呈现的一个简单的方法。
    
+当规定 SVG 时，在浏览器支持 web 字体并不流行。因为访问正确的字体文件对于正确呈现字体是有确定性的，SVG 中添加了一个字体描述技术，以提供这个能力。它并不是为了和别的格式比如说 PostScript 或 OTF 兼容，而是为了将字形信息嵌入 SVG 呈现的一个简单的方法。
 
-
    SVG 字体当前只在 Safari 和 Android 浏览器中受支持。
    
-Internet Explorer还没有考虑实现它，Chrome 38（和 Opera25）移除了这个功能，Firefox 已经无限期推迟实施它以专心实现WOFF。别的工具比如说Adobe SVG Viewer插件、Batik 和部分 Inkscape 支持 SVG 字体嵌入。
    
+> **备注：** **SVG 字体当前只在 Safari 和 Android 浏览器中受支持。**
+> Internet Explorer [还没有考虑实现它](http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx)，Chrome 38（和 Opera25）[移除了这个功能](https://www.chromestatus.com/feature/5930075908210688)，Firefox 已经[无限期推迟实施它](https://bugzilla.mozilla.org/show_bug.cgi?id=119490)以专心实现[WOFF](/en/WOFF)。别的工具比如说[Adobe SVG Viewer](http://www.adobe.com/svg/viewer/install/)插件、Batik 和部分 Inkscape 支持 SVG 字体嵌入。
 
-
    定义一个 SVG 字体的基础是{{ SVGElement("font") }}元素。
    
+定义一个 SVG 字体的基础是{{ SVGElement("font") }}元素。
 
-
    定义一个字体
    
+## 定义一个字体
 
-
    在 SVG 中嵌入一个字体，有一些原料要求。让我们用一个示例演示它（来自规范文档的示例），并详细解释。
    
+在 SVG 中嵌入一个字体，有一些原料要求。让我们用一个示例演示它（来自[规范文档](http://www.w3.org/TR/SVG/fonts.html#FontElement)的示例），并详细解释。
 
-
    <font id="Font1" horiz-adv-x="1000">
-  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+```plain
+
+  
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+    
+      
+    
+  
+  
+  
+  
+  
+
+```
 
-
    我们从{{ SVGElement("font") }}元素开始。这个携带了一个 ID 属性，使它能够通过一个URI被引用（如下所示）。属性horiz-adv-x定义了相比之单一字形的路径定义，一个字符的平均宽度。值1000设置了一个起作用的合理值。有一些陪同的属性，帮助进一步定义基本的字形盒布局。
    
+我们从{{ SVGElement("font") }}元素开始。这个携带了一个 ID 属性，使它能够通过一个`URI`被引用（如下所示）。属性`horiz-adv-x`定义了相比之单一字形的路径定义，一个字符的平均宽度。值`1000`设置了一个起作用的合理值。有一些陪同的属性，帮助进一步定义基本的字形盒布局。
 
-
    {{ SVGElement("font-face") }}元素在 SVG 中等同于 CSS 的 @font-face 声明。它定义了最终字体的基本属性，比如说 weight、style，等等。在上面这个示例中，最重要的是定义font-family，后面的 CSS 和 SVG font-family属性可以引用它的值。属性font-weight和font-style跟 CSS 中的描述符有同样的目的。所有后面的属性都是字体布局引擎的呈现指令，举个例子，字形的全部高度可以提升多少。
    
+{{ SVGElement("font-face") }}元素在 SVG 中等同于 CSS 的 [`@font-face`](/en/CSS/@font-face) 声明。它定义了最终字体的基本属性，比如说 weight、style，等等。在上面这个示例中，最重要的是定义`font-family`，后面的 CSS 和 SVG `font-family`属性可以引用它的值。属性`font-weight`和`font-style`跟 CSS 中的描述符有同样的目的。所有后面的属性都是字体布局引擎的呈现指令，举个例子，字形的全部高度可以[提升](http://en.wikipedia.org/wiki/Ascender_%28typography%29)多少。
 
-
    它的子元素，{{ SVGElement("font-face-src") }}元素，相对于 CSS 的@font-face描述符中的src描述符。你可以利用它的子元素 {{ SVGElement("font-face-name") }}和{{ SVGElement("font-face-uri") }}把字体声明指向外源。以上示例表达了如果渲染器有一个名为“Super Sans Bold”的本地字体可用，它将使用这个本地字体。
    
+它的子元素，{{ SVGElement("font-face-src") }}元素，相对于 CSS 的`@font-face`描述符中的`src`描述符。你可以利用它的子元素 {{ SVGElement("font-face-name") }}和{{ SVGElement("font-face-uri") }}把字体声明指向外源。以上示例表达了如果渲染器有一个名为“Super Sans Bold”的本地字体可用，它将使用这个本地字体。
 
-
    紧跟着{{ SVGElement("font-face-src") }}元素的是一个{{ SVGElement("missing-glyph") }}元素。它定义了如果一个特定的字形在字体中找不到，而且也没有回调机制的话，该如何显示。它同时还显示了如何创建字形：在里面简单添加任一个图形化 SVG 内容。你可以在这里使用任何其它的 SVG 元素，甚至是 {{ SVGElement("filter") }}元素、{{ SVGElement("a") }}元素或者 {{ SVGElement("script") }}元素。然而，为了简化字形，你可以简单添加一个属性d——它精确定义了字形的形状，就像标准 SVG 路径所做的那样。
    
+紧跟着{{ SVGElement("font-face-src") }}元素的是一个{{ SVGElement("missing-glyph") }}元素。它定义了如果一个特定的字形在字体中找不到，而且也没有回调机制的话，该如何显示。它同时还显示了如何创建字形：在里面简单添加任一个图形化 SVG 内容。你可以在这里使用任何其它的 SVG 元素，甚至是 {{ SVGElement("filter") }}元素、{{ SVGElement("a") }}元素或者 {{ SVGElement("script") }}元素。然而，为了简化字形，你可以简单添加一个属性`d`——它精确定义了字形的形状，就像标准 SVG 路径所做的那样。
 
-
    真正的字形是用{{ SVGElement("glyph") }}元素定义的。它最重要的属性是unicode。它定义了表达这个字形的 unicode 代码点。如果你还在一个字形上指定了{{htmlattrxref("lang")}}属性，你可以更进一步专门限定它为特定的语言（由目标上的xml:lang属性表达）。而且，你可以使用任意的 SVG 来定义这个字形，它允许用户代理所支持的很多效果。
    
+真正的字形是用{{ SVGElement("glyph") }}元素定义的。它最重要的属性是`unicode`。它定义了表达这个字形的 unicode 代码点。如果你还在一个字形上指定了{{htmlattrxref("lang")}}属性，你可以更进一步专门限定它为特定的语言（由目标上的`xml:lang`属性表达）。而且，你可以使用任意的 SVG 来定义这个字形，它允许用户代理所支持的很多效果。
 
-
    有两个进一步的元素，可以定义在font元素里面：{{ SVGElement("hkern") }}元素和{{ SVGElement("vkern") }}元素。这两个元素每个引用到至少两个字符（属性 u1 和属性 u2）以及一个属性 k。属性 k 决定了那些字符之间的距离应该减少多少。下面的示例指示用户代理把“A”和“V”字符放得比标准的字符间距更靠近一些。
    
+有两个进一步的元素，可以定义在`font`元素里面：{{ SVGElement("hkern") }}元素和{{ SVGElement("vkern") }}元素。这两个元素每个引用到至少两个字符（属性 u1 和属性 u2）以及一个属性 k。属性 k 决定了那些字符之间的距离应该减少多少。下面的示例指示用户代理把“A”和“V”字符放得比标准的字符间距更靠近一些。
 
-
    <hkern u1="A" u2="V" k="20" />
-
    
+```plain
+
+```
 
-
    引用一个字体
    
+## 引用一个字体
 
-
    如果你已经把你的字体声明如上放在一起，你可以使用一个单一的font-family属性以实现在 SVG 文本上应用字体：
    
+如果你已经把你的字体声明如上放在一起，你可以使用一个单一的`font-family`属性以实现在 SVG 文本上应用字体：
 
-
    <font>
-  <font-face font-family="Super Sans" />
-  <!-- and so on -->
-</font>
+```plain
+
+  
+  
+
 
-<text font-family="Super Sans">My text uses Super Sans</text>
-
    
+My text uses Super Sans
+```
 
-
    然而，你可以自由组合一些方法，在如何定义字体方面有极大的自由度。
    
+然而，你可以自由组合一些方法，在如何定义字体方面有极大的自由度。
 
-
    选项：使用 CSS @font-face
    
+### 选项：使用 CSS @font-face
 
-
    你可以使用@font-face以引用远程（或者非远程）字体：
    
+你可以使用`@font-face`以引用远程（或者非远程）字体：
 
-
    <font id="Super_Sans">
-  <!-- and so on -->
-</font>
+```plain
+
+  
+
 
-<style type="text/css">
+
 
-<text font-family="Super Sans">My text uses Super Sans</text>
    
+My text uses Super Sans
+```
 
-
    选项：引用一个远程字体
    
+### 选项：引用一个远程字体
 
-
    上面提到的 font-face-uri 元素允许你引用一个外来字体，因此可以有很大的可重用性：
    
+上面提到的 font-face-uri 元素允许你引用一个外来字体，因此可以有很大的可重用性：
 
-
    <font>
-  <font-face font-family="Super Sans">
-    <font-face-src>
-      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
-    </font-face-src>
-  </font-face>
-</font>
-
    
+```plain
+
+  
+    
+      
+    
+  
+
+```
 
-
    {{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}
    
+{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}
diff --git a/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md
index e72ee13e891cdf..911ff041f0ea46 100644
--- a/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md
+++ b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.md
@@ -5,91 +5,87 @@ tags:
   - SVG
 translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
 ---
-
    概述
    
+## 概述
 
-
    本文及其相关示例展示了如何使用内联的 SVG 给一个表单提供背景图片，它展示了如何按照编写常规 XHTML 代码相同的方式来通过JavaScript 和 CSS 操作图片。注意，该示例仅在支持 XHTML（非 HTML）并集成了 SVG 的浏览器中正常工作。
    
+本文及其相关示例展示了如何使用内联的 [SVG](/zh-CN/docs/SVG) 给一个表单提供背景图片，它展示了如何按照编写常规 XHTML 代码相同的方式来通过[JavaScript](/zh-CN/docs/JavaScript) 和 [CSS](/zh-CN/docs/CSS) 操作图片。注意，该示例仅在支持 XHTML（非 HTML）并集成了 SVG 的浏览器中正常工作。
 
-
    源码
    
+## 源码
 
-
    源码如下： 查看示例
    
+源码如下： [查看示例](/presentations/xtech2005/svg-canvas/SVGDemo.xml)
 
-
    <html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<title>XTech SVG Demo</title>
-<style>
+```plain
+
+
+XTech SVG Demo
+
+
+
+
+
    
+  
    
+    HTML Form
+    
    
+    
+    Incorrect value!
    
+    
    
+  
    
+
    
+
+
+  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
+  
+    
+    
+  
+  
+  
+
+
+
+```
 
-
    讨论
    
+## 讨论
 
-
    该页面主要是常规的 XHTML、CSS 和 JavaScript，唯一有趣的部分就是包含了 <svg> 元素。该元素及其子元素都被声明在 SVG 的命名空间内。它包含一个渐变和两个渐变填充的形状。该渐变颜色的终值颜色由 CSS 设置，当用户在表单中输入了错误信息，脚本会给 <body> 设置一个 invalid 属性，样式规则将渐变颜色的end-stop颜色设置为红色（另一个样式规则用于展示错误提示信息）
    
+该页面主要是常规的 XHTML、CSS 和 JavaScript，唯一有趣的部分就是包含了 \ 元素。该元素及其子元素都被声明在 SVG 的命名空间内。它包含一个渐变和两个渐变填充的形状。该渐变颜色的终值颜色由 CSS 设置，当用户在表单中输入了错误信息，脚本会给 \ 设置一个 `invalid` 属性，样式规则将渐变颜色的`end-stop`颜色设置为红色（另一个样式规则用于展示错误提示信息）
 
-
    该方法有如下几点需要注意：
    
+该方法有如下几点需要注意：
 
-
      
- 
    • 我们单独举出了一个可能存在的网站构成部分——表单，并为其添加了吸引人的、交互性的背景
      • 
- 
    • 该方法通过不展示背景图片的方式，向后兼容了不支持 SVG 的浏览器
      • 
- 
    • 它非常简单且运行良好
      • 
- 
    • 这个图片能够智能的自动适应其需要的大小
      • 
- 
    • 我们可以给 HTML 和 SVG 都显式声明样式规则
      • 
- 
    • 相同的脚本同时操作了 HTML 和 SVG
      • 
- 
    • 该文档完全符合标准
      • 
-
    
+- 我们单独举出了一个可能存在的网站构成部分——表单，并为其添加了吸引人的、交互性的背景
+- 该方法通过不展示背景图片的方式，向后兼容了不支持 SVG 的浏览器
+- 它非常简单且运行良好
+- 这个图片能够智能的自动适应其需要的大小
+- 我们可以给 HTML 和 SVG 都显式声明样式规则
+- 相同的脚本同时操作了 HTML 和 SVG
+- 该文档完全符合标准
 
-
    
-
    如果需要给一个内嵌的 SVG 元素通过 DOM 方法添加一个有外链的图片，我们需要使用 setAttributeNS 来设置外链地址 href. 示例如下：
    
+> **备注：** 如果需要给一个内嵌的 SVG 元素通过 DOM 方法添加一个有外链的图片，我们需要使用 `setAttributeNS` 来设置外链地址 `href`. 示例如下：
+>
+> ```js
+> var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+> img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+> ```
 
-
    var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
-img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
-
    
-
    
+## 细节
 
-
    细节
    
+viewBox 属性创建了一个与 SVG 图片坐标系相关联的逻辑坐标系，通过这种方式我们的图片被放置到了一个 100x100 的视觉系中。
 
-
    viewBox 属性创建了一个与 SVG 图片坐标系相关联的逻辑坐标系，通过这种方式我们的图片被放置到了一个 100x100 的视觉系中。
    
+`preserveAspectRatio 属性指定了需要预设的数据，即指定了再有效大小内图片的居中、适配图片最大宽高，并裁切掉了多余部分。`
 
-
    preserveAspectRatio 属性指定了需要预设的数据，即指定了再有效大小内图片的居中、适配图片最大宽高，并裁切掉了多余部分。
    
+样式属性指定了 SVG 在 form 背景中的位置。
 
-
    样式属性指定了 SVG 在 form 背景中的位置。
    
+## 相关链接
 
-
-
-
      
- 
    • Another SVG in XHTML example: A swarm of motes
      • 
- 
    • Working example 可以同时工作在安装有 Adobe SVG Viwer 的 Mozilla 和 IE 浏览器中。 （对于同时工作在 Firefox 和 IE 浏览器中得内联 SVG，需要为每个浏览器的服务文档设置不同的 Cotent-type。因为当你基于一个代理服务器获取页面的时候，如果在第二个浏览器中加载该案例将会失败，因其会获取错误的 Content-Type）
      • 
-
    
+- Another SVG in XHTML example: [A swarm of motes](/zh-CN/docs/SVG/Namespaces_Crash_Course/Example)
+- [Working example](http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml) 可以同时工作在安装有 Adobe SVG Viwer 的 Mozilla 和 IE 浏览器中。 （对于同时工作在 Firefox 和 IE 浏览器中得内联 SVG，需要为每个浏览器的服务文档设置不同的 Cotent-type。因为当你基于一个代理服务器获取页面的时候，如果在第二个浏览器中加载该案例将会失败，因其会获取错误的 Content-Type）