zh-cn: Format /web/svg using Prettier

mdn · Jul 28, 2023 · 3a212da · 3a212da
1 parent 5ffbcae
commit 3a212da
Show file tree

Hide file tree

Showing 105 changed files with 2,026 additions and 1,125 deletions.
diff --git 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
@@ -16,7 +16,11 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content
 要想在 CSS 样式中应用 SVG 效果，首先需要创建一个引用 SVG 的 CSS 样式。
 
 ```html
-<style>p { mask: url(#my-mask); }</style>
+<style>
+  p {
+    mask: url(#my-mask);
+  }
+</style>
 ```
 
 在上面的例子中，所有段落会被 [ID](/zh-CN/docs/Web/HTML/Global_attributes/id) 为 `my-mask` 的 [SVG `<mask>`](/zh-CN/docs/Web/SVG/Element/mask) 遮罩。
@@ -29,11 +33,11 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content
 <svg height="0">
   <mask id="mask-1">
     <linearGradient id="gradient-1" y2="1">
-      <stop stop-color="white" offset="0"/>
-      <stop stop-opacity="0" offset="1"/>
+      <stop stop-color="white" offset="0" />
+      <stop stop-opacity="0" offset="1" />
     </linearGradient>
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
+    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
   </mask>
 </svg>
 ```
@@ -55,14 +59,15 @@ p {
 
 ```html
 <p class="target" style="background:lime;">
-    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.
 </p>
 <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing
+  <b class="target"
+    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
+  >
+  Ut enim ad minim veniam.
 </p>
 ```
 
@@ -76,22 +81,23 @@ p {
 
 ```html
 <p class="target" style="background:lime;">
-    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.
 </p>
 <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing
+  <b class="target"
+    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
+  >
+  Ut enim ad minim veniam.
 </p>
 
 <button onclick="toggleRadius()">Toggle radius</button>
 
 <svg height="0">
   <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
-    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
+    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
   </clipPath>
 </svg>
 ```
@@ -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
 <p class="target" style="background: lime;">
-    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.
 </p>
 <pre class="target">lorem</pre>
 <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing
+  <b class="target"
+    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
+  >
+  Ut enim ad minim veniam.
 </p>
 ```
 
