[zh-cn]: update the translation of the SVG attribute `stroke-dasharra…

…y` (#23205) Co-authored-by: A1lo <[email protected]>
mdn · Aug 24, 2024 · 5586a53 · 5586a53
1 parent 2ad8c72
commit 5586a53
Showing 1 changed file with 70 additions and 45 deletions.
diff --git a/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.md
@@ -5,68 +5,93 @@ slug: Web/SVG/Attribute/stroke-dasharray
 
 {{SVGRef}}
 
-属性 `stroke-dasharray` 可控制用来描边的点划线的图案范式。
+**`stroke-dasharray`** 表现属性定义了用于绘制形状轮廓的虚线段和间隙的排列形式。
 
-作为一个外观属性，它也可以直接用作一个 CSS 样式表内部的属性。
+> [!NOTE]
+> 作为一个表现属性，`stroke-dasharray` 可以用作 CSS 属性。
 
-## 用法
+你可以将此属性与以下 SVG 元素一起使用：
 
-| 类别   | 外观属性                            |
-| ------ | ----------------------------------- |
-| 值     | **none** \| \<dasharray> \| inherit |
-| 可变性 | Yes                                 |
-
-- \<dasharray>
-  - : 它是一个[\<length>](/zh-CN/SVG/Content_type#Length)和[\<percentage>](/zh-CN/SVG/Content_type#Percentage)数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，**5,3,2**等同于**5,3,2,5,3,2**。
+- {{SVGElement('circle')}}
+- {{SVGElement('ellipse')}}
+- {{SVGElement('path')}}
+- {{SVGElement('line')}}
+- {{SVGElement('polygon')}}
+- {{SVGElement('polyline')}}
+- {{SVGElement('rect')}}
+- {{SVGElement('text')}}
+- {{SVGElement('textPath')}}
+- {{SVGElement('tref')}}
+- {{SVGElement('tspan')}}
 
 ## 示例
 
-```html
-<?xml version="1.0"?>
-<svg
-  width="200"
-  height="200"
-  viewPort="0 0 200 300"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
-  <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" />
-  <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" />
-  <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" />
-  <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" />
-  <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" />
-  <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" />
-  <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" />
-  <line
-    stroke-dasharray="15, 10, 5, 10, 15"
-    x1="10"
-    y1="170"
-    x2="190"
-    y2="170" />
-  <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" />
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
 
+```html
+<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
   <style>
-    <![CDATA[
-    line{
-        stroke: black;
-        stroke-width: 2;
+    line {
+      stroke: black;
     }
-    ]]>
   </style>
+  <!-- 没有虚线和间隙 -->
+  <line x1="0" y1="1" x2="30" y2="1" />
+
+  <!-- 虚线段和间隙长度相同 -->
+  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />
+
+  <!-- 虚线段和间隙长度不同 -->
+  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />
+
+  <!-- 具有奇数个不同长度的虚线段和间隙 -->
+  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />
+
+  <!-- 具有偶数个不同长度的虚线段和间隙 -->
+  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />
+
+  <!-- 以间隙开始的虚线 -->
+  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
 </svg>
 ```
 
-### 示例输出
-
-{{ EmbedLiveSample('示例','220','220') }}
+{{EmbedLiveSample("示例", '100%', 150)}}
+
+## 使用说明
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">值</th>
+      <td><code>none</code> | <code>&#x3C;dasharray></code></td>
+    </tr>
+    <tr>
+      <th scope="row">默认值</th>
+      <td><code>none</code></td>
+    </tr>
+    <tr>
+      <th scope="row">动画性</th>
+      <td>是</td>
+    </tr>
+  </tbody>
+</table>
 
-## 元素
+- \<dasharray>
 
-下列元素可以使用 `stroke-dasharray` 属性：
+  - : 以逗号或空格分隔的 [`<length>`](/zh-CN/docs/Web/SVG/Content_type#长度) 和 [`<percentage>`](/zh-CN/docs/Web/SVG/Content_type#百分数) 列表，用于定义交替的虚线段和间隙的长度。
 
-- [形状元素](/zh-CN/SVG/Element#Shape_elements) »
-- [文本内容元素](/zh-CN/SVG/Element#Text_content_elements) »
+    如果提供了奇数个值，则重复该列表以产生偶数个值，因此 `5,3,2` 等价于 `5,3,2,5,3,2`。
 
 ## 规范
 
 {{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}