From e3ba003ecba4928017303959823f0512ffb0e2ba Mon Sep 17 00:00:00 2001
From: Allo <yin199909@aliyun.com>
Date: Sun, 9 Jul 2023 13:43:43 +0800
Subject: [PATCH] fix(svg): remove broken images

---
 .../index.md                                  |   2 -
 files/zh-cn/web/svg/attribute/begin/index.md  | 285 +++++++++++++++++-
 files/zh-cn/web/svg/element/ellipse/index.md  |  16 +-
 files/zh-cn/web/svg/element/line/index.md     |  22 +-
 files/zh-cn/web/svg/element/mask/index.md     |  29 +-
 files/zh-cn/web/svg/element/pattern/index.md  |  29 +-
 files/zh-cn/web/svg/element/polygon/index.md  |  20 +-
 files/zh-cn/web/svg/element/polyline/index.md |  20 +-
 files/zh-cn/web/svg/element/tspan/index.md    |  28 +-
 9 files changed, 428 insertions(+), 23 deletions(-)

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 d3ebe38de5b2c0..85dfae74cc4811 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
@@ -197,8 +197,6 @@ pre.target:hover { filter:url(#f3); }
 
 {{EmbedLiveSample('示例：Filtering', 650, 200)}}
 
-[View this example live](/files/3329/filterdemo.xhtml)
-
 ### 示例：Blurred Text
 
 为了模糊文本，基于 Webkit 的浏览器有一个名为 blur 的（前缀）CSS 过滤器，（另见 [CSS filter](/zh-CN/docs/Web/CSS/filter#blur%28%29_2)）。你可以使用 SVG 过滤器获得相同的效果。
diff --git a/files/zh-cn/web/svg/attribute/begin/index.md b/files/zh-cn/web/svg/attribute/begin/index.md
index ac71cbfe6e6b70..9c0a462b85c2e8 100644
--- a/files/zh-cn/web/svg/attribute/begin/index.md
+++ b/files/zh-cn/web/svg/attribute/begin/index.md
@@ -36,29 +36,298 @@ slug: Web/SVG/Attribute/begin
 
 ### Offset 示例
 
-» [begin-1-offset.svg](/files/3290/begin-1-offset.svg)
+```html
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1">
+  <!-- animated rectangles -->
+  <rect x="10" y="35" height="15" width="0">
+    <animate
+      attributeType="XML"
+      attributeName="width"
+      to="100"
+      begin="0s"
+      dur="8s"
+      fill="freeze" />
+  </rect>
+
+  <rect x="35" y="60" height="15" width="0">
+    <animate
+      attributeType="XML"
+      attributeName="width"
+      to="75"
+      begin="2s"
+      dur="6s"
+      fill="freeze" />
+  </rect>
+
+  <rect x="60" y="85" height="15" width="0">
+    <animate
+      attributeType="XML"
+      attributeName="width"
+      to="50"
+      begin="4s"
+      dur="4s"
+      fill="freeze" />
+  </rect>
+
+  <!-- grid -->
+  <text x="10" y="20" text-anchor="middle">0s</text>
+  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
+  <text x="35" y="20" text-anchor="middle">2s</text>
+  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
+  <text x="60" y="20" text-anchor="middle">4s</text>
+  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
+  <text x="85" y="20" text-anchor="middle">6s</text>
+  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
+  <text x="110" y="20" text-anchor="middle">8s</text>
+  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
+
+  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
+  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
+</svg>
+```
+
+{{EmbedLiveSample('Offset 示例', '100%', 130)}}
+
+[begin-1-offset.svg](begin-1-offset.svg)
 
 ### Syncbase 示例
 
-» [begin-2-syncbase.svg](/files/3291/begin-2-syncbase.svg)
+```html
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- animated rectangles -->
+  <rect x="10" y="35" height="15" width="0">
+    <animate
+      attributeType="XML"
+      attributeName="width"
+      to="50"
+      id="first"
+      begin="0s;third.end"
+      dur="4s" />
+  </rect>
+
+  <rect x="60" y="60" height="15" width="0">
+    <animate
+      attributeType="XML"
+      attributeName="width"
+      to="25"
+      id="second"
+      begin="first.end"
+      dur="2s" />
+  </rect>
+
+  <rect x="85" y="85" height="15" width="0">
+    <animate
+      attributeType="XML"
+      attributeName="width"
+      to="25"
+      id="third"
+      begin="second.end"
+      dur="2s" />
+  </rect>
+
+  <!-- grid -->
+  <text x="10" y="20" text-anchor="middle">0s</text>
+  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
+  <text x="35" y="20" text-anchor="middle">2s</text>
+  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
+  <text x="60" y="20" text-anchor="middle">4s</text>
+  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
+  <text x="85" y="20" text-anchor="middle">6s</text>
+  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
+  <text x="110" y="20" text-anchor="middle">8s</text>
+  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
+
+  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
+  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
+</svg>
+```
+
+{{EmbedLiveSample('Syncbase 示例', '100%', 130)}}
+
+[begin-2-syncbase.svg](begin-2-syncbase.svg)
 
 ### Event 示例
 
-» [begin-3-event.svg](/files/3292/begin-3-event.svg)
+```html
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- animated rectangle -->
+  <rect x="10" y="35" height="15" width="0">
+    <animate
+      attributeType="XML"
+      attributeName="width"
+      from="0"
+      to="100"
+      begin="startButton.click"
+      dur="8s"
+      fill="freeze" />
+  </rect>
+
+  <!-- trigger -->
+  <rect
+    id="startButton"
+    style="cursor:pointer;"
+    x="19.5"
+    y="62.5"
+    rx="5"
+    height="25"
+    width="80"
+    fill="#EFEFEF"
+    stroke="black"
+    stroke-width="1" />
+
+  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
+    Click me.
+  </text>
+
+  <!-- grid -->
+  <text x="10" y="20" text-anchor="middle">0s</text>
+  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="35" y="20" text-anchor="middle">2s</text>
+  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="60" y="20" text-anchor="middle">4s</text>
+  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="85" y="20" text-anchor="middle">6s</text>
+  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="110" y="20" text-anchor="middle">8s</text>
+  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+
+  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
+  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+</svg>
+```
+
+{{EmbedLiveSample('Event 示例', '100%', 130)}}
+
+[begin-3-event.svg](begin-3-event.svg)
 
 ### Repeat 示例
 
-» [begin-4-repeat.svg](/files/3293/begin-4-repeat.svg)
+```html
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- animated rectangle -->
+  <rect x="10" y="35" height="15" width="0">
+    <animate
+      attributeType="XML"
+      attributeName="width"
+      from="0"
+      to="100"
+      id="myLoop"
+      begin="0s;myLoop.end"
+      dur="4s"
+      repeatCount="3" />
+
+    <set
+      attributeType="CSS"
+      attributeName="fill"
+      to="green"
+      begin="myLoop.begin" />
+
+    <set
+      attributeType="CSS"
+      attributeName="fill"
+      to="gold"
+      begin="myLoop.repeat(1)" />
+
+    <set
+      attributeType="CSS"
+      attributeName="fill"
+      to="red"
+      begin="myLoop.repeat(2)" />
+  </rect>
+
+  <!-- grid -->
+  <text x="10" y="20" text-anchor="middle">0s</text>
+  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="35" y="20" text-anchor="middle">1s</text>
+  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="60" y="20" text-anchor="middle">2s</text>
+  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="85" y="20" text-anchor="middle">3s</text>
+  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="110" y="20" text-anchor="middle">4s</text>
+  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+
+  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
+  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+</svg>
+```
+
+{{EmbedLiveSample('Repeat 示例', '100%', 130)}}
+
+[begin-4-repeat.svg](begin-4-repeat.svg)
 
 ### Accesskey 示例
 
-» [begin-5-accesskey.svg](/files/3294/begin-5-accesskey.svg)
+```html
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- animated rectangles -->
+  <rect x="10" y="35" height="15" width="0">
+    <animate
+      attributeType="XML"
+      attributeName="width"
+      from="0"
+      to="100"
+      begin="accessKey(s)"
+      dur="8s"
+      fill="freeze" />
+  </rect>
+
+  <!-- trigger -->
+  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
+    Hit the "s" key
+  </text>
+
+  <!-- grid -->
+  <text x="10" y="20" text-anchor="middle">0s</text>
+  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="35" y="20" text-anchor="middle">2s</text>
+  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="60" y="20" text-anchor="middle">4s</text>
+  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="85" y="20" text-anchor="middle">6s</text>
+  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
+  <text x="110" y="20" text-anchor="middle">8s</text>
+  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+
+  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
+  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+</svg>
+```
 
-## 元素
+{{EmbedLiveSample('Accesskey 示例', '100%', 130)}}
 
-下列元素可以使用`begin`属性：
+_该示例被嵌入到了一个 iFrame 中。如果你想要激活按键事件，你必须先点击它。_
 
-- [动画元素](/zh-CN/SVG/Element#Animation) »
+[begin-5-accesskey.svg](begin-5-accesskey.svg)
 
 ## 规范
 
diff --git a/files/zh-cn/web/svg/element/ellipse/index.md b/files/zh-cn/web/svg/element/ellipse/index.md
index a607966b51346d..dac26c9f609d08 100644
--- a/files/zh-cn/web/svg/element/ellipse/index.md
+++ b/files/zh-cn/web/svg/element/ellipse/index.md
@@ -15,7 +15,21 @@ slug: Web/SVG/Element/ellipse
 
 ## 示例
 
-» [ellipse.svg](/files/3253/ellipse.svg)
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="100" cy="50" rx="100" ry="50" />
+</svg>
+```
+
+{{EmbedLiveSample('示例', 100, '100%')}}
 
 ## 属性
 
diff --git a/files/zh-cn/web/svg/element/line/index.md b/files/zh-cn/web/svg/element/line/index.md
index 11e9c9bc15e298..78476f264e0654 100644
--- a/files/zh-cn/web/svg/element/line/index.md
+++ b/files/zh-cn/web/svg/element/line/index.md
@@ -13,15 +13,23 @@ slug: Web/SVG/Element/line
 
 ## 示例
 
-» [line.svg](/files/3254/line.svg)
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
 
-你可以应用变形以得到同样的结果。从一条常见的线开始：
+```html
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
 
-» [line1.svg](/files/3345/line1.svg)
+  <!-- 如果不指定描边颜色，则无法看见线条 -->
+</svg>
+```
 
-添加变形选项以改变线的方向：
-
-» [line2.svg](/files/3346/line2.svg)
+{{EmbedLiveSample('示例', 100, 100)}}
 
 ## 属性
 
@@ -51,7 +59,7 @@ slug: Web/SVG/Element/line
 
 {{Compat}}
 
-## 相关内容
+## 参见
 
 - {{SVGElement("polygon")}}
 - {{SVGElement("path")}}
diff --git a/files/zh-cn/web/svg/element/mask/index.md b/files/zh-cn/web/svg/element/mask/index.md
index 859904ef3f5da1..3e716fdebc9f29 100644
--- a/files/zh-cn/web/svg/element/mask/index.md
+++ b/files/zh-cn/web/svg/element/mask/index.md
@@ -13,7 +13,34 @@ slug: Web/SVG/Element/mask
 
 ## 示例
 
-» [mask.svg](/files/3269/mask.svg)
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="-10 -10 120 120">
+  <mask id="myMask">
+    <!-- 白色像素下的所有内容都将可见 -->
+    <rect x="0" y="0" width="100" height="100" fill="white" />
+
+    <!-- 黑色像素下的所有内容都将不可见 -->
+    <path
+      d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
+      fill="black" />
+  </mask>
+
+  <polygon points="-10,110 110,110 110,-10" fill="orange" />
+
+  <!-- 应用此蒙版后，我们在圆圈中“打”一个心形孔 -->
+  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
+</svg>
+```
+
+{{EmbedLiveSample('示例', 100, 100)}}
 
 ## 属性
 
diff --git a/files/zh-cn/web/svg/element/pattern/index.md b/files/zh-cn/web/svg/element/pattern/index.md
index 3a67462d36a02f..e28a8ffbbf0b09 100644
--- a/files/zh-cn/web/svg/element/pattern/index.md
+++ b/files/zh-cn/web/svg/element/pattern/index.md
@@ -13,7 +13,34 @@ slug: Web/SVG/Element/pattern
 
 ## 示例
 
-» [pattern.svg](/files/3268/pattern.svg)
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
+      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
+    </pattern>
+  </defs>
+
+  <circle cx="50" cy="50" r="50" fill="url(#star)" />
+  <circle
+    cx="180"
+    cy="50"
+    r="40"
+    fill="none"
+    stroke-width="20"
+    stroke="url(#star)" />
+</svg>
+```
+
+{{EmbedLiveSample('示例', 150, '100%')}}
 
 ## 属性
 
diff --git a/files/zh-cn/web/svg/element/polygon/index.md b/files/zh-cn/web/svg/element/polygon/index.md
index c7d8c419d846f5..d3e2aacb383e46 100644
--- a/files/zh-cn/web/svg/element/polygon/index.md
+++ b/files/zh-cn/web/svg/element/polygon/index.md
@@ -13,7 +13,25 @@ slug: Web/SVG/Element/polygon
 
 ## 示例
 
-» [polygon.svg](/files/3259/polygon.svg)
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- 具有默认填充的多边形示例 -->
+  <polygon points="0,100 50,25 50,75 100,0" />
+
+  <!-- 具有描边但无填充的相同的多边形形状示例 -->
+  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
+</svg>
+```
+
+{{EmbedLiveSample('示例', 100, 100)}}
 
 ## 属性
 
diff --git a/files/zh-cn/web/svg/element/polyline/index.md b/files/zh-cn/web/svg/element/polyline/index.md
index e81f95ab2aabab..92357df8978d2b 100644
--- a/files/zh-cn/web/svg/element/polyline/index.md
+++ b/files/zh-cn/web/svg/element/polyline/index.md
@@ -13,7 +13,25 @@ slug: Web/SVG/Element/polyline
 
 ## 示例
 
-» [polyline.svg](/files/3260/polyline.svg)
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- 具有默认填充的折线示例 -->
+  <polyline points="0,100 50,25 50,75 100,0" />
+
+  <!-- 具有描边但无填充的相同的多段线形状示例 -->
+  <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
+</svg>
+```
+
+{{EmbedLiveSample('示例', 100, 100)}}
 
 ## 属性
 
diff --git a/files/zh-cn/web/svg/element/tspan/index.md b/files/zh-cn/web/svg/element/tspan/index.md
index da549b549b263a..49d319435844d0 100644
--- a/files/zh-cn/web/svg/element/tspan/index.md
+++ b/files/zh-cn/web/svg/element/tspan/index.md
@@ -13,7 +13,33 @@ slug: Web/SVG/Element/tspan
 
 ## 示例
 
-» [tspan.svg](/files/3338/tspan.svg)
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    text {
+      font: italic 12px serif;
+    }
+    tspan {
+      font: bold 10px sans-serif;
+      fill: red;
+    }
+  </style>
+
+  <text x="10" y="30" class="small">
+    你<tspan>不是</tspan>香蕉！
+  </text>
+</svg>
+```
+
+{{EmbedLiveSample('示例', 100, '100%')}}
 
 ## 属性