fix(svg): remove broken images (#14101)

mdn · Jul 9, 2023 · da41c26 · da41c26
1 parent 8bf569a
commit da41c26
Show file tree

Hide file tree

Showing 9 changed files with 428 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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")}}