`](/zh-CN/docs/Web/SVG/Element/mask) 遮罩。
@@ -29,11 +33,11 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content
-
-
```
@@ -55,14 +59,15 @@ p {
```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.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
- Lorem ipsum dolor sit amet, consectetur adipisicing
- elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua.
- Ut enim ad minim veniam.
+ Lorem ipsum dolor sit amet, consectetur adipisicing
+ elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam.
```
@@ -76,22 +81,23 @@ p {
```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.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
- Lorem ipsum dolor sit amet, consectetur adipisicing
- elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua.
- Ut enim ad minim veniam.
+ Lorem ipsum dolor sit amet, consectetur adipisicing
+ elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam.
Toggle radius
-
```
@@ -114,7 +120,7 @@ p {
```js
function toggleRadius() {
var circle = document.getElementById("circle");
- circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+ circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}
```
@@ -126,15 +132,16 @@ function toggleRadius() {
```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.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
lorem
- Lorem ipsum dolor sit amet, consectetur adipisicing
- elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua.
- Ut enim ad minim veniam.
+ Lorem ipsum dolor sit amet, consectetur adipisicing
+ elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam.
```
@@ -143,7 +150,7 @@ function toggleRadius() {
```html
-
```
@@ -153,10 +160,11 @@ function toggleRadius() {
```html
-
```
@@ -166,20 +174,29 @@ function toggleRadius() {
```html
-
-
-
+
-
```
@@ -187,12 +204,24 @@ function toggleRadius() {
使用以下 CSS 应用五个过滤器：
```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); }
+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)}}
@@ -206,7 +235,7 @@ pre.target:hover { filter:url(#f3); }
-
@@ -215,7 +244,9 @@ pre.target:hover { filter:url(#f3); }
你可以在同一个 class 中使用 SVG 和 CSS 过滤器：
```css
-.blur { filter: url(#wherearemyglasses); }
+.blur {
+ filter: url(#wherearemyglasses);
+}
```
{{ EmbedLiveSample('示例：Blurred Text', 300, 100) }}
@@ -241,7 +272,9 @@ SVG 还可以用于添加比纯 HTML 文本更动态、更灵活的文本添加
例如，CSS 规则在一个名为 default.css 的文件中，如下这样：
```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/attributename/index.md b/files/zh-cn/web/svg/attribute/attributename/index.md
index f6f2119fb0ea14..d3a627960647f6 100644
--- a/files/zh-cn/web/svg/attribute/attributename/index.md
+++ b/files/zh-cn/web/svg/attribute/attributename/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/attributeName
| 类别 | 动画属性目标属性 |
| -------- | ------------------------------------------------------------------------------------- |
-| 值 | \ |
+| 值 | \ |
| 可变性 | No |
| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute) |
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 fc01b4121995cc..1f6e7becfee3f1 100644
--- a/files/zh-cn/web/svg/attribute/baseline-shift/index.md
+++ b/files/zh-cn/web/svg/attribute/baseline-shift/index.md
@@ -11,11 +11,11 @@ slug: Web/SVG/Attribute/baseline-shift
## 用法
-| 类别 | 外观属性 |
-| -------- | ---------------------------------------------------------------------------------------------------------- |
+| 类别 | 外观属性 |
+| -------- | --------------------------------------------------------------------------------------------------------------- |
| 值 | **auto** \| baseline \| super \| sub \| \ \| [\](/zh-CN/SVG/Content_type#Length) \| inherit |
-| 可变性 | Yes |
-| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty) |
+| 可变性 | Yes |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty) |
- baseline
- : 没有基线切换，`dominant-baseline`依然在原来的位置。
diff --git a/files/zh-cn/web/svg/attribute/baseprofile/index.md b/files/zh-cn/web/svg/attribute/baseprofile/index.md
index b3996c2ce3dedd..0e943cd263b72c 100644
--- a/files/zh-cn/web/svg/attribute/baseprofile/index.md
+++ b/files/zh-cn/web/svg/attribute/baseprofile/index.md
@@ -29,11 +29,13 @@ slug: Web/SVG/Attribute/baseProfile
## 例子
```html
-
-
+
...
-
```
diff --git a/files/zh-cn/web/svg/attribute/begin/index.md b/files/zh-cn/web/svg/attribute/begin/index.md
index 9c0a462b85c2e8..a26c27b78f5a12 100644
--- a/files/zh-cn/web/svg/attribute/begin/index.md
+++ b/files/zh-cn/web/svg/attribute/begin/index.md
@@ -13,7 +13,7 @@ slug: Web/SVG/Attribute/begin
| 类别 | 动画定时属性 |
| -------- | ----------------------------------------------------------------------------- |
-| 值 | \ |
+| 值 | \ |
| 可变性 | No |
| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#BeginAttribute) |
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 8b673cd1749a72..6862efef2167d2 100644
--- a/files/zh-cn/web/svg/attribute/clip-path/index.md
+++ b/files/zh-cn/web/svg/attribute/clip-path/index.md
@@ -14,7 +14,11 @@ slug: Web/SVG/Attribute/clip-path
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
@@ -24,24 +28,44 @@ html,body,svg { height:100% }
-
```
@@ -50,9 +74,9 @@ html,body,svg { height:100% }
## Usage notes
| 值 | {{cssxref('url')}} \| [ {{cssxref('basic-shape')}} \|\| `` ] \| `none` |
-| ---------- | ---------------------------------------------------------------------------------------------------- |
-| 默认值 | `none` |
-| Animatable | 是 |
+| ---------- | ------------------------------------------------------------------------------------ |
+| 默认值 | `none` |
+| Animatable | 是 |
- \
- : geometry-box 是应用 {{cssxref('basic-shape')}} 的额外信息，用于区分 CSS 基本形状如何应用于元素上：`fill-box` 表示将对象的包围框作为参照框；`stroke-box` 表示将对象的包围框加上描边的范围作为参照框；`view-box` 表示使用最近的 SVG 视窗作为参照框。
diff --git a/files/zh-cn/web/svg/attribute/clip/index.md b/files/zh-cn/web/svg/attribute/clip/index.md
index f16e95e83cc2c6..e1e21428c9803e 100644
--- a/files/zh-cn/web/svg/attribute/clip/index.md
+++ b/files/zh-cn/web/svg/attribute/clip/index.md
@@ -14,20 +14,22 @@ As a presentation attribute, it can be applied to any element but it has effect
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
+
-
+
@@ -40,9 +42,9 @@ html,body,svg { height:100% }
**Warning:** This property is deprecated. Use {{cssxref("clip-path")}} instead.
| 可用值 | **auto** \| \ \| inherit |
-| ---------- | ------------------------------ |
-| 默认值 | Yes |
-| Animatable | Yes |
+| ---------- | ------------------------------- |
+| 默认值 | Yes |
+| Animatable | Yes |
The value `auto` defines a clipping path along the bounds of the viewport created by the given element.
diff --git a/files/zh-cn/web/svg/attribute/color/index.md b/files/zh-cn/web/svg/attribute/color/index.md
index b16d41d55cb5f9..3c399ea1ca22c2 100644
--- a/files/zh-cn/web/svg/attribute/color/index.md
+++ b/files/zh-cn/web/svg/attribute/color/index.md
@@ -13,7 +13,7 @@ slug: Web/SVG/Attribute/color
| 类别 | 外观属性 |
| -------- | ---------------------------------------------------------------------------- |
-| 值 | [\](/zh-CN/SVG/Content_type#Color) \| inherit |
+| 值 | [\](/zh-CN/SVG/Content_type#Color) \| inherit |
| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/color.html#ColorProperty) |
## 示例
@@ -22,7 +22,13 @@ slug: Web/SVG/Attribute/color
```
diff --git a/files/zh-cn/web/svg/attribute/cx/index.md b/files/zh-cn/web/svg/attribute/cx/index.md
index 822497752f405b..16ef1c180c1bc3 100644
--- a/files/zh-cn/web/svg/attribute/cx/index.md
+++ b/files/zh-cn/web/svg/attribute/cx/index.md
@@ -12,17 +12,21 @@ slug: Web/SVG/Attribute/cx
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
@@ -35,9 +39,9 @@ html,body,svg { height:100% }
对于 {{SVGElement('circle')}}，`cx` 用来定义图形中心的 x 轴坐标。
| 值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0` |
-| 可变性 | Yes |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0` |
+| 可变性 | Yes |
注：起始于 SVG2 `cx`，是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
@@ -46,9 +50,9 @@ html,body,svg { height:100% }
对于 {{SVGElement('ellipse')}}，`cx` 用来定义图形中心的 x 轴坐标。
| 值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0` |
-| 可变性 | Yes |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0` |
+| 可变性 | Yes |
**注：** 起始于 SVG2 `cx`，是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。
@@ -57,41 +61,63 @@ html,body,svg { height:100% }
对于 {{SVGElement('radialGradient')}}, `cx` 用来定义径向渐变终止圆的 x 轴坐标。
| 值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** |
-| ------ | ------------------------------------------------- |
-| 默认值 | `50%` |
-| 可变性 | Yes |
+| ------ | -------------------------------------------------------- |
+| 默认值 | `50%` |
+| 可变性 | Yes |
#### 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
-
-
```
diff --git a/files/zh-cn/web/svg/attribute/cy/index.md b/files/zh-cn/web/svg/attribute/cy/index.md
index c70e6687e682e2..55c89b1a5a292c 100644
--- a/files/zh-cn/web/svg/attribute/cy/index.md
+++ b/files/zh-cn/web/svg/attribute/cy/index.md
@@ -12,17 +12,21 @@ slug: Web/SVG/Attribute/cy
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
@@ -35,9 +39,9 @@ html,body,svg { height:100% }
对于 {{SVGElement('circle')}}，`cy` 用来定义图形中心的 y 轴坐标。
| 值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0` |
-| 可变性 | Yes |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0` |
+| 可变性 | Yes |
**注：**起始于 SVG2，`cy` 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
@@ -46,9 +50,9 @@ html,body,svg { height:100% }
对于 {{SVGElement('ellipse')}}，`cy` 用来定义图形中心的 y 轴坐标。
| 值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0` |
-| 可变性 | Yes |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0` |
+| 可变性 | Yes |
**注：**起始于 SVG2，`cy` 是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。
@@ -57,41 +61,63 @@ html,body,svg { height:100% }
对于 {{SVGElement('radialGradient')}}，`cy` 用来定义径向渐变终止圆的 y 轴坐标。
| 值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** |
-| ------ | ------------------------------------------------- |
-| 默认值 | `50%` |
-| 可变性 | Yes |
+| ------ | -------------------------------------------------------- |
+| 默认值 | `50%` |
+| 可变性 | Yes |
#### 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
-
-
```
diff --git a/files/zh-cn/web/svg/attribute/d/index.md b/files/zh-cn/web/svg/attribute/d/index.md
index 08b84e366c6f4c..a923be4486e0d5 100644
--- a/files/zh-cn/web/svg/attribute/d/index.md
+++ b/files/zh-cn/web/svg/attribute/d/index.md
@@ -16,12 +16,18 @@ slug: Web/SVG/Attribute/d
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
-
@@ -397,21 +417,29 @@ _Lineto_ 指令将绘制一条直线段。这个直线段从*当前位置*（_P<
#### 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
- ce _ = {_xce _, _yce _})（控制在终点附近的曲线的曲率）
-绘制后，*终点*（_Pn _）将成为下一个命令中的*当前位置*（_Po ′_）。
+绘制后，_终点_（_Pn _）将成为下一个命令中的*当前位置*（_Po ′_）。
@@ -569,45 +597,60 @@ html,body,svg { height:100% }
#### 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
+
-
-
@@ -617,7 +660,7 @@ html,body,svg { height:100% }
### 二次贝塞尔曲线
-*二次*[*贝塞尔曲线*](/zh-CN/docs/Glossary/Bezier_curve)是使用三个点定义的平滑曲线：
+*二次[贝塞尔曲线](/zh-CN/docs/Glossary/Bezier_curve)*是使用三个点定义的平滑曲线：
- 起始点（当前位置）
- : _Po _ = {_xo _, _yo _}
@@ -626,7 +669,7 @@ html,body,svg { height:100% }
- 控制点
- : _Pc _ = {_xc _, _yc _}（控制曲率）
-绘制后，*终点*（_Pn _）将成为下一个命令中的*当前位置*（_Po ′_）。
+绘制后，_终点_（_Pn _）将成为下一个命令中的*当前位置*（_Po ′_）。
@@ -760,15 +803,23 @@ html,body,svg { height:100% }
#### 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
+
-
-
-
@@ -907,27 +966,38 @@ html,body,svg { height:100% }
#### 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
```
@@ -960,34 +1030,40 @@ _ClosePath_ 命令将从*当前位置*绘制一条直线到路径中的第一个
#### 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
diff --git a/files/zh-cn/web/svg/attribute/display/index.md b/files/zh-cn/web/svg/attribute/display/index.md
index 34c339e4fc85c2..c894aadb5827fd 100644
--- a/files/zh-cn/web/svg/attribute/display/index.md
+++ b/files/zh-cn/web/svg/attribute/display/index.md
@@ -28,7 +28,9 @@ As a presentation attribute, it can be applied to any element.
## 示例
```css hidden
-html, body, svg {
+html,
+body,
+svg {
height: 100%;
}
```
@@ -41,7 +43,13 @@ html, body, svg {
```
@@ -49,10 +57,10 @@ html, body, svg {
## 使用说明
-| Default value | `inline` |
-| ------------- | -------------------------------- |
+| Default value | `inline` |
+| ------------- | ------------------------ |
| Value | {{csssyntax("display")}} |
-| Animatable | Yes |
+| Animatable | Yes |
For a description of the values, please refer to the {{cssxref("display", "CSS display")}} property.
diff --git a/files/zh-cn/web/svg/attribute/dur/index.md b/files/zh-cn/web/svg/attribute/dur/index.md
index b921cd35a0524a..a3c05fe4ae8f3e 100644
--- a/files/zh-cn/web/svg/attribute/dur/index.md
+++ b/files/zh-cn/web/svg/attribute/dur/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/dur
| 类别 | 动画定时属性 |
| -------- | --------------------------------------------------------------------------- |
-| 值 | [\](/zh-CN/SVG/Content_type#Clock-value) \| **indefinite** |
+| 值 | [\](/zh-CN/SVG/Content_type#Clock-value) \| **indefinite** |
| 可变性 | No |
| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#DurAttribute) |
diff --git a/files/zh-cn/web/svg/attribute/dx/index.md b/files/zh-cn/web/svg/attribute/dx/index.md
index c6d059c6e78c76..f1a83c66fd22f2 100644
--- a/files/zh-cn/web/svg/attribute/dx/index.md
+++ b/files/zh-cn/web/svg/attribute/dx/index.md
@@ -24,10 +24,10 @@ slug: Web/SVG/Attribute/dx
## 用法上下文
-| 分类 | 无 |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| 数值类型 | [\](/zh-CN/SVG/Content_type#Number) \| [T<.2Fvar>s">\](/zh-CN/SVG/Content_type#List-of-T<.2Fvar>s) |
-| 可变 | 是 |
+| 分类 | 无 |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| 数值类型 | [\](/zh-CN/SVG/Content_type#Number) \| [T<.2Fvar>s">\](/zh-CN/SVG/Content_type#List-of-T<.2Fvar>s) |
+| 可变 | 是 |
## 元素
diff --git a/files/zh-cn/web/svg/attribute/end/index.md b/files/zh-cn/web/svg/attribute/end/index.md
index 21c6d6b0719b38..39973c740f9ddc 100644
--- a/files/zh-cn/web/svg/attribute/end/index.md
+++ b/files/zh-cn/web/svg/attribute/end/index.md
@@ -13,7 +13,7 @@ slug: Web/SVG/Attribute/end
| 类别 | 动画定时属性 |
| -------- | --------------------------------------------------------------------------- |
-| 值 | \ |
+| 值 | \ |
| 可变性 | No |
| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#EndAttribute) |
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 42dfc5ea6d3a58..bdec1372375654 100644
--- a/files/zh-cn/web/svg/attribute/fill-opacity/index.md
+++ b/files/zh-cn/web/svg/attribute/fill-opacity/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/fill-opacity
| 类别 | 外观属性 |
| -------- | ----------------------------------------------------------------------------------- |
-| 值 | [\](/zh-CN/SVG/Content_type#Opacity_value) \| inherit |
+| 值 | [\](/zh-CN/SVG/Content_type#Opacity_value) \| inherit |
| 初始值 | 1 |
| 可变性 | Yes |
| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty) |
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 814e1acb803e38..84facdac874844 100644
--- a/files/zh-cn/web/svg/attribute/fill-rule/index.md
+++ b/files/zh-cn/web/svg/attribute/fill-rule/index.md
@@ -24,21 +24,29 @@ slug: Web/SVG/Attribute/fill-rule
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
```
@@ -62,30 +70,40 @@ html,body,svg { height:100% }
#### Example
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
```
@@ -98,30 +116,40 @@ html,body,svg { height:100% }
#### Example
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
```
diff --git a/files/zh-cn/web/svg/attribute/fill/index.md b/files/zh-cn/web/svg/attribute/fill/index.md
index e17ff051a2865d..47be234349f038 100644
--- a/files/zh-cn/web/svg/attribute/fill/index.md
+++ b/files/zh-cn/web/svg/attribute/fill/index.md
@@ -30,7 +30,7 @@ slug: Web/SVG/Attribute/fill
| 类别 | 外观属性 |
| -------- | ---------------------------------------------------------------------------- |
-| 值 | [\](/zh-CN/SVG/Content_type#Paint) |
+| 值 | [\](/zh-CN/SVG/Content_type#Paint) |
| 可变性 | Yes |
| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillProperty) |
diff --git a/files/zh-cn/web/svg/attribute/filter/index.md b/files/zh-cn/web/svg/attribute/filter/index.md
index fd5d559505c7d5..b169e3d9c89f2b 100644
--- a/files/zh-cn/web/svg/attribute/filter/index.md
+++ b/files/zh-cn/web/svg/attribute/filter/index.md
@@ -13,7 +13,7 @@ slug: Web/SVG/Attribute/filter
| 类别 | 外观属性 |
| -------- | ------------------------------------------------------------------------------- |
-| 值 | [\](/zh-CN/SVG/Content_type#FuncIRI) \| **none** \| inherit |
+| 值 | [\](/zh-CN/SVG/Content_type#FuncIRI) \| **none** \| inherit |
| 可变性 | Yes |
| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#FilterProperty) |
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 300167ae5c9111..d27187379ad98b 100644
--- a/files/zh-cn/web/svg/attribute/font-family/index.md
+++ b/files/zh-cn/web/svg/attribute/font-family/index.md
@@ -11,11 +11,11 @@ slug: Web/SVG/Attribute/font-family
## 使用上下文
-| 分类 | Presentation attribute |
-| ----------------- | --------------------------------------------------------------------------------------- |
+| 分类 | Presentation attribute |
+| ----------------- | ------------------------------------------------------------------------------------------- |
| 值 | [[\ \| \],]\* [\ \| \] \| inherit |
-| 可动画 Animatable | Yes |
-| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#FontFamilyProperty) |
+| 可动画 Animatable | Yes |
+| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/text.html#FontFamilyProperty) |
## 例子
diff --git a/files/zh-cn/web/svg/attribute/fr/index.md b/files/zh-cn/web/svg/attribute/fr/index.md
index 932bae870f3499..41320d70c03f9e 100644
--- a/files/zh-cn/web/svg/attribute/fr/index.md
+++ b/files/zh-cn/web/svg/attribute/fr/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/fr
| 类别 | 无 |
| -------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| 值 | [\](/zh-CN/docs/Web/SVG/Content_type#Length) |
+| 值 | [\](/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) |
@@ -20,25 +20,47 @@ slug: Web/SVG/Attribute/fr
```html
-
+
-
-
+
+
- (fx,fy)
- (cx,cy)
+
+ (fx,fy)
+
+
+ (cx,cy)
+
```
diff --git a/files/zh-cn/web/svg/attribute/from/index.md b/files/zh-cn/web/svg/attribute/from/index.md
index 4ec9a825bcb0cf..3398295bc5568a 100644
--- a/files/zh-cn/web/svg/attribute/from/index.md
+++ b/files/zh-cn/web/svg/attribute/from/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/From
| 类别 | 动画属性值 |
| ---------- | ---------------------------------------------------------------------------- |
-| 值 | \ |
+| 值 | \ |
| 动画特征 | No |
| 标准化文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#FromAttribute) |
diff --git a/files/zh-cn/web/svg/attribute/fx/index.md b/files/zh-cn/web/svg/attribute/fx/index.md
index 22399314975224..8fc004cd8e8521 100644
--- a/files/zh-cn/web/svg/attribute/fx/index.md
+++ b/files/zh-cn/web/svg/attribute/fx/index.md
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/fx
| 类别 | 无 |
| -------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| 值 | [\](/zh-CN/SVG/Content_type#Coordinate) |
+| 值 | [\](/zh-CN/SVG/Content_type#Coordinate) |
| 可变性 | 非 |
| 规范文档 | [SVG 1.1 (2nd Edition): The radialGradient element](http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute) |
@@ -20,25 +20,40 @@ slug: Web/SVG/Attribute/fx
```html
-
+
-
-
+
+
- (fx,fy)
- (cx,cy)
+
+ (fx,fy)
+
+
+ (cx,cy)
+
```
diff --git a/files/zh-cn/web/svg/attribute/height/index.md b/files/zh-cn/web/svg/attribute/height/index.md
index 269ef49ebf2e11..49549cd5fe5c14 100644
--- a/files/zh-cn/web/svg/attribute/height/index.md
+++ b/files/zh-cn/web/svg/attribute/height/index.md
@@ -13,11 +13,12 @@ slug: Web/SVG/Attribute/height
```html
-
-
-
+
```
diff --git a/files/zh-cn/web/svg/attribute/id/index.md b/files/zh-cn/web/svg/attribute/id/index.md
index 49fd1fb5b9c1c6..b3a2155cc3da01 100644
--- a/files/zh-cn/web/svg/attribute/id/index.md
+++ b/files/zh-cn/web/svg/attribute/id/index.md
@@ -12,7 +12,11 @@ slug: Web/SVG/Attribute/id
## 示例
```html
-
+
Resize the window to see the effect
diff --git a/files/zh-cn/web/svg/attribute/opacity/index.md b/files/zh-cn/web/svg/attribute/opacity/index.md
index 4a7f65b0158285..26aa8489c15d2c 100644
--- a/files/zh-cn/web/svg/attribute/opacity/index.md
+++ b/files/zh-cn/web/svg/attribute/opacity/index.md
@@ -11,10 +11,10 @@ opacity 属性指定了一个对象或一组对象的透明度，也就是说，
## 用法
-| 类别 | 外观属性 |
-| ------ | -------------------------- |
+| 类别 | 外观属性 |
+| ------ | --------------------------- |
| 值 | \ \| inherit |
-| 可变性 | Yes |
+| 可变性 | Yes |
- \
- : 一致的不透明度设置，作为一个[\](/zh-CN/SVG/Content_type#Number)被应用到整个对象上。任何超过范围 0.0 到 1.0 的值都会被压回这个范围。0.0 表示完全透明，1.0 表示完全不透明。
diff --git a/files/zh-cn/web/svg/attribute/order/index.md b/files/zh-cn/web/svg/attribute/order/index.md
index d88a65bafab14d..fb33b01f4c81f0 100644
--- a/files/zh-cn/web/svg/attribute/order/index.md
+++ b/files/zh-cn/web/svg/attribute/order/index.md
@@ -15,10 +15,10 @@ order 属性确定被用作 {{ SVGElement("feConvolveMatrix") }} 元素的矩阵
## Usage context
-| Categories | None |
-| ---------- | ----------------------------------------------------------------------- |
+| Categories | None |
+| ---------- | --------------------------------------------------------------------------- |
| Value | [\](/zh-CN/SVG/Content_type#Number-optional-number) |
-| Animatable | Yes |
+| Animatable | Yes |
## Example
diff --git a/files/zh-cn/web/svg/attribute/pathlength/index.md b/files/zh-cn/web/svg/attribute/pathlength/index.md
index d9974a3445c6ca..9318d8ef55fa0b 100644
--- a/files/zh-cn/web/svg/attribute/pathlength/index.md
+++ b/files/zh-cn/web/svg/attribute/pathlength/index.md
@@ -14,34 +14,38 @@ Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement(
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
```
@@ -52,63 +56,63 @@ html,body,svg { height:100% }
For {{SVGElement('circle')}}, `pathLength` lets authors specify a total length for the circle, in user units.
| Value | **[\](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_ |
-| Animatable | Yes |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_ |
+| Animatable | Yes |
## ellipse
For {{SVGElement('ellipse')}}, `pathLength` lets authors specify a total length for the ellipse, in user units.
| Value | **[\](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_ |
-| Animatable | Yes |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_ |
+| Animatable | Yes |
## line
For {{SVGElement('line')}}, `pathLength` lets authors specify a total length for the line, in user units.
| Value | **[\](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_ |
-| Animatable | Yes |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_ |
+| Animatable | Yes |
## path
For {{SVGElement('path')}}, `pathLength` lets authors specify a total length for the path, in user units.
| Value | **[\](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_ |
-| Animatable | Yes |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_ |
+| Animatable | Yes |
## polygon
For {{SVGElement('polygon')}}, `pathLength` lets authors specify a total length for the shape, in user units.
| Value | **[\](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_ |
-| Animatable | Yes |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_ |
+| Animatable | Yes |
## polyline
For {{SVGElement('polyline')}}, `pathLength` lets authors specify a total length for the shape, in user units.
| Value | **[\](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_ |
-| Animatable | Yes |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_ |
+| Animatable | Yes |
## rect
For {{SVGElement('circle')}}, `pathLength` lets authors specify a total length for the rectangle, in user units.
| Value | **[\](/zh-CN/docs/Web/SVG/Content_type#Number)** |
-| ------------- | ------------------------------------------------- |
-| Default value | _none_ |
-| Animatable | Yes |
+| ------------- | -------------------------------------------------------- |
+| Default value | _none_ |
+| Animatable | Yes |
## 规范
diff --git a/files/zh-cn/web/svg/attribute/patternunits/index.md b/files/zh-cn/web/svg/attribute/patternunits/index.md
index c238fcdbfb983b..3d985f9aa023bb 100644
--- a/files/zh-cn/web/svg/attribute/patternunits/index.md
+++ b/files/zh-cn/web/svg/attribute/patternunits/index.md
@@ -12,30 +12,42 @@ Only one element is using this attribute: {{SVGElement('pattern')}}
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
+
-
+
-
```
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 81debf70a6aa5e..d453b4ffbfc74e 100644
--- a/files/zh-cn/web/svg/attribute/pointer-events/index.md
+++ b/files/zh-cn/web/svg/attribute/pointer-events/index.md
@@ -12,7 +12,11 @@ pointer-events 属性是一个展示属性，用于定义元素是否或何时
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
@@ -23,8 +27,7 @@ html,body,svg { height:100% }
你需要点击 rect 元素在圆外的部分
-->
```
```js
-window.addEventListener('mouseup', (e) => {
+window.addEventListener("mouseup", (e) => {
// 在 #000000 和 #FFFFFF 之间随机选取一个颜色
- const color = Math.round(Math.random() * 0xFFFFFF)
+ const color = Math.round(Math.random() * 0xffffff);
// 将 color 变量的值按照 CSS 的要求进行格式化
- const fill = '#' + color.toString(16).padStart(6,'0')
+ const fill = "#" + color.toString(16).padStart(6, "0");
// 将 color 变量设置的颜色应用到实际点击的元素上
- e.target.style.fill = fill
-})
+ e.target.style.fill = fill;
+});
```
{{EmbedLiveSample('示例', '100%', 150)}}
diff --git a/files/zh-cn/web/svg/attribute/points/index.md b/files/zh-cn/web/svg/attribute/points/index.md
index 839e7dd8ab34a1..132f4455c926ba 100644
--- a/files/zh-cn/web/svg/attribute/points/index.md
+++ b/files/zh-cn/web/svg/attribute/points/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/points
## 用法
-| 类别 | 无 |
-| ------ | ---------------- |
+| 类别 | 无 |
+| ------ | ----------------- |
| 值 | \ |
-| 可变性 | Yes |
+| 可变性 | Yes |
## 示例
diff --git a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
index ed556624e5c352..a7d101d748dca4 100644
--- a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
+++ b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md
@@ -15,12 +15,13 @@ slug: Web/SVG/Attribute/preserveAspectRatio
## 上下文用法
-| Categories | None |
-| ---------- | ----------------------- |
+| Categories | None |
+| ---------- | ------------------------- |
| Value | \ [\] |
-| Animatable | Yes |
+| Animatable | Yes |
- \
+
- : `` 属性值表示是否强制统一缩放，当 SVG 的 viewbox 属性与视图属性宽高比不一致时使用。`` 属性的值一定是下列的值之一：
- **none** 不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。（注意：如果 `` 的值是 `none` ，则 `` 属性的值将会被忽略。）
@@ -33,7 +34,9 @@ slug: Web/SVG/Attribute/preserveAspectRatio
- **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** (默认值) - 图形将缩放到：
diff --git a/files/zh-cn/web/svg/attribute/r/index.md b/files/zh-cn/web/svg/attribute/r/index.md
index df583264787406..f59bc54d1d96c6 100644
--- a/files/zh-cn/web/svg/attribute/r/index.md
+++ b/files/zh-cn/web/svg/attribute/r/index.md
@@ -12,29 +12,33 @@ slug: Web/SVG/Attribute/r
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
-
-
@@ -47,9 +51,9 @@ html,body,svg { height:100% }
对于 {{SVGElement('circle')}}，`r` 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。
| 值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `0` |
-| 可变性 | Yes |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `0` |
+| 可变性 | Yes |
**注：**起始于 SVG2，`r` 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
@@ -60,9 +64,9 @@ html,body,svg { height:100% }
渐变将以此绘制出来：**100%** 渐变停止点会被映射到终止圆的一周上。取值小于或等于零，将会使用最后一个渐变 {{ SVGElement("stop") }} 的颜色和不透明度，导致该区域被绘制为单色。
| 值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\](/zh-CN/docs/Web/SVG/Content_type#Percentage)** |
-| ------ | -------------------------------------------------------------------------------------------------------------- |
-| 默认值 | `50%` |
-| 可变性 | Yes |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `50%` |
+| 可变性 | Yes |
## 规范
diff --git a/files/zh-cn/web/svg/attribute/radius/index.md b/files/zh-cn/web/svg/attribute/radius/index.md
index 9ebdfc206dd3b3..e26f6e381274a2 100644
--- a/files/zh-cn/web/svg/attribute/radius/index.md
+++ b/files/zh-cn/web/svg/attribute/radius/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/radius
## 用法
-| 类别 | _无_ |
-| ------ | ----------------------------------------------------------------------- |
+| 类别 | _无_ |
+| ------ | --------------------------------------------------------------------------- |
| 值 | [\](/zh-CN/SVG/Content_type#Number-optional-number) |
-| 可变性 | Yes |
+| 可变性 | Yes |
## 示例
diff --git a/files/zh-cn/web/svg/attribute/result/index.md b/files/zh-cn/web/svg/attribute/result/index.md
index 18b102450ac22c..59340c22447cd7 100644
--- a/files/zh-cn/web/svg/attribute/result/index.md
+++ b/files/zh-cn/web/svg/attribute/result/index.md
@@ -9,10 +9,10 @@ slug: Web/SVG/Attribute/result
## 用法
-| 类别 | 无 |
-| ------ | ---------------------------- |
+| 类别 | 无 |
+| ------ | ----------------------------- |
| 值 | \ |
-| 可变性 | Yes |
+| 可变性 | Yes |
注意``不是一个 XML ID，换句话说，``只在给定的{{ SVGElement("filter") }}元素内部有意义，因此只有局部范围。在同一个{{ SVGElement("filter") }}元素内部，同一个``出现多次也是合法的。如果引用了，``将使用在给定结果前面、离给定结果最近的滤镜。
diff --git a/files/zh-cn/web/svg/attribute/rx/index.md b/files/zh-cn/web/svg/attribute/rx/index.md
index d3f5e9cd469625..37ea355bb0d31e 100644
--- a/files/zh-cn/web/svg/attribute/rx/index.md
+++ b/files/zh-cn/web/svg/attribute/rx/index.md
@@ -12,18 +12,22 @@ slug: Web/SVG/Attribute/rx
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
```
@@ -34,9 +38,9 @@ html,body,svg { height:100% }
对于 {{SVGElement('ellipse')}}，`rx` 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。
| 取值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\](/zh-CN/docs/Web/SVG/Content_type#Percentage)** \| `auto` |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------ |
-| 默认值 | `auto` |
-| 是否支持动画 | 是 |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| 默认值 | `auto` |
+| 是否支持动画 | 是 |
**注释：** 从 SVG2 开始， `rx` 是一个几何属性，也就是说，这个属性也可以用作椭圆的 CSS 属性。
@@ -51,9 +55,9 @@ html,body,svg { height:100% }
- `rx` 属性的有效值为矩形宽度的一半（即，如果为 `rx` 指定的值大于矩形宽度的一半，那么浏览器会视为 `rx` 的值为矩形宽度的一半）。
| 取值 | **[\](/zh-CN/docs/Web/SVG/Content_type#Length)** \| **[\](/zh-CN/docs/Web/SVG/Content_type#Percentage)** \| `auto` |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------ |
-| 缺省值 | `auto` |
-| 是否支持动画 | 是 |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| 缺省值 | `auto` |
+| 是否支持动画 | 是 |
**注释：** 从 SVG2 开始，`rx` 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。
diff --git a/files/zh-cn/web/svg/attribute/scale/index.md b/files/zh-cn/web/svg/attribute/scale/index.md
index f0de8eb07f4284..21c6182c5d68e5 100644
--- a/files/zh-cn/web/svg/attribute/scale/index.md
+++ b/files/zh-cn/web/svg/attribute/scale/index.md
@@ -13,10 +13,10 @@ slug: Web/SVG/Attribute/scale
## 用法
-| 类别 | _无_ |
-| ------ | --------------------------------------- |
+| 类别 | _无_ |
+| ------ | ------------------------------------------- |
| 值 | [\](/zh-CN/SVG/Content_type#Number) |
-| 可变性 | Yes |
+| 可变性 | Yes |
## 示例
diff --git a/files/zh-cn/web/svg/attribute/seed/index.md b/files/zh-cn/web/svg/attribute/seed/index.md
index 29bd88769d6566..a3235263e7afa9 100644
--- a/files/zh-cn/web/svg/attribute/seed/index.md
+++ b/files/zh-cn/web/svg/attribute/seed/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/seed
## 用法
-| 类别 | _None_ |
-| ------ | ----------------------------------------------- |
+| 类别 | _None_ |
+| ------ | ------------------------------------------------ |
| 值 | [\](/zh-CN/docs/SVG/Content_type#Number) |
-| 可变性 | Yes |
+| 可变性 | Yes |
## 示例
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 56a6c0d942e91f..385b11bbb09a01 100644
--- a/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/stroke-dasharray
## 用法
-| 类别 | 外观属性 |
-| ------ | ---------------------------------- |
+| 类别 | 外观属性 |
+| ------ | ----------------------------------- |
| 值 | **none** \| \ \| inherit |
-| 可变性 | Yes |
+| 可变性 | Yes |
- \
- : 它是一个[\](/zh-CN/SVG/Content_type#Length)和[\](/zh-CN/SVG/Content_type#Percentage)数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，**5,3,2**等同于**5,3,2,5,3,2**。
@@ -23,25 +23,36 @@ slug: Web/SVG/Attribute/stroke-dasharray
```html
-
-
-
+
```
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 48844f30a52436..adff6abb91af9c 100644
--- a/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.md
@@ -13,11 +13,11 @@ slug: Web/SVG/Attribute/stroke-dashoffset
## 使用环境
-| 类别 | 显示属性 |
-| ------ | ----------------------------------------------------------------------------------------------------- |
+| 类别 | 显示属性 |
+| ------ | ------------------------------------------------------------------------------------------------------------- |
| 值 | [\](/zh-CN/SVG/Content_type#Percentage) \| [\](/zh-CN/SVG/Content_type#Length) \| inherit |
-| 初始值 | 1 |
-| 可动画 | Yes |
+| 初始值 | 1 |
+| 可动画 | Yes |
## 示例
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 974592ccf4a431..5953085e517bf1 100644
--- a/files/zh-cn/web/svg/attribute/stroke-linecap/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-linecap/index.md
@@ -20,24 +20,40 @@ slug: Web/SVG/Attribute/stroke-linecap
```html
-
-
-
+
```
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 c0b0ea7e691a15..1865bd1f3be5e0 100644
--- a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.md
@@ -23,7 +23,11 @@ slug: Web/SVG/Attribute/stroke-linejoin
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
@@ -32,49 +36,66 @@ html,body,svg { height:100% }
Upper left path:
Effect of the "miter" value
-->
-
-
-
-
-
-
-
@@ -193,10 +244,14 @@ html,body,svg { height:100% }
```
@@ -214,22 +269,36 @@ The `miter-clip` 用尖角连接路径段。通过在路径段的切线处延伸
#### 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
@@ -238,10 +307,14 @@ html,body,svg { height:100% }
```
@@ -255,22 +328,28 @@ html,body,svg { height:100% }
#### 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
- \| inherit |
-| 初始值 | 4 |
-| 可动性 | Yes |
+| 初始值 | 4 |
+| 可动性 | Yes |
- \
- : 对斜角长度与{{ SVGAttr("stroke-width") }}的比率的限制。\的值必须是一个大于或等于 1 的[\](/zh-CN/SVG/Content_type#Number)。
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 b52a535b40703a..55e6f220d240df 100644
--- a/files/zh-cn/web/svg/attribute/stroke-opacity/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-opacity/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/stroke-opacity
## 用法
-| 类别 | 外观属性 |
-| ------ | -------------------------- |
+| 类别 | 外观属性 |
+| ------ | --------------------------- |
| 值 | \ \| inherit |
-| 可变性 | Yes |
+| 可变性 | Yes |
- \
- : 在当前对象的轮廓上用该涂色操作的不透明度。任何超出 0.0 到 1.0 范围的值都会被压回这个范围（0.0 表示完全透明，1.0 表示完全不透明）。
@@ -25,18 +25,18 @@ slug: Web/SVG/Attribute/stroke-opacity
```html
-
```
### CSS
```css
-rect{
- fill:#b4da55;
- stroke:#000;
- stroke-width:10px;
- stroke-opacity:0.3;
+rect {
+ fill: #b4da55;
+ stroke: #000;
+ stroke-width: 10px;
+ stroke-opacity: 0.3;
}
```
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 dc4e26c5e9b08d..81999bc29fa8f8 100644
--- a/files/zh-cn/web/svg/attribute/stroke-width/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke-width/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/stroke-width
## 用法
-| 类别 | 外观属性 |
-| ------ | ----------------------------------------------------------------------------------------------------- |
+| 类别 | 外观属性 |
+| ------ | ------------------------------------------------------------------------------------------------------------- |
| 值 | [\](/zh-CN/SVG/Content_type#Length) \| [\](/zh-CN/SVG/Content_type#Percentage) \| inherit |
-| 可变性 | Yes |
+| 可变性 | Yes |
## 示例
diff --git a/files/zh-cn/web/svg/attribute/stroke/index.md b/files/zh-cn/web/svg/attribute/stroke/index.md
index b693f429dbef9e..8631dfa7157902 100644
--- a/files/zh-cn/web/svg/attribute/stroke/index.md
+++ b/files/zh-cn/web/svg/attribute/stroke/index.md
@@ -9,10 +9,10 @@ slug: Web/SVG/Attribute/stroke
## 用法
-| 类别 | 外观属性 |
-| ------ | ------------------------------------- |
+| 类别 | 外观属性 |
+| ------ | ----------------------------------------- |
| 值 | [\](/zh-CN/SVG/Content_type#Paint) |
-| 可变性 | 是 |
+| 可变性 | 是 |
## 示例
@@ -21,8 +21,8 @@ slug: Web/SVG/Attribute/stroke
### 示例 1：用 stroke 属性画一条绿色的直线。
```html
-
-
+
```
@@ -30,7 +30,7 @@ slug: Web/SVG/Attribute/stroke
```html
-
```
diff --git a/files/zh-cn/web/svg/attribute/style/index.md b/files/zh-cn/web/svg/attribute/style/index.md
index 7683eb7c6343c6..a79e7a90558f97 100644
--- a/files/zh-cn/web/svg/attribute/style/index.md
+++ b/files/zh-cn/web/svg/attribute/style/index.md
@@ -23,8 +23,12 @@ slug: Web/SVG/Attribute/style
```html
-
```
diff --git a/files/zh-cn/web/svg/attribute/target/index.md b/files/zh-cn/web/svg/attribute/target/index.md
index be375a38d545c8..4ceb4f8665dba6 100644
--- a/files/zh-cn/web/svg/attribute/target/index.md
+++ b/files/zh-cn/web/svg/attribute/target/index.md
@@ -12,14 +12,19 @@ slug: Web/SVG/Attribute/target
## 示例
```css hidden
-html, body, svg {
- height: 100%;
+html,
+body,
+svg {
+ height: 100%;
}
text {
- font: 20px Arial, Helvetica, sans-serif;
- fill: blue;
- text-decoration: underline;
+ font:
+ 20px Arial,
+ Helvetica,
+ sans-serif;
+ fill: blue;
+ text-decoration: underline;
}
```
@@ -27,13 +32,13 @@ text {
在 iframe 中打开链接
-
+
在新标签页或窗口中打开链接
-
+
在此标签或窗口中打开链接
-
+
```
@@ -47,6 +52,7 @@ text {
| 可动画的 | 是 |
- `_replace` {{deprecated_inline}}
+
- : 当前 SVG 图像被与当前 SVG 图像在同一帧中相同矩形区域中的链接内容替换。
> **备注：** 这个值是从来没有很好的执行，之间的区别 `_replace`，并 `_self` 已通过在浏览上下文的 HTML 定义的变化变得多余。使用 `_self` 以取代目前的 SVG 文件。
@@ -58,9 +64,9 @@ text {
- `_top`
- : 完整活动窗口或选项卡的内容将由链接的内容替换（如果存在），并且可以从此文档中安全地访问
- `_blank`
- - : 如果此文档可以安全地显示，则需要一个新的未命名窗口或标签来显示链接的内容。如果用户代理不支持多个窗口/选项卡，则结果与_top 相同。
+ - : 如果此文档可以安全地显示，则需要一个新的未命名窗口或标签来显示链接的内容。如果用户代理不支持多个窗口/选项卡，则结果与\_top 相同。
- ``
- - : 指定用于显示链接内容的浏览上下文的名称（选项卡，内联框架，对象等）。如果具有该名称的上下文已经存在，并且可以从此文档中安全地访问，则可以重新使用该上下文，替换现有内容。如果不存在，则创建它（与'_blank'相同，但现在有了一个名称）。该名称必须是有效的 XML 名称 \[XML11]，并且不能以下划线（U + 005F LOW LINE 字符）开头，以满足来自 HTML 的有效浏览上下文名称的要求。
+ - : 指定用于显示链接内容的浏览上下文的名称（选项卡，内联框架，对象等）。如果具有该名称的上下文已经存在，并且可以从此文档中安全地访问，则可以重新使用该上下文，替换现有内容。如果不存在，则创建它（与'\_blank'相同，但现在有了一个名称）。该名称必须是有效的 XML 名称 \[XML11]，并且不能以下划线（U + 005F LOW LINE 字符）开头，以满足来自 HTML 的有效浏览上下文名称的要求。
## 规范
diff --git a/files/zh-cn/web/svg/attribute/text-anchor/index.md b/files/zh-cn/web/svg/attribute/text-anchor/index.md
index 0466f5d0dca633..ab244bcd9cf8ce 100644
--- a/files/zh-cn/web/svg/attribute/text-anchor/index.md
+++ b/files/zh-cn/web/svg/attribute/text-anchor/index.md
@@ -29,33 +29,36 @@ slug: Web/SVG/Attribute/text-anchor
```html
-
-
-
- A
-
- A
-
- A
-
-
-
+
+ A
+
+ A
+
+ A
+
+
+
```
diff --git a/files/zh-cn/web/svg/attribute/transform/index.md b/files/zh-cn/web/svg/attribute/transform/index.md
index f1e63831a28f50..9fac2a8efcaeb7 100644
--- a/files/zh-cn/web/svg/attribute/transform/index.md
+++ b/files/zh-cn/web/svg/attribute/transform/index.md
@@ -10,20 +10,30 @@ slug: Web/SVG/Attribute/transform
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
+
-
-
```
@@ -36,9 +46,9 @@ html,body,svg { height:100% }
另外，作为 SVG 1.1 的遗留物，{{SVGElement('linearGradient')}}和{{SVGElement('radialGradient')}}支持 `gradientTransform` 属性，而{{SVGElement('pattern')}}支持 `patternTransform` 属性，两者的行为完全相同于 `transform` 属性
| Value | **[\](/zh-CN/docs/Web/SVG/Content_type#Transform-list)** |
-| ------------- | ----------------------------------------------------------------- |
-| Default value | _none_ |
-| Animatable | Yes |
+| ------------- | ------------------------------------------------------------------------ |
+| Default value | _none_ |
+| Animatable | Yes |
## Transform functions
@@ -53,7 +63,11 @@ html,body,svg { height:100% }
#### 举例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
@@ -84,8 +98,13 @@ html,body,svg { height:100% }
newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
-->
-
```
@@ -98,7 +117,11 @@ html,body,svg { height:100% }
#### 举例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
@@ -107,16 +130,31 @@ html,body,svg { height:100% }
```
@@ -129,22 +167,23 @@ html,body,svg { height:100% }
#### 举例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
```
@@ -186,15 +233,18 @@ html,body,svg { height:100% }
#### 举例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
```
@@ -207,15 +257,18 @@ html,body,svg { height:100% }
#### 举例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
```
diff --git a/files/zh-cn/web/svg/attribute/type/index.md b/files/zh-cn/web/svg/attribute/type/index.md
index 153051db94350e..7d6a4f1022e884 100644
--- a/files/zh-cn/web/svg/attribute/type/index.md
+++ b/files/zh-cn/web/svg/attribute/type/index.md
@@ -51,7 +51,7 @@ type 属性是一个类属性，他在不同的使用语境下有不同的意思
| Categories | _None_ |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Value | \ |
+| 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) |
diff --git a/files/zh-cn/web/svg/attribute/values/index.md b/files/zh-cn/web/svg/attribute/values/index.md
index 9020e9cf9c868c..81ad40c3779aac 100644
--- a/files/zh-cn/web/svg/attribute/values/index.md
+++ b/files/zh-cn/web/svg/attribute/values/index.md
@@ -31,6 +31,7 @@ values 属性具有不同的含义，具体取决于使用的上下文，它可
| Animatable | Yes |
- ``
+
- : 该值是一个数字列表，根据 type 属性的值来定义不同解释：
- `type="matrix"`，`values` 是 20 个矩阵值（a00 a01 a02 a03 a04 a10 a11 ... a34）的列表，以空格和/或逗号分隔。
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 5a4055d436234a..9b54b9a34c8fad 100644
--- a/files/zh-cn/web/svg/attribute/vector-effect/index.md
+++ b/files/zh-cn/web/svg/attribute/vector-effect/index.md
@@ -36,15 +36,28 @@ slug: Web/SVG/Attribute/vector-effect
```html
-
```
diff --git a/files/zh-cn/web/svg/attribute/version/index.md b/files/zh-cn/web/svg/attribute/version/index.md
index 017c00add646d1..f6e63aa7f045cf 100644
--- a/files/zh-cn/web/svg/attribute/version/index.md
+++ b/files/zh-cn/web/svg/attribute/version/index.md
@@ -11,10 +11,10 @@ slug: Web/SVG/Attribute/version
## Usage context
-| 类别 | None |
-| -------- | --------------------------------------- |
+| 类别 | None |
+| -------- | ------------------------------------------- |
| 值 | [\](/zh-CN/SVG/Content_type#Number) |
-| 动画属性 | No |
+| 动画属性 | No |
## 规范
diff --git a/files/zh-cn/web/svg/attribute/y/index.md b/files/zh-cn/web/svg/attribute/y/index.md
index be029cbc51124d..46de0be3f04c39 100644
--- a/files/zh-cn/web/svg/attribute/y/index.md
+++ b/files/zh-cn/web/svg/attribute/y/index.md
@@ -1,5 +1,5 @@
---
-title: 'y'
+title: "y"
slug: Web/SVG/Attribute/y
---
diff --git a/files/zh-cn/web/svg/content_type/index.md b/files/zh-cn/web/svg/content_type/index.md
index e426f4d4a76d5e..d3f7ff486f04ea 100644
--- a/files/zh-cn/web/svg/content_type/index.md
+++ b/files/zh-cn/web/svg/content_type/index.md
@@ -10,6 +10,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 角度
- \
+
- : 可以用两种办法指定角度。如果用在样式表的属性的值中，`` 可以用如下方法定义：`plain angle ::= number (~"deg" | ~"grad" | ~"rad")?` 在这里 deg 标识了度数，grad 标识了斜率，rad 标识了弧度。对于定义在 CSS2 中的属性，必须提供一个角度单位标识符。对于在 SVG 特有的属性和它们对应的外观属性中的角度值，角度单位标识符是可选的。如果没有提供，角度值会被潜在分配一个度数单位。在所有元素的外观属性中，无论是在 SVG1.1 中定义的，还是在 CSS2 中定义的，如果指定了角度标识符，角度标识符必须是小写的。如果角度用在一个 SVG 属性中，``可以用以下方式定义：
```plain
@@ -21,6 +22,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 任意值
- \
+
- : 基本类型 \ 是一个零字符或多字符的序列。具体如下：
```plain
@@ -32,6 +34,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 时钟值
- \
+
- : 时钟值的句法与 [SMIL Animation](https://www.w3.org/TR/2001/REC-smil-animation-20010904/) 规范中写的句法相同。在这里重放一下时钟值的语法：
```
@@ -52,14 +55,17 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
对于 `Timecount` 值，默认的公制前缀是“s”（秒）。在时钟值中不能嵌入空白，而且前导和末尾的空白字符会被忽略掉。下面是合法的时钟值的示例：
- 完整时钟值：
+
- `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 秒
@@ -73,6 +79,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 颜色
- \
+
- : 基本类型\是一个 CSS2 兼容的规范，针对 sRGB 颜色空间的颜色。\ 应用在 SVG 的属性 {{SVGAttr("color")}} 上，也是属性{{SVGAttr("fill")}}、属性{{SVGAttr("stroke")}}、属性{{SVGAttr("stop-color")}}、属性 {{SVGAttr("flood-color")}}和属性{{SVGAttr("lighting-color")}}的定义的组成部分，\ 还提供了可选的基于 ICC 的颜色规范。
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/)中的 \ 句法（取决于编译器）。
@@ -99,6 +106,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 频率
- \
+
- : 频率值用在可听到的属性上。就如 CSS2 中所定义的，一个频率值是一个 [\](/zh-CN/docs/SVG/Content_type#Number) 后面跟着一个频率单位标识符。频率单位标识符可以是：
- `Hz`：赫兹
@@ -114,6 +122,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## ICC 颜色
- \
+
- : \ 一份 ICC 颜色规范。在 SVG 1.1，一份 ICC 颜色规范，顾名思义，是一个参考了一个{{SVGElement("color-profile")}} 元素，以及一个或更多颜色成分值。语法如下所示：
```plain
@@ -125,6 +134,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 整型数
- \
+
- : 用一个可选的正负符号（“+”或“-”）后面跟着一个或多个 0 到 9 的数字可以指定一个\：
```plain
@@ -136,6 +146,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## IRI
- \
+
- : 一个国际化资源标识符。在因特网上，资源是用 _IRI_（一个国际化资源标识符）标识的。举个例子，一个 SVG 文档调用了位于 `http://example.com` 上的 `someDrawing.svg`，可以使用下面的 _IRI_：
```
@@ -159,7 +170,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
然后你再引用这个线性渐变，作为矩形的属性 {{SVGAttr("fill")}} 的值，如下：
```html
-
+
- : 一个长度是一个可度量的距离，给定一个数字以及一个单位。长度可以用两种方法指定。如果在样式表中使用它，可以如下定义\：
```
@@ -200,17 +212,19 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## T 值数列
- \
+
- : （在这里*T* 某些类型。）由一系列分开的值构成的数列。除非另有说明，SVG 的 XML 属性内的数列既可以是逗号分隔的，也可以是空格分隔的。用逗号作分隔符，逗号前面或后面可有带空格。数列中的空白被定义为一个或多个下列连续字符：“空格”（U+0020）、“制表符”（U+0009）、 “换行符”（U+000A）、 “回车符”（U+000D）以及“换页符”(U+000C)。下面是一个 EBNF 语法的模板，用来描述\句法：
```plain
list-of-Ts ::= T | T, list-of-Ts
```
- 在 SVG DOM 内部，\类型的值可以用一个限特定类型 _T_ 的接口来表达。举个例子，SVG DOM 中的\使用一个 {{domxref("SVGLengthList")}} 对象或者 {{domxref("SVGAnimatedLengthList")}} 对象来表达。
+ 在 SVG DOM 内部，\类型的值可以用一个限特定类型 \_T_ 的接口来表达。举个例子，SVG DOM 中的\使用一个 {{domxref("SVGLengthList")}} 对象或者 {{domxref("SVGAnimatedLengthList")}} 对象来表达。
## 命名
- \
+
- : 一个命名，是一个字符串，是不符合句法意义的少量的字符。
```plain
@@ -220,6 +234,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 数字
- \
+
- : 真实数字可以用两种方法指定。如果用在样式表中，一个 \ 可以如下定义：`plain number ::= integer | [+-]? [0-9]* "." [0-9]+` 该句法与 CSS（CSS2 第 4.3.1 章节）中的定义一样。如果用在一个 SVG 属性中，一个 \ 可以用别的方法定义，允许一个数字后面跟着大数指数，以指定得更精确：
```plain
@@ -231,6 +246,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 带可取舍的后缀数字的数字
- \
+
- : 一对\，其中第二个 \ 是可视情况取舍的。
```plain
@@ -252,6 +268,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 百分数
- \
+
- : 一个数字后面跟着一个百分号“%”就可以指定一个百分数。
```plain
@@ -263,6 +280,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它
## 时间
- \
+
- : 一个时间值是一个 <number> 后面紧跟着时间单位标识符。时间单位标识符可以是：
- ms：毫秒
diff --git a/files/zh-cn/web/svg/element/a/index.md b/files/zh-cn/web/svg/element/a/index.md
index c7654555c2f64a..bcce3c02f23070 100644
--- a/files/zh-cn/web/svg/element/a/index.md
+++ b/files/zh-cn/web/svg/element/a/index.md
@@ -16,17 +16,15 @@ slug: Web/SVG/Element/a
## 示例
```html
-
-
-
- SVG on MDN
+
+
+ SVG on MDN
-
```
diff --git a/files/zh-cn/web/svg/element/animate/index.md b/files/zh-cn/web/svg/element/animate/index.md
index bbbeac42c62516..07eb1ec7ac8ca1 100644
--- a/files/zh-cn/web/svg/element/animate/index.md
+++ b/files/zh-cn/web/svg/element/animate/index.md
@@ -10,13 +10,23 @@ slug: Web/SVG/Element/animate
## 示例
```css hidden
-html,body,svg { height:100%; margin:0; padding:0; }
+html,
+body,
+svg {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
```
```html
-
```
diff --git a/files/zh-cn/web/svg/element/animatemotion/index.md b/files/zh-cn/web/svg/element/animatemotion/index.md
index 525e2a3adc4164..d86e591cc0fea6 100644
--- a/files/zh-cn/web/svg/element/animatemotion/index.md
+++ b/files/zh-cn/web/svg/element/animatemotion/index.md
@@ -12,7 +12,14 @@ slug: Web/SVG/Element/animateMotion
## 示例
```css
-html,body,svg { height:100%; margin: 0; padding: 0; display:block; }
+html,
+body,
+svg {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ display: block;
+}
```
```xml
diff --git a/files/zh-cn/web/svg/element/animatetransform/index.md b/files/zh-cn/web/svg/element/animatetransform/index.md
index fffed60cd886f5..deee960d0f960e 100644
--- a/files/zh-cn/web/svg/element/animatetransform/index.md
+++ b/files/zh-cn/web/svg/element/animatetransform/index.md
@@ -15,19 +15,23 @@ slug: Web/SVG/Element/animateTransform
```html
-
-
-
-
+
+
+
```
diff --git a/files/zh-cn/web/svg/element/circle/index.md b/files/zh-cn/web/svg/element/circle/index.md
index 02574d23617328..51f16fc7124720 100644
--- a/files/zh-cn/web/svg/element/circle/index.md
+++ b/files/zh-cn/web/svg/element/circle/index.md
@@ -14,12 +14,16 @@ slug: Web/SVG/Element/circle
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
```
diff --git a/files/zh-cn/web/svg/element/clippath/index.md b/files/zh-cn/web/svg/element/clippath/index.md
index 8984f842ba88fb..78dbbc89777e71 100644
--- a/files/zh-cn/web/svg/element/clippath/index.md
+++ b/files/zh-cn/web/svg/element/clippath/index.md
@@ -12,7 +12,11 @@ slug: Web/SVG/Element/clipPath
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
@@ -25,7 +29,9 @@ html,body,svg { height:100% }
- No Light
feDistantLight
-
-
feSpotLight
-
-
`** 原语创建输入图像的阴影。它只能在 {{SVGE
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
-
-
-
-
```
@@ -47,11 +51,11 @@ html,body,svg { height:100% }
## 属性
- {{SVGAttr("dx")}}
- - : 此属性定义了投影的 x 轴偏移量。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#数字)；*默认值*：`2`；*可用于动画*：**是**
+ - : 此属性定义了投影的 x 轴偏移量。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#数字)；_默认值_：`2`；_可用于动画_：**是**
- {{SVGAttr("dy")}}
- - : 此属性定义了投影的 y 轴偏移量。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#数字)；*默认值*：`2`；*可用于动画*：**是**
+ - : 此属性定义了投影的 y 轴偏移量。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#数字)；_默认值_：`2`；_可用于动画_：**是**
- {{SVGAttr("stdDeviation")}}
- - : 此属性定义了投影的模糊操作的标准差。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#数字)；*默认值*：`2`；*可用于动画*：**是**
+ - : 此属性定义了投影的模糊操作的标准差。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#数字)；_默认值_：`2`；_可用于动画_：**是**
### 全局属性
diff --git a/files/zh-cn/web/svg/element/fegaussianblur/index.md b/files/zh-cn/web/svg/element/fegaussianblur/index.md
index c73e11883ed9bc..e891a0a5dec339 100644
--- a/files/zh-cn/web/svg/element/fegaussianblur/index.md
+++ b/files/zh-cn/web/svg/element/fegaussianblur/index.md
@@ -16,18 +16,18 @@ slug: Web/SVG/Element/feGaussianBlur
### 简单示例
```html
-
-
+
-
```
@@ -38,21 +38,21 @@ slug: Web/SVG/Element/feGaussianBlur
### 投影示例
```html
-
-
+
-
-
```
diff --git a/files/zh-cn/web/svg/element/feimage/index.md b/files/zh-cn/web/svg/element/feimage/index.md
index 392000e3c933b5..4e628cf2cacbfa 100644
--- a/files/zh-cn/web/svg/element/feimage/index.md
+++ b/files/zh-cn/web/svg/element/feimage/index.md
@@ -37,16 +37,17 @@ slug: Web/SVG/Element/feImage
### SVG
```html
-
+
-
-
```
diff --git a/files/zh-cn/web/svg/element/filter/index.md b/files/zh-cn/web/svg/element/filter/index.md
index daea351186b2b4..f2c1e120192fc1 100644
--- a/files/zh-cn/web/svg/element/filter/index.md
+++ b/files/zh-cn/web/svg/element/filter/index.md
@@ -43,14 +43,13 @@ slug: Web/SVG/Element/filter
```html
-
-
+
+
-
```
diff --git a/files/zh-cn/web/svg/element/foreignobject/index.md b/files/zh-cn/web/svg/element/foreignobject/index.md
index 9e42eaf65335dc..4494c84d4d0590 100644
--- a/files/zh-cn/web/svg/element/foreignobject/index.md
+++ b/files/zh-cn/web/svg/element/foreignobject/index.md
@@ -10,17 +10,23 @@ slug: Web/SVG/Element/foreignObject
## 示例
```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+ height: 100%;
+}
```
```html
- 你不是 香蕉！
+ 你
+ 不是
+ 香蕉！
```
diff --git a/files/zh-cn/web/svg/linking/index.md b/files/zh-cn/web/svg/linking/index.md
index f4433eba3460db..f4817d6580d0d9 100644
--- a/files/zh-cn/web/svg/linking/index.md
+++ b/files/zh-cn/web/svg/linking/index.md
@@ -13,7 +13,7 @@ page1.html:
This is a SVG button:
-
```
@@ -53,16 +56,22 @@ Firefox 4 利用 [Synchronized Multimedia Integration Language](https://www.w3.o
SVG SMIL Animate with transform
+
```
@@ -82,9 +91,7 @@ Firefox 4 利用 [Synchronized Multimedia Integration Language](https://www.w3.o
SVG SMIL Animate with Path
-
```
@@ -101,10 +108,19 @@ Firefox 4 利用 [Synchronized Multimedia Integration Language](https://www.w3.o
SVG SMIL Animate with Path
+
```
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 af3fe0b9357f5b..8657ff4e220041 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
@@ -18,7 +18,10 @@ slug: Web/SVG/Tutorial/Clipping_and_masking
我们在一个圆形的基础上创建上面提到的半圆形：
```html
-
+
+
-
@@ -73,9 +79,21 @@ slug: Web/SVG/Tutorial/Clipping_and_masking
上面的矩形将绘制为半透明。填充和描边还有两个属性是`fill-opacity`和`stroke-opacity`，分别用来控制填充和描边的不透明度。需要注意的是描边将绘制在填充的上面。因此，如果你在一个元素上设置了描边透明度，但它同时设有填充，则描边的一半应用填充色，另一半将应用背景色。
```html
-
+
```
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 b9eec9062ea758..bbaf3e62ac2d08 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
@@ -121,10 +121,10 @@ CSS 可以利用 style 属性插入到元素的行间：
如上把样式放到一块你可以更轻松地调整一大组元素的样式，同样你也可以使用**hover**这样的伪类来创建翻转之类的效果：
```css
- #MyRect:hover {
- stroke: black;
- fill: blue;
- }
+#MyRect:hover {
+ stroke: black;
+ fill: blue;
+}
```
你最好读一下 CSS 教程以便掌握它，一些可以在 HTML 里使用的 CSS，在 svg 里可能无法正常工作，比如`before`和`after`伪类。所以这里需要一点经验。
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 03f246db27a9f9..1c2142faa17c23 100644
--- a/files/zh-cn/web/svg/tutorial/filter_effects/index.md
+++ b/files/zh-cn/web/svg/tutorial/filter_effects/index.md
@@ -16,45 +16,70 @@ slug: Web/SVG/Tutorial/Filter_effects
滤镜通过 {{SVGElement('filter')}} 元素进行定义，并且置于 `` 区块中。在 `filter` 标签中提供一系列*图元*（_primitives_），以及在前一个基本变换操作上建立的另一个操作（比如添加模糊后又添加明亮效果）。如果要应用所创建的滤镜效果，只需要为 SVG 图形元素设置 {{SVGAttr('filter')}} 属性即可。
```html
-
+
-
-
+
-
-
+
-
-
-
- SVG
-
+
+ SVG
+
```
@@ -64,9 +89,7 @@ slug: Web/SVG/Tutorial/Filter_effects
### 步骤 1
```html
-
-
+
```
@@ -97,9 +121,7 @@ slug: Web/SVG/Tutorial/Filter_effects
### 步骤 4
```html
-
-
-
-
-
-
+
+
+
+
+
-
```
@@ -49,7 +57,7 @@ slug: Web/SVG/Tutorial/Gradients
以上是一个应用了线性渐变的``元素的示例。线性渐变内部有几个{{SVGElement('stop')}} 结点，这些结点通过指定位置的 offset（偏移）属性和 stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；可以直接指定这两个属性值，也可以通过 CSS 来指定他们的值，该例子中混合使用了这两种方法。例如：该示例中指明了渐变开始颜色为红色，到中间位置时变成半透明的黑色，最后变成蓝色。虽然你可以根据需求按照自己的喜好插入很多中间颜色，但是偏移量应该始终从 0% 开始（或者 0 也可以，百分号可以扔掉），到 100%（或 1）结束。如果`stop`设置的位置有重合，将使用 XML 树中较晚设置的值。而且，类似于填充和描边，你也可以指定属性`stop-opacity`来设置某个位置的半透明度（同样，对于 FF3 你也可以设置 rgba 值）。
```html
- ` 元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制，它们分别是属性 x1、x2、y1 和 y2，这些属性定义了渐变路线走向。渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。下例中的 Gradient2 创建了一个垂直渐变。
```html
-
+
->
-> xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+> id="Gradient2"
+> x1="0"
+> x2="0"
+> y1="0"
+> y2="1"
+> xmlns:xlink="http://www.w3.org/1999/xlink"
+> xlink:href="#Gradient1" />
> ```
>
> 尽管通常你可能在文档的顶部就定义了 Gradient1，但我在结点上直接包含了 xlink 的命名空间，关于这点的更多信息我们会在[讨论图片](/zh-CN/Web/SVG/Tutorial/Other_content_in_SVG)的时候详解。
@@ -84,19 +98,32 @@ slug: Web/SVG/Tutorial/Gradients
-
-
-
-
+
+
+
+
-
```
@@ -111,25 +138,40 @@ slug: Web/SVG/Tutorial/Gradients
```html
-
+
-
-
+
+
- (fx,fy)
- (cx,cy)
-
+
+ (fx,fy)
+
+
+ (cx,cy)
+
```
@@ -146,34 +188,75 @@ slug: Web/SVG/Tutorial/Gradients
-
-
-
-
-
-
+
+
+
+
+
+
- Pad
- Repeat
- Reflect
-
+
+ Pad
+
+
+ Repeat
+
+
+ Reflect
+
```
diff --git a/files/zh-cn/web/svg/tutorial/patterns/index.md b/files/zh-cn/web/svg/tutorial/patterns/index.md
index 2cf4f5d32c390b..e8deda164b5b95 100644
--- a/files/zh-cn/web/svg/tutorial/patterns/index.md
+++ b/files/zh-cn/web/svg/tutorial/patterns/index.md
@@ -16,23 +16,33 @@ slug: Web/SVG/Tutorial/Patterns
-
-
-
-
-
```
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 bf7b0829ff5d28..aeafeae53f2910 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
@@ -16,119 +16,133 @@ slug: Web/SVG/Tutorial/SVG_and_CSS
建立一个 SVG 文件 `doc8.svg`。复制下面所有内容：
```html
-
-
-
+ SVG demonstration
Mozilla CSS Getting Started - SVG demonstration
-
-
+
SVG demonstration
- Move your mouse pointer over the flower.
+
+ Move your mouse pointer over the flower.
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -136,93 +150,93 @@ slug: Web/SVG/Tutorial/SVG_and_CSS
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -287,7 +301,7 @@ svg {
/* outer petals */
#outer-petals {
- opacity: .75;
+ opacity: 0.75;
--segment-fill-fill: azure;
--segment-fill-stroke: lightsteelblue;
--segment-fill-stroke-width: 1;