@@ -143,7 +150,7 @@ function toggleRadius() {
 ```html
 <svg height="0">
   <filter id="f1">
-    <feGaussianBlur stdDeviation="3"/>
+    <feGaussianBlur stdDeviation="3" />
   </filter>
 </svg>
 ```
@@ -153,10 +160,11 @@ function toggleRadius() {
 ```html
 <svg height="0">
   <filter id="f2">
-    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0      0      0      1 0"/>
+    <feColorMatrix
+      values="0.3333 0.3333 0.3333 0 0
+              0.3333 0.3333 0.3333 0 0
+              0.3333 0.3333 0.3333 0 0
+              0      0      0      1 0" />
   </filter>
 </svg>
 ```
@@ -166,33 +174,54 @@ function toggleRadius() {
 ```html
 <svg height="0">
   <filter id="f3">
-    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
-      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
+    <feConvolveMatrix
+      filterRes="100 100"
+      style="color-interpolation-filters:sRGB"
+      order="3"
+      kernelMatrix="0 -1 0   -1 4 -1   0 -1 0"
+      preserveAlpha="true" />
   </filter>
   <filter id="f4">
-    <feSpecularLighting surfaceScale="5" specularConstant="1"
-                        specularExponent="10" lighting-color="white">
-      <fePointLight x="-5000" y="-10000" z="20000"/>
+    <feSpecularLighting
+      surfaceScale="5"
+      specularConstant="1"
+      specularExponent="10"
+      lighting-color="white">
+      <fePointLight x="-5000" y="-10000" z="20000" />
     </feSpecularLighting>
   </filter>
   <filter id="f5">
-    <feColorMatrix values="1 0 0 0 0
-                           0 1 0 0 0
-                           0 0 1 0 0
-                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
+    <feColorMatrix
+      values="1 0 0 0 0
+              0 1 0 0 0
+              0 0 1 0 0
+              0 1 0 0 0"
+      style="color-interpolation-filters:sRGB" />
   </filter>
 </svg>
 ```
 
 使用以下 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); }
 <svg height="0">
   <defs>
     <filter id="wherearemyglasses" x="0" y="0">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
+      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
     </filter>
   </defs>
 </svg>
@@ -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
@@ -11,7 +11,7 @@ slug: Web/SVG/Attribute/attributeName
 
 | 类别     | 动画属性目标属性                                                                      |
 | -------- | ------------------------------------------------------------------------------------- |
-| 值       | \<attributeName>                                                                       |
+| 值       | \<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
@@ -11,11 +11,11 @@ slug: Web/SVG/Attribute/baseline-shift
 
 ## 用法
 
-| 类别     | 外观属性                                                                                                   |
-| -------- | ---------------------------------------------------------------------------------------------------------- |
+| 类别     | 外观属性                                                                                                        |
+| -------- | --------------------------------------------------------------------------------------------------------------- |
 | 值       | **auto** \| baseline \| super \| sub \| \<percentage> \| [\<length>](/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
@@ -29,11 +29,13 @@ slug: Web/SVG/Attribute/baseProfile
 ## 例子
 
 ```html
-<svg width="120" height="120" version="1.1"
- xmlns="http://www.w3.org/2000/svg" baseProfile="full">
-
+<svg
+  width="120"
+  height="120"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  baseProfile="full">
   ...
-
 </svg>
 ```
 

diff --git 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
 
 | 类别     | 动画定时属性                                                                  |
 | -------- | ----------------------------------------------------------------------------- |
-| 值       | \<begin-value-list>                                                            |
+| 值       | \<begin-value-list>                                                           |
 | 可变性   | 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
@@ -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% }
   </clipPath>
 
   <!-- 左上：应用自定义的剪切路径 -->
-  <rect x="1" y="1" width="8" height="8" stroke="green"
-        clip-path="url(#myClip)" />
+  <rect
+    x="1"
+    y="1"
+    width="8"
+    height="8"
+    stroke="green"
+    clip-path="url(#myClip)" />
 
   <!-- 右上：应用 CSS 基本形状和 fill-box 几何。
        实质上和自定义剪切路径并把 clipPathUnits
        设成 objectBoundingBox 一样 -->
-  <rect x="11" y="1" width="8" height="8" stroke="green"
-        clip-path="circle() fill-box" />
+  <rect
+    x="11"
+    y="1"
+    width="8"
+    height="8"
+    stroke="green"
+    clip-path="circle() fill-box" />
 
   <!-- 左下 -->
-  <rect x="1" y="11" width="8" height="8" stroke="green"
-        clip-path="circle() stroke-box" />
+  <rect
+    x="1"
+    y="11"
+    width="8"
+    height="8"
+    stroke="green"
+    clip-path="circle() stroke-box" />
 
   <!-- 右下：应用 CSS 基本形状和 view-box 几何。
        实质上和自定义剪切路径并把 clipPathUnits
        设成 userSpaceOnUse 一样 -->
-  <rect x="11" y="11" width="8" height="8" stroke="green"
-        clip-path="circle() view-box" />
+  <rect
+    x="11"
+    y="11"
+    width="8"
+    height="8"
+    stroke="green"
+    clip-path="circle() view-box" />
 </svg>
 ```
 
@@ -50,9 +74,9 @@ html,body,svg { height:100% }
 ## Usage notes
 
 | 值         | {{cssxref('url')}} \| [ {{cssxref('basic-shape')}} \|\| `<geometry-box>` ] \| `none` |
-| ---------- | ---------------------------------------------------------------------------------------------------- |
-| 默认值     | `none`                                                                                               |
-| Animatable | 是                                                                                                   |
+| ---------- | ------------------------------------------------------------------------------------ |
+| 默认值     | `none`                                                                               |
+| Animatable | 是                                                                                   |
 
 - \<geometry-box>
   - : geometry-box 是应用 {{cssxref('basic-shape')}} 的额外信息，用于区分 CSS 基本形状如何应用于元素上：`fill-box` 表示将对象的包围框作为参照框；`stroke-box` 表示将对象的包围框加上描边的范围作为参照框；`view-box` 表示使用最近的 SVG 视窗作为参照框。