From 3a212da7d535a0562dc912686a100fb6ff9f1ce5 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Fri, 28 Jul 2023 02:23:35 -0700 Subject: [PATCH] zh-cn: Format /web/svg using Prettier --- .prettierignore | 1 - .../index.md | 131 ++++++---- .../web/svg/attribute/attributename/index.md | 2 +- .../web/svg/attribute/baseline-shift/index.md | 8 +- .../web/svg/attribute/baseprofile/index.md | 10 +- files/zh-cn/web/svg/attribute/begin/index.md | 2 +- .../web/svg/attribute/clip-path/index.md | 48 +++- files/zh-cn/web/svg/attribute/clip/index.md | 18 +- files/zh-cn/web/svg/attribute/color/index.md | 10 +- files/zh-cn/web/svg/attribute/cx/index.md | 70 +++-- files/zh-cn/web/svg/attribute/cy/index.md | 70 +++-- files/zh-cn/web/svg/attribute/d/index.md | 194 +++++++++----- .../zh-cn/web/svg/attribute/display/index.md | 18 +- files/zh-cn/web/svg/attribute/dur/index.md | 2 +- files/zh-cn/web/svg/attribute/dx/index.md | 8 +- files/zh-cn/web/svg/attribute/end/index.md | 2 +- .../web/svg/attribute/fill-opacity/index.md | 2 +- .../web/svg/attribute/fill-rule/index.md | 74 ++++-- files/zh-cn/web/svg/attribute/fill/index.md | 2 +- files/zh-cn/web/svg/attribute/filter/index.md | 2 +- .../web/svg/attribute/font-family/index.md | 8 +- files/zh-cn/web/svg/attribute/fr/index.md | 54 ++-- files/zh-cn/web/svg/attribute/from/index.md | 2 +- files/zh-cn/web/svg/attribute/fx/index.md | 47 ++-- files/zh-cn/web/svg/attribute/height/index.md | 11 +- files/zh-cn/web/svg/attribute/id/index.md | 9 +- files/zh-cn/web/svg/attribute/in/index.md | 74 ++++-- .../web/svg/attribute/kernelmatrix/index.md | 6 +- .../zh-cn/web/svg/attribute/keytimes/index.md | 46 ++-- .../web/svg/attribute/letter-spacing/index.md | 10 +- .../web/svg/attribute/marker-end/index.md | 27 +- .../web/svg/attribute/marker-start/index.md | 27 +- files/zh-cn/web/svg/attribute/mask/index.md | 6 +- files/zh-cn/web/svg/attribute/max/index.md | 22 +- files/zh-cn/web/svg/attribute/media/index.md | 12 +- .../zh-cn/web/svg/attribute/opacity/index.md | 6 +- files/zh-cn/web/svg/attribute/order/index.md | 6 +- .../web/svg/attribute/pathlength/index.md | 70 ++--- .../web/svg/attribute/patternunits/index.md | 30 ++- .../web/svg/attribute/pointer-events/index.md | 22 +- files/zh-cn/web/svg/attribute/points/index.md | 6 +- .../attribute/preserveaspectratio/index.md | 9 +- files/zh-cn/web/svg/attribute/r/index.md | 32 ++- files/zh-cn/web/svg/attribute/radius/index.md | 6 +- files/zh-cn/web/svg/attribute/result/index.md | 6 +- files/zh-cn/web/svg/attribute/rx/index.md | 26 +- files/zh-cn/web/svg/attribute/scale/index.md | 6 +- files/zh-cn/web/svg/attribute/seed/index.md | 6 +- .../svg/attribute/stroke-dasharray/index.md | 55 ++-- .../svg/attribute/stroke-dashoffset/index.md | 8 +- .../web/svg/attribute/stroke-linecap/index.md | 52 ++-- .../svg/attribute/stroke-linejoin/index.md | 177 +++++++++---- .../svg/attribute/stroke-miterlimit/index.md | 8 +- .../web/svg/attribute/stroke-opacity/index.md | 18 +- .../web/svg/attribute/stroke-width/index.md | 6 +- files/zh-cn/web/svg/attribute/stroke/index.md | 12 +- files/zh-cn/web/svg/attribute/style/index.md | 8 +- files/zh-cn/web/svg/attribute/target/index.md | 26 +- .../web/svg/attribute/text-anchor/index.md | 57 +++-- .../web/svg/attribute/transform/index.md | 127 ++++++--- files/zh-cn/web/svg/attribute/type/index.md | 2 +- files/zh-cn/web/svg/attribute/values/index.md | 1 + .../web/svg/attribute/vector-effect/index.md | 23 +- .../zh-cn/web/svg/attribute/version/index.md | 6 +- files/zh-cn/web/svg/attribute/y/index.md | 2 +- files/zh-cn/web/svg/content_type/index.md | 22 +- files/zh-cn/web/svg/element/a/index.md | 18 +- files/zh-cn/web/svg/element/animate/index.md | 14 +- .../web/svg/element/animatemotion/index.md | 9 +- .../web/svg/element/animatetransform/index.md | 30 ++- files/zh-cn/web/svg/element/circle/index.md | 8 +- files/zh-cn/web/svg/element/clippath/index.md | 19 +- files/zh-cn/web/svg/element/feblend/index.md | 29 ++- .../web/svg/element/fecolormatrix/index.md | 42 ++- .../svg/element/fecomponenttransfer/index.md | 36 ++- .../svg/element/fediffuselighting/index.md | 43 +++- .../web/svg/element/fedropshadow/index.md | 34 +-- .../web/svg/element/fegaussianblur/index.md | 30 +-- files/zh-cn/web/svg/element/feimage/index.md | 11 +- files/zh-cn/web/svg/element/filter/index.md | 11 +- .../web/svg/element/foreignobject/index.md | 19 +- files/zh-cn/web/svg/element/g/index.md | 7 +- files/zh-cn/web/svg/element/image/index.md | 16 +- .../web/svg/element/lineargradient/index.md | 14 +- files/zh-cn/web/svg/element/marker/index.md | 16 +- files/zh-cn/web/svg/element/mpath/index.md | 45 ++-- files/zh-cn/web/svg/element/path/index.md | 6 +- .../web/svg/element/radialgradient/index.md | 22 +- files/zh-cn/web/svg/element/rect/index.md | 6 +- files/zh-cn/web/svg/element/script/index.md | 16 +- files/zh-cn/web/svg/element/stop/index.md | 21 +- files/zh-cn/web/svg/element/style/index.md | 7 +- files/zh-cn/web/svg/element/svg/index.md | 28 +- files/zh-cn/web/svg/element/symbol/index.md | 29 ++- files/zh-cn/web/svg/element/textpath/index.md | 26 +- files/zh-cn/web/svg/element/tspan/index.md | 4 +- files/zh-cn/web/svg/linking/index.md | 2 +- .../web/svg/svg_animation_with_smil/index.md | 50 ++-- .../tutorial/clipping_and_masking/index.md | 28 +- .../svg/tutorial/fills_and_strokes/index.md | 8 +- .../web/svg/tutorial/filter_effects/index.md | 98 ++++--- .../web/svg/tutorial/getting_started/index.md | 6 +- .../zh-cn/web/svg/tutorial/gradients/index.md | 241 ++++++++++++------ .../zh-cn/web/svg/tutorial/patterns/index.md | 28 +- .../web/svg/tutorial/svg_and_css/index.md | 198 +++++++------- 105 files changed, 2026 insertions(+), 1125 deletions(-) diff --git a/.prettierignore b/.prettierignore index 673b43dfe86422..0d3093865c5658 100644 --- a/.prettierignore +++ b/.prettierignore @@ -97,4 +97,3 @@ build/ /files/zh-cn/web/html/**/*.md /files/zh-cn/web/http/**/*.md /files/zh-cn/web/javascript/reference/**/*.md -/files/zh-cn/web/svg/**/*.md 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 85dfae74cc4811..716e02f2234db6 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 @@ -16,7 +16,11 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content 要想在 CSS 样式中应用 SVG 效果，首先需要创建一个引用 SVG 的 CSS 样式。 ```html - + ``` 在上面的例子中，所有段落会被 [ID](/zh-CN/docs/Web/HTML/Global_attributes/id) 为 `my-mask` 的 [SVG ``](/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.

- - + + ``` @@ -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 - - @@ -433,7 +461,7 @@ html,body,svg { height:100% } - 终点控制点 - : (_Pce_ = {_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 - - + - @@ -778,23 +829,31 @@ html,body,svg { height:100% } - - + + - + - + - + @@ -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 - + + + + + + + + + + + + + + ``` 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 --> - + - + - + - + - - + - - - + + + @@ -102,22 +123,32 @@ html,body,svg { height:100% } #### 示例 ```css hidden -html,body,svg { height:100% } +html, +body, +svg { + height: 100%; +} ``` ```html - + - + @@ -134,22 +165,28 @@ The `bevel` 用斜角连接路径段。 #### 示例 ```css hidden -html,body,svg { height:100% } +html, +body, +svg { + height: 100%; +} ``` ```html - + - + @@ -168,23 +205,37 @@ The `miter` 用尖角连接路径段。通过在路径段的切线处延伸笔 #### 示例 ```css hidden -html,body,svg { height:100% } +html, +body, +svg { + height: 100%; +} ``` ```html - + - + - + @@ -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 - + - + 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 d6c33c713773a3..14121463e4c459 100644 --- a/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md +++ b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.md @@ -17,11 +17,11 @@ miterLength / stroke-width = 1 / sin ( theta / 2 ) ## 用法 -| 类别 | 外观属性 | -| ------ | ----------------------- | +| 类别 | 外观属性 | +| ------ | ------------------------ | | 值 | \ \| 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 - + - + - + @@ -160,7 +199,11 @@ html,body,svg { height:100% } #### 举例 ```css hidden -html,body,svg { height:100% } +html, +body, +svg { + height: 100%; +} ``` ```html @@ -168,12 +211,16 @@ html,body,svg { height:100% } - + - + ``` @@ -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 - + ``` SVG 支持两种类型的 _IRI_ 引用： @@ -172,6 +183,7 @@ SVG 中使用了许多数据类型。本文列出了这些数据类型以及它 ## 长度 - \ + - : 一个长度是一个可度量的距离，给定一个数字以及一个单位。长度可以用两种方法指定。如果在样式表中使用它，可以如下定义\： ``` @@ -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 中使用了许多数据类型。本文列出了这些数据类型以及它 ## 时间 - \
- 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. + 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.
diff --git a/files/zh-cn/web/svg/element/g/index.md b/files/zh-cn/web/svg/element/g/index.md index 204ee36855a92e..00550aa633711d 100644 --- a/files/zh-cn/web/svg/element/g/index.md +++ b/files/zh-cn/web/svg/element/g/index.md @@ -14,8 +14,11 @@ slug: Web/SVG/Element/g ## 示例 ```html - + diff --git a/files/zh-cn/web/svg/element/image/index.md b/files/zh-cn/web/svg/element/image/index.md index e261ff6380da9f..c563a26b2ab7b4 100644 --- a/files/zh-cn/web/svg/element/image/index.md +++ b/files/zh-cn/web/svg/element/image/index.md @@ -49,10 +49,18 @@ SVG 文件是这样的一种图像：不被当做外部资源加载，不可以 在 SVG 对象中基本呈现 PNG 图像： ```html - - + + ``` diff --git a/files/zh-cn/web/svg/element/lineargradient/index.md b/files/zh-cn/web/svg/element/lineargradient/index.md index 714f1c51f9dd19..d3aa3ac847e406 100644 --- a/files/zh-cn/web/svg/element/lineargradient/index.md +++ b/files/zh-cn/web/svg/element/lineargradient/index.md @@ -14,15 +14,21 @@ slug: Web/SVG/Element/linearGradient ## 示例 ```css hidden -html,body,svg { height:100% } +html, +body, +svg { + height: 100%; +} ``` ```html - + - + diff --git a/files/zh-cn/web/svg/element/marker/index.md b/files/zh-cn/web/svg/element/marker/index.md index c16295c227d74a..8ca23f80e804e7 100644 --- a/files/zh-cn/web/svg/element/marker/index.md +++ b/files/zh-cn/web/svg/element/marker/index.md @@ -164,24 +164,24 @@ svg { ## 属性 - {{SVGAttr("markerHeight")}} - - : 该属性定义了 marker 视口的高度。*值的类型*：**[\](/zh-CN/docs/Web/SVG/Content_type#长度)**；*默认值*：`3`；*动画性*：**有** + - : 该属性定义了 marker 视口的高度。_值的类型_：**[\](/zh-CN/docs/Web/SVG/Content_type#长度)**；_默认值_：`3`；_动画性_：**有** - {{SVGAttr("markerUnits")}} - - : 该属性为 `markerWidth`、`markerHeight` 和 `` 的内容定义了坐标系。*值的类型*：`userSpaceOnUse`|`strokeWidth` ；*默认值*：`strokeWidth`；*动画性*：**有** + - : 该属性为 `markerWidth`、`markerHeight` 和 `` 的内容定义了坐标系。_值的类型_：`userSpaceOnUse`|`strokeWidth` ；_默认值_：`strokeWidth`；_动画性_：**有** - {{SVGAttr("markerWidth")}} - - : 该属性定义了 marker 视图的宽度。*值的类型*：**[\](/zh-CN/docs/Web/SVG/Content_type#长度)** ；*默认值*：`3`；*动画性*：**有** + - : 该属性定义了 marker 视图的宽度。_值的类型_：**[\](/zh-CN/docs/Web/SVG/Content_type#长度)** ；_默认值_：`3`；_动画性_：**有** - {{SVGAttr("orient")}} - - : 该属性定义了 marker 相对于它所附着到形状的方向。*值的类型*：`auto`|`auto-start-reverse`|**[\](/zh-CN/docs/Web/SVG/Content_type#角度)** ；*默认值*：`0`；*动画性*：**有** + - : 该属性定义了 marker 相对于它所附着到形状的方向。_值的类型_：`auto`|`auto-start-reverse`|**[\](/zh-CN/docs/Web/SVG/Content_type#角度)** ；_默认值_：`0`；_动画性_：**有** - {{SVGAttr("preserveAspectRatio")}} - - : 该属性定义了 svg 片段在嵌入具有不同宽高比例的容器中应该如何变形。*值的类型*：(`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ；*默认值*：`xMidYMid meet`；*动画性*：**有** + - : 该属性定义了 svg 片段在嵌入具有不同宽高比例的容器中应该如何变形。_值的类型_：(`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ；_默认值_：`xMidYMid meet`；_动画性_：**有** - {{SVGAttr("refX")}} - : 该属性定义了标记参考点的 x 的坐标。 - *值的类型*：`left`|`center`|`right`|**[\](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；*默认值*：`0`；*动画性*：**有** + _值的类型_：`left`|`center`|`right`|**[\](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；_默认值_：`0`；_动画性_：**有** - {{SVGAttr("refY")}} - : 该属性定义了标记参考点的 y 的坐标。 - *值的类型*：`top`|`center`|`bottom`|**[\](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；*默认值*：`0`；*动画性*：**有** + _值的类型_：`top`|`center`|`bottom`|**[\](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；_默认值_：`0`；_动画性_：**有** - {{SVGAttr("viewBox")}} - : 该属性定义了当前 SVG 片段的 SVG 视口边界。 - *值的类型*：**[\](/zh-CN/docs/Web/SVG/Content_type#t值数列)** ；*默认值*：none；*动画性*：**有** + _值的类型_：**[\](/zh-CN/docs/Web/SVG/Content_type#t值数列)** ；_默认值_：none；_动画性_：**有** ### 全局属性 diff --git a/files/zh-cn/web/svg/element/mpath/index.md b/files/zh-cn/web/svg/element/mpath/index.md index 373c6d2dd93b30..12a784c2d8edb7 100644 --- a/files/zh-cn/web/svg/element/mpath/index.md +++ b/files/zh-cn/web/svg/element/mpath/index.md @@ -14,29 +14,44 @@ slug: Web/SVG/Element/mpath ## 示例 ```html - - - + + - - - - + + + + - + - - + + diff --git a/files/zh-cn/web/svg/element/path/index.md b/files/zh-cn/web/svg/element/path/index.md index 7db306653f19de..25dfe7e497626c 100644 --- a/files/zh-cn/web/svg/element/path/index.md +++ b/files/zh-cn/web/svg/element/path/index.md @@ -17,7 +17,11 @@ path 元素是用来定义形状的通用元素。所有的基本形状都可以 ## 示例 ```css hidden -html,body,svg { height:100% } +html, +body, +svg { + height: 100%; +} ``` ```html diff --git a/files/zh-cn/web/svg/element/radialgradient/index.md b/files/zh-cn/web/svg/element/radialgradient/index.md index 1d69420bfd07ca..80e792e8b683e0 100644 --- a/files/zh-cn/web/svg/element/radialgradient/index.md +++ b/files/zh-cn/web/svg/element/radialgradient/index.md @@ -41,27 +41,27 @@ svg { ## 属性 - {{SVGAttr("cx")}} - - : 这个属性定义了径向渐变的终点圆的 X 坐标。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`50%`；*动画性*：**有** + - : 这个属性定义了径向渐变的终点圆的 X 坐标。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：`50%`；_动画性_：**有** - {{SVGAttr("cy")}} - - : 这个属性定义了径向渐变的终点圆的 Y 坐标。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`50%`；*动画性*：**有** + - : 这个属性定义了径向渐变的终点圆的 Y 坐标。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：`50%`；_动画性_：**有** - {{SVGAttr("fr")}} - - : 这个属性定义了径向梯度的起点圆的半径。渐变的绘制将使 0% {{SVGElement('stop','gradient stop')}} 被映射到起始圆的周长。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`0%`；*动画性*：**有** + - : 这个属性定义了径向梯度的起点圆的半径。渐变的绘制将使 0% {{SVGElement('stop','gradient stop')}} 被映射到起始圆的周长。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：`0%`；_动画性_：**有** - {{SVGAttr("fx")}} - - : 这个属性定义了径向渐变的起点圆的 X 坐标。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：与 `cx` 相同；*动画性*：**有** + - : 这个属性定义了径向渐变的起点圆的 X 坐标。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：与 `cx` 相同；_动画性_：**有** - {{SVGAttr("fy")}} - - : 这个属性定义了径向渐变的起点圆的 Y 坐标。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：与 `cy` 相同；*动画性*：**有** + - : 这个属性定义了径向渐变的起点圆的 Y 坐标。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：与 `cy` 相同；_动画性_：**有** - {{SVGAttr("gradientUnits")}} - - : 这个属性定义了 `cx`、`cy`、`r`、`fx`、`fy`、`fr` 属性的坐标系统；*值类型*：`userSpaceOnUse`|`objectBoundingBox`；*默认值*：`objectBoundingBox`；*动画性*：**有** + - : 这个属性定义了 `cx`、`cy`、`r`、`fx`、`fy`、`fr` 属性的坐标系统；_值类型_：`userSpaceOnUse`|`objectBoundingBox`；_默认值_：`objectBoundingBox`；_动画性_：**有** - {{SVGAttr("gradientTransform")}} - - : 这个属性为梯度坐标系提供了额外的[变换](/zh-CN/docs/Web/SVG/Atribute/transform)。*值类型*：**[\](/zh-CN/docs/Web/SVG/Content_type#transform-list)** ；*默认值*：*identity transform*；*动画性*：**有** + - : 这个属性为梯度坐标系提供了额外的[变换](/zh-CN/docs/Web/SVG/Atribute/transform)。_值类型_：**[\](/zh-CN/docs/Web/SVG/Content_type#transform-list)** ；_默认值_：_identity transform_；_动画性_：**有** - {{SVGAttr("href")}} - - : 这个属性定义了对另一个将被用作模板 `` 元素的引用。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#url)；*默认值*：none；*动画性*：**有** + - : 这个属性定义了对另一个将被用作模板 `` 元素的引用。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#url)；_默认值_：none；_动画性_：**有** - {{SVGAttr("r")}} - - : 这个属性定义了径向渐变的终点圆的半径。梯度的绘制将使 100% 的{{SVGElement('stop','gradient stop')}} 被映射到终点圆的周长。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；*默认值*：`50%`；*动画性*：**有** + - : 这个属性定义了径向渐变的终点圆的半径。梯度的绘制将使 100% 的{{SVGElement('stop','gradient stop')}} 被映射到终点圆的周长。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#长度)；_默认值_：`50%`；_动画性_：**有** - {{SVGAttr("spreadMethod")}} - - : 这个属性表明，如果渐变在包含渐变的形状的边界内开始或结束，它将如何表现。*值类型*：`pad`|`reflect`|`repeat`；*默认值*：`pad`；*动画性*：**有** + - : 这个属性表明，如果渐变在包含渐变的形状的边界内开始或结束，它将如何表现。_值类型_：`pad`|`reflect`|`repeat`；_默认值_：`pad`；_动画性_：**有** - {{SVGAttr("xlink:href")}} - - : {{Deprecated_Header}}对另一个将被用作模板的 `` 元素的 [\](/zh-CN/docs/Web/SVG/Content_type#iri) 引用。*值类型*：[**\**](/zh-CN/docs/Web/SVG/Content_type#iri)；*默认值*：none；*动画性*：**有** + - : {{Deprecated_Header}}对另一个将被用作模板的 `` 元素的 [\](/zh-CN/docs/Web/SVG/Content_type#iri) 引用。_值类型_：[**\**](/zh-CN/docs/Web/SVG/Content_type#iri)；_默认值_：none；_动画性_：**有** ### 全局属性 diff --git a/files/zh-cn/web/svg/element/rect/index.md b/files/zh-cn/web/svg/element/rect/index.md index 6be358f804dbbd..a3793a8d075945 100644 --- a/files/zh-cn/web/svg/element/rect/index.md +++ b/files/zh-cn/web/svg/element/rect/index.md @@ -14,7 +14,11 @@ slug: Web/SVG/Element/rect ## 示例 ```css hidden -html,body,svg { height:100% } +html, +body, +svg { + height: 100%; +} ``` ```html diff --git a/files/zh-cn/web/svg/element/script/index.md b/files/zh-cn/web/svg/element/script/index.md index 51cdbc96df892c..9b4660b91a12e0 100644 --- a/files/zh-cn/web/svg/element/script/index.md +++ b/files/zh-cn/web/svg/element/script/index.md @@ -16,8 +16,11 @@ slug: Web/SVG/Element/script 下面的代码片段演示了 SVG `script`标签的作用。在代码中，我们使用 JavaScript 改变 SVG {{SVGElement("circle")}} 元素的半径。 ```html - + - + ``` diff --git a/files/zh-cn/web/svg/element/stop/index.md b/files/zh-cn/web/svg/element/stop/index.md index 0e1ef0c8c7538c..c252db3a2ef812 100644 --- a/files/zh-cn/web/svg/element/stop/index.md +++ b/files/zh-cn/web/svg/element/stop/index.md @@ -14,9 +14,11 @@ slug: Web/SVG/Element/stop ## 示例 ```html - - + @@ -25,12 +27,17 @@ slug: Web/SVG/Element/stop - + - + ``` diff --git a/files/zh-cn/web/svg/element/style/index.md b/files/zh-cn/web/svg/element/style/index.md index bb6bd3eb72b4f7..fc5d5e4aa7d2e4 100644 --- a/files/zh-cn/web/svg/element/style/index.md +++ b/files/zh-cn/web/svg/element/style/index.md @@ -14,8 +14,11 @@ slug: Web/SVG/Element/style ## 示例 ```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 - + ``` 使用渐变时，我们需要在一个对象的属性`fill`或属性`stroke`中引用它，这跟你在 CSS 中使用`url`引用元素的方法一样。在本例中，url 只是一个渐变的引用，我们已经给这个渐变一个 ID——“Gradient”。要想附加它，将属性`fill`设置为`url(#Gradient)`即可。现在对象就变成多色的了，也可以用同样的方式处理`stroke`。 @@ -57,19 +65,25 @@ slug: Web/SVG/Tutorial/Gradients `` 元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制，它们分别是属性 x1、x2、y1 和 y2，这些属性定义了渐变路线走向。渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。下例中的 Gradient2 创建了一个垂直渐变。 ```html - + ``` > **备注：** 你也可以在渐变上使用`xlink:href 属性。如果`使用了该属性时，一个渐变的属性和颜色中值（stop）可以被另一个渐变包含引用。在下例中，你就不需要在 Grandient2 中重新创建全部的颜色中值（stop）。 > > ```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;