[zh-cn]: update the translation of the SVG attribute stroke-width

mdn · Aug 23, 2024 · 017496f · 017496f
1 parent 3606d36
commit 017496f
Showing 1 changed file with 70 additions and 12 deletions.
diff --git a/files/zh-cn/web/svg/attribute/stroke-width/index.md b/files/zh-cn/web/svg/attribute/stroke-width/index.md
@@ -5,26 +5,84 @@ slug: Web/SVG/Attribute/stroke-width
 
 {{SVGRef}}
 
-`stroke-width` 属性指定了当前对象的轮廓的宽度。它的默认值是 **1**。如果使用了一个\<percentage>，这个值代表当前视口的百分比。如果使用了 **0** 值，则将不绘制轮廓。
+**`stroke-width`** 属性定义了图形的外轮廓的宽度。
 
-作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
+你可以将此属性与以下 SVG 元素一起使用：
 
-## 用法
-
-| 类别   | 外观属性                                                                                                      |
-| ------ | ------------------------------------------------------------------------------------------------------------- |
-| 值     | [\<length>](/zh-CN/SVG/Content_type#Length) \| [\<percentage>](/zh-CN/SVG/Content_type#Percentage) \| inherit |
-| 可变性 | Yes                                                                                                           |
+- {{SVGElement('circle')}}
+- {{SVGElement('ellipse')}}
+- {{SVGElement('line')}}
+- {{SVGElement('path')}}
+- {{SVGElement('polygon')}}
+- {{SVGElement('polyline')}}
+- {{SVGElement('rect')}}
+- {{SVGElement('text')}}
+- {{SVGElement('textPath')}}
+- {{SVGElement('tref')}}
+- {{SVGElement('tspan')}}
 
 ## 示例
 
-## 元素
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- 默认笔画宽度为 1 -->
+  <circle cx="5" cy="5" r="3" stroke="green" />
+
+  <!-- 使用数值设置笔画宽度 -->
+  <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" />
+
+  <!-- 使用百分数设置笔画宽度 -->
+  <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" />
+</svg>
+```
 
-下列元素可以使用`stroke-width`属性：
+{{EmbedLiveSample("示例", '100%', 150)}}
 
-- [形状元素](/zh-CN/SVG/Element#Shape) »
-- [文本内容元素](/zh-CN/SVG/Element#TextContent) »
+## 用法
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">值</th>
+      <td>
+        <strong
+          ><a href="/zh-CN/docs/Web/SVG/Content_type#长度"
+            >&#x3C;length></a
+          ></strong
+        > |
+        <strong
+          ><a href="/zh-CN/docs/Web/SVG/Content_type#百分数"
+            >&#x3C;percentage></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">默认值</th>
+      <td><code>1px</code></td>
+    </tr>
+    <tr>
+      <th scope="row">可动画化</th>
+      <td>是</td>
+    </tr>
+  </tbody>
+</table>
+
+> [!NOTE]
+> 百分数值始终以标准化 {{SVGAttr('viewBox')}} 的对角线长度的百分比计算。
 
 ## 规范
 
 {{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}