diff --git a/files/zh-tw/mdn/tools/kumascript/troubleshooting/index.md b/files/zh-tw/mdn/tools/kumascript/troubleshooting/index.md index 0c40a936193b0a..eecc20eee1ce8d 100644 --- a/files/zh-tw/mdn/tools/kumascript/troubleshooting/index.md +++ b/files/zh-tw/mdn/tools/kumascript/troubleshooting/index.md @@ -22,8 +22,6 @@ Check for: - HTML tags appearing inside a macro call - : If you apply styling to a macro, it will often break because, for example, a `` tag may have appeared inside the macro code in the source code. Check the source view to see what's there, and remove any unnecessary styling. - - ## TemplateLoadingError `TemplateLoadingError` errors appear when KumaScript has trouble finding which [macro](/en-US/docs/MDN/Contribute/Content/Macros) to include on a page. diff --git a/files/zh-tw/mozilla/add-ons/webextensions/internationalization/index.md b/files/zh-tw/mozilla/add-ons/webextensions/internationalization/index.md index 1b5fe952e440a0..59127b9302c108 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/internationalization/index.md +++ b/files/zh-tw/mozilla/add-ons/webextensions/internationalization/index.md @@ -116,8 +116,6 @@ To call a message string like this, you need to specify it like this: 4. The name of the message you want to call as defined in `messages.json`, followed by 5. Two underscores - - __MSG_ + messageName + __ ### Specifying a default locale diff --git a/files/zh-tw/mozilla/firefox/releases/2/index.md b/files/zh-tw/mozilla/firefox/releases/2/index.md index 47071b895a535b..da3ba4ccedb474 100644 --- a/files/zh-tw/mozilla/firefox/releases/2/index.md +++ b/files/zh-tw/mozilla/firefox/releases/2/index.md @@ -13,54 +13,24 @@ Firefox 2 有許多新的特色及功能，本文提供各項新特色的相關 - [即時摘要](http://wiki.mozilla.org/Microsummaries) - : 即時摘要能定期顯示網頁中的關鍵訊息。網站或其他第三方開發者都能提供即時摘要來源，而後使用者能選擇在書籤上顯示即時摘要或網頁標題。 - - - - [製作即時摘要](zh_tw/%e8%a3%bd%e4%bd%9c%e5%8d%b3%e6%99%82%e6%91%98%e8%a6%81) - : 即時摘要來源的製作教學。 - - - - [即時摘要 XML 語法參考](zh_tw/%e5%8d%b3%e6%99%82%e6%91%98%e8%a6%81_XML_%e8%aa%9e%e6%b3%95%e5%8f%83%e8%80%83) - : 即時摘要來源之 XML 語法參考指南。 - - - - [製作 OpenSearch 搜尋模組](zh_tw/%e8%a3%bd%e4%bd%9c_OpenSearch_%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84) - : Firefox 2 支援 OpenSearch 搜尋模組格式。 - - - - [製作 MozSearch 搜尋模組](zh_tw/%e8%a3%bd%e4%bd%9c_MozSearch_%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84) - : Firefox 2 支援擴充版的 OpenSearch 格式，名為 MozSearch。但此非標準，故僅建議用於程式內部。 - - - - [讓搜尋模組支援搜尋建議](zh_tw/%e8%ae%93%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84%e6%94%af%e6%8f%b4%e6%90%9c%e5%b0%8b%e5%bb%ba%e8%ad%b0) - : 讓你的 MozSearch 模組支援搜尋建議功能，此功能將於搜尋欄中以下拉選單顯示建議關鍵字。 - - - - [JavaScript 1.7 新功能](zh_tw/JavaScript_1.7_%e6%96%b0%e5%8a%9f%e8%83%bd) - : Firefox 2 支援 JavaScript 1.7，包含新的 `let` 表達式、跨結構指定(destructuring assignment)、產生器 (generators)、迴圈器 (iterators) 和陣列簡約式 (array comprehensions)。 - - - - [WHATWG 於用戶端儲存工作階段資料](http://www.whatwg.org/specs/web-apps/current-work/#scs-client-side) - : 於用戶端儲存工作階段資料技術可讓網路應用程式於用戶端儲存結構化資料。 - - - - [Firefox 中的 SVG](zh_tw/Firefox_%e4%b8%ad%e7%9a%84_SVG) - : Firefox 2 提升支援 Scalable Vector Graphics (SVG) 的程度，實作了 `` 元素、也開始支援某些從前無法妥善處理的屬性。 - - - - [控制 HTML 表單中的拼字檢查功能](zh_tw/%e6%8e%a7%e5%88%b6_HTML_%e8%a1%a8%e5%96%ae%e4%b8%ad%e7%9a%84%e6%8b%bc%e5%ad%97%e6%aa%a2%e6%9f%a5%e5%8a%9f%e8%83%bd) - : Firefox 2 支援文字輸入區的即時拼字檢查，本文描述撰寫 HTML 表單元素時啟用或停用此功能的方法。 - - - - [Firefox 2 的安全功能](zh_tw/Firefox_2_%e7%9a%84%e5%ae%89%e5%85%a8%e5%8a%9f%e8%83%bd) - : 某些與安全相關之協定的預設啟用情形，在 Firefox 2 有了更動。 @@ -68,49 +38,22 @@ Firefox 2 有許多新的特色及功能，本文提供各項新特色的相關 - [讓擴充套件升級至 Firefox 2](zh_tw/%e8%ae%93%e6%93%b4%e5%85%85%e5%a5%97%e4%bb%b6%e5%8d%87%e7%b4%9a%e8%87%b3_Firefox_2) - : 描述讓現有擴充套件升級以便支援 Firefox 2 的方法。 - - - - [跨連線儲存 (Session store) API](zh_tw/%e8%b7%a8%e9%80%a3%e7%b7%9a%e5%84%b2%e5%ad%98_API) - : Firefox 現在支援跨連線 (Session) 儲存或復原資料。 - - - - [消息來源內容存取 API](zh_tw/%e6%b6%88%e6%81%af%e4%be%86%e6%ba%90%e5%85%a7%e5%ae%b9%e5%ad%98%e5%8f%96_API) - : 讓開發者存取、解析 RSS 或 Atom 消息來源的 API。 - - - - [SAX 支援](zh_tw/SAX) - : 事件驅動式的 XML 解析 API。 - - - - [自網頁添加搜尋引擎](zh_tw/%e8%87%aa%e7%b6%b2%e9%a0%81%e6%b7%bb%e5%8a%a0%e6%90%9c%e5%b0%8b%e5%bc%95%e6%93%8e) - : Firefox 能以 JavaScript 新增搜尋引擎模組，模組可為 OpenSearch 或 Sherlock 格式。 - - - - [於 XUL 中使用拼字檢查](zh_tw/%e6%96%bc_XUL_%e4%b8%ad%e4%bd%bf%e7%94%a8%e6%8b%bc%e5%ad%97%e6%aa%a2%e6%9f%a5) - : 如何使用拼字檢查功能及怎樣取得建議拼字清單的程式碼。 - - - - [新增偽造網站清單來源](zh_tw/%e6%96%b0%e5%a2%9e%e5%81%bd%e9%80%a0%e7%b6%b2%e7%ab%99%e6%b8%85%e5%96%ae%e4%be%86%e6%ba%90) - : Firefox 可以新增額外的詐騙網站資料來源，藉此提升偵測偽造網站的能力。 - - - - [新增消息來源閱讀工具](zh_tw/%e6%96%b0%e5%a2%9e%e6%b6%88%e6%81%af%e4%be%86%e6%ba%90%e9%96%b1%e8%ae%80%e5%b7%a5%e5%85%b7) - : 你可以用網頁或程式新增 Firefox 的消息來源閱讀工具。 - - - - [Storage](zh_tw/Storage) - : Firefox 2 新增 mozStorage 功能，為基於 sqlite 的資料庫結構。 - - - - [Firefox 2 佈景主題之更動](zh_tw/Firefox_2_%e4%bd%88%e6%99%af%e4%b8%bb%e9%a1%8c%e4%b9%8b%e6%9b%b4%e5%8b%95) - : 討論現有佈景主題更新以便支援 Firefox 2 的方法。 diff --git a/files/zh-tw/mozilla/firefox/releases/3.6/index.md b/files/zh-tw/mozilla/firefox/releases/3.6/index.md index 73823a81ce5125..e84f56432f9a5d 100644 --- a/files/zh-tw/mozilla/firefox/releases/3.6/index.md +++ b/files/zh-tw/mozilla/firefox/releases/3.6/index.md @@ -54,8 +54,6 @@ Gecko 1.9.2 introduces JavaScript 1.8.2, which adds a number of language feature - [`Date.parse()`](/en-US/docs/JavaScript/Reference/Global_Objects/Date/parse) can now parse ISO 8601 dates like YYYY-MM-DD. - The [`prototype`](/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype) property of function instances is no longer enumerable. - - ### DOM - Web workers can now self-terminate diff --git a/files/zh-tw/mozilla/firefox/releases/4/index.md b/files/zh-tw/mozilla/firefox/releases/4/index.md index 85a612f5f3fb98..abf653e57c0799 100644 --- a/files/zh-tw/mozilla/firefox/releases/4/index.md +++ b/files/zh-tw/mozilla/firefox/releases/4/index.md @@ -125,9 +125,6 @@ For helpful tips on updating existing extensions for Firefox 4, see [Updating ex - [Services.jsm](/en/JavaScript_code_modules/Services.jsm) - : The `Services.jsm` code module provides getters that make it easy to obtain references to commonly-used services, such as the preferences service or the window mediator, among others. - - - - [JS-ctypes API](/en/JavaScript_code_modules/ctypes.jsm) - : The JS-ctypes API makes it possible to call C-compatible foreign library functions without using XPCOM. - [Add-ons Manager](/en/Addons/Add-on_Manager) diff --git a/files/zh-tw/mozilla/firefox/releases/6/index.md b/files/zh-tw/mozilla/firefox/releases/6/index.md index 7f828a4f32e9ab..c30771eb1c66b0 100644 --- a/files/zh-tw/mozilla/firefox/releases/6/index.md +++ b/files/zh-tw/mozilla/firefox/releases/6/index.md @@ -11,8 +11,6 @@ Firefox 6, based on Gecko 6.0, was released on August 16, 2011. This article pro ### HTML - - - The HTML5 [``](/zh-TW/docs/Web/HTML/Element/progress) element, which lets you create a progress bar, is now supported. - The parsing of the HTML5 [``](/zh-TW/docs/Web/HTML/Element/track) element, which specifies text tracks for media elements, is now supported. This element should appear in the DOM now, though its behavior is still not implemented. - The [` + ``` + + - 理論上，img元素也可以用来引入SVG，但是Firefox 4.0之前的版本不支持這一功能。 + - 最後，SVG可以用JavaScript動態創建，並且注入到HTML DOM裡面。這樣做的好處是，對於不支持SVG的瀏覽器，可以啟用其它替代技術。 -
Content-Type: image/svg+xml
-
+ 這是一個深入探討該主題的專題頁面。 -

對於經過壓縮的SVG文件，響應端應該是：

+- SVG如何處理大小和單位，將在下一頁進行解釋。 -
Content-Type: image/svg+xml
+### SVG文件的類型
+
+SVG文件類型有兩種，普通的SVG文件是包含SVG標籤的文字文件，這類型文件的副檔名是“.svg”（全小寫）。
+
+SVG規範支持超大體積的SVG文件，以便符合一些應用程式的使用要求（比如地理應用），所以SVG規範提供了gzip壓縮的SVG文件格式，這類文件的後缀是“.svgz”（全小寫）。不幸的是，從微軟的IIS伺服器上獲取SVG壓縮文件將會出現問題，並且，Firefox不支持本機端的SVG壓縮文件。所以，如果要使用SVG壓縮文件，你必須保證使用的是支持這種文件的服務器。
+
+### 關於web服務器
+
+現在你已經大致瞭解了如何創建SVG文件，下一步就是將SVG文件上傳到服務器上。這裡有一些問題需要注意。對於一般的SVG文件，服務器的HTTP響應端是：
+
+```
+Content-Type: image/svg+xml
+```
+
+對於經過壓縮的SVG文件，響應端應該是：
+
+```
+Content-Type: image/svg+xml
 Content-Encoding: gzip
-
+``` -

你可以通過一些網站來檢查你的服務器是否使用了正确的響應端，比如 web-sniffer.net，提交一個SVG文件的URL，看一下響應端是什麼。如果你的服務器在響應裡没能返回上面的内容，那麼你應該聯繫一下您的主機服務商。如果他們不提供相關的配置服務，你也可以自動動手，具體方法可以查閱SVG wiki的 服務器配置頁面。

+你可以通過一些網站來檢查你的服務器是否使用了正确的響應端，比如 web-sniffer.net，提交一個SVG文件的URL，看一下響應端是什麼。如果你的服務器在響應裡没能返回上面的内容，那麼你應該聯繫一下您的主機服務商。如果他們不提供相關的配置服務，你也可以自動動手，具體方法可以查閱SVG wiki的 服務器配置頁面。 -

服務器配置錯誤是SVG加載失敗的主要原因，所以一定要確認你的配置。如果你没有給SVG文件配置正確的服務器響應端，Firefox將會以文本的方式展示文件的標記和編碼内容，甚至要求用户選擇一个應用程序打開它。

+服務器配置錯誤是SVG加載失敗的主要原因，所以一定要確認你的配置。如果你没有給SVG文件配置正確的服務器響應端，Firefox將會以文本的方式展示文件的標記和編碼内容，甚至要求用户選擇一个應用程序打開它。 -

{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}

+{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }} diff --git a/files/zh-tw/web/svg/tutorial/gradients/index.md b/files/zh-tw/web/svg/tutorial/gradients/index.md index d79c9e5bd31652..665a5bf03a56f2 100644 --- a/files/zh-tw/web/svg/tutorial/gradients/index.md +++ b/files/zh-tw/web/svg/tutorial/gradients/index.md @@ -3,147 +3,159 @@ title: 漸層 slug: Web/SVG/Tutorial/Gradients translation_of: Web/SVG/Tutorial/Gradients --- -

{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}

- -

除了基本的 fill 和 stroke 之外，我們還有一個更令人興奮的功能：給邊框和填充設置漸層。

- -

漸層的類型有兩種，線形漸層和放射形漸層。線形漸層沿直線變化，在 defs元素裡創建一個 {{SVGElement('linearGradient')}} 元素，就創建了一個線形漸層。漸變必須有一個id屬性，否則它不能被其他元素引用，等於白做了。

- -

- -
<?xml version="1.0" standalone="no"?>
-
-<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <linearGradient id="Gradient1">
-        <stop class="stop1" offset="0%"/>
-        <stop class="stop2" offset="50%"/>
-        <stop class="stop3" offset="100%"/>
-      </linearGradient>
-      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="50%" stop-color="black" stop-opacity="0"/>
-        <stop offset="100%" stop-color="blue"/>
-      </linearGradient>
-      <style type="text/css"><![CDATA[
+{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}
+
+除了基本的 fill 和 stroke 之外，我們還有一個更令人興奮的功能：給邊框和填充設置漸層。
+
+漸層的類型有兩種，線形漸層和放射形漸層。線形漸層沿直線變化，在 defs 元素裡創建一個 {{SVGElement('linearGradient')}} 元素，就創建了一個線形漸層。漸變**必須**有一個`id`屬性，否則它不能被其他元素引用，等於白做了。
+
+![](/@api/deki/files/347/=SVG_Linear_Gradient_Example.png)
+
+```xml
+
+
+
+  
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+      
+  
 
-
在上面的例子裡，一個線形漸層被用在<rect>元素上，線形漸層內部有若干 {{SVGElement('stop')}} 節點，它們用來指定漸變應該在什麼位置形成什麼顏色，其中兩個屬性分別是：定義偏移位置的offset屬性和定義顏色的stop-color屬性。另外，它們可以直接設置，或通過CSS設置。上面的例子裡混合使用了這兩種形式。比如，這個例子的漸變是從紅色開始，到中間漸變成黑色，最後漸變到藍色。你可以按照自己的想法設置各種stop-color，但是它們的offset必須是從0%逐漸提高到100%。（如果不加%，就是0-1）。如果有重複的值，不會被分配到xml樹的最後。另外像fill和stroke一樣，你也可以設置一個stop-opacity屬性表示透明度。 （ff3裡這裡也可以用rgba值）

+  
+  
 
-
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
-

+
+```
 
-
使用漸變時，我們需要在對象的fill或stroke屬性裡引用它。就像在CSS里通過url來引用其他元素一樣，在這裡，url引用的是我們給漸變設置的id，所以只需要將fill屬性設置成url(#Gradient) ，我們的對象就可以呈現出五彩斑斕的效果。另外你也可以給stroke進行同樣的設置。

+在上面的例子裡，一個線形漸層被用在``元素上，線形漸層內部有若干 {{SVGElement('stop')}} 節點，它們用來指定漸變應該在什麼位置形成什麼顏色，其中兩個屬性分別是：定義偏移位置的`offset`屬性和定義顏色的`stop-color`屬性。另外，它們可以直接設置，或通過 CSS 設置。上面的例子裡混合使用了這兩種形式。比如，這個例子的漸變是從紅色開始，到中間漸變成黑色，最後漸變到藍色。你可以按照自己的想法設置各種`stop-color`，但是它們的 offset 必須是從 0%逐漸提高到 100%。（如果不加%，就是 0-1）。如果有重複的值，不會被分配到 xml 樹的最後。另外像 fill 和 stroke 一樣，你也可以設置一個`stop-opacity`屬性表示透明度。 （ff3 裡這裡也可以用 rgba 值）
 
-
<linearGradient>元素還可以設置其他一些屬性，用來定義尺寸和样​​式。比如漸變的方向是由兩個點控制的，它們用x1， x2，y1，y2四個屬性控制，形成一條直線，漸變就沿這條直線變化。漸變默認的方向是水平方向，使用這些屬性就可以改變方向。上面例子裡的Gradient2就是一個垂直的漸變。

+```xml
+ 
+```
 
-
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-

+使用漸變時，我們需要在對象的 fill 或 stroke 屬性裡引用它。就像在 CSS 里通過`url`來引用其他元素一樣，在這裡，url 引用的是我們給漸變設置的 id，所以只需要將 fill 屬性設置成`url(#Gradient) `，我們的對象就可以呈現出五彩斑斕的效果。另外你也可以給 stroke 進行同樣的設置。
 
-
備註： 你也可以在漸變中使用xlink:href屬性，它可以將一個漸變的屬性和stop節點，引入到另一個漸變中。在下面的例子裡，我們就不需要在Gradient2裡重新創建許多stop節點。

+``元素還可以設置其他一些屬性，用來定義尺寸和样 ​​ 式。比如漸變的方向是由兩個點控制的，它們用`x1`， `x2`，`y1`，`y2`四個屬性控制，形成一條直線，漸變就沿這條直線變化。漸變默認的方向是水平方向，使用這些屬性就可以改變方向。上面例子裡的 Gradient2 就是一個垂直的漸變。
 
-
 <linearGradient id="Gradient1">
-   <stop id="stop1" offset="0%"/>
-   <stop id="stop2" offset="50%"/>
-   <stop id="stop3" offset="100%"/>
- </linearGradient>
- <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
-    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
-

+```xml
+ 
+```
 
-
這裡我直接在元素裡定義了xlink的命名空間，通常我們會在文檔的頂部定義它。在 talk about images 有更多相關內容。

+> **備註：** 你也可以在漸變中使用`xlink:href`屬性，它可以將一個漸變的屬性和 stop 節點，引入到另一個漸變中。在下面的例子裡，我們就不需要在 Gradient2 裡重新創建許多 stop 節點。
+>
+> ```xml
+>  
+>    
+>    
+>    
+>  
+>       xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+> ```
+>
+> 這裡我直接在元素裡定義了 xlink 的命名空間，通常我們會在文檔的頂部定義它。在 [talk about images](/en/SVG/Tutorial/Other_content_in_SVG) 有更多相關內容。
 
-
放射形漸層很類似線形漸層，只不過是從一個點向外發散漸變。在文檔的 defs 段落裡增加一個 {{SVGElement('radialGradient')}} 元素，就可以創建放射形漸層。

+放射形漸層很類似線形漸層，只不過是從一個點向外發散漸變。在文檔的 defs 段落裡增加一個 {{SVGElement('radialGradient')}} 元素，就可以創建放射形漸層。
 
-

+![](/@api/deki/files/351/=SVG_Radial_Gradient_Example.png)
 
-
<?xml version="1.0" standalone="no"?>
+```xml
+
 
-<svg width="120" height="240" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-      <radialGradient id="Gradient2" cx="0.25" cy="0.25" r="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
+
+  
+      
+        
+        
+      
+      
+        
+        
+      
+  
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
+  
+  
 
-</svg>

+
+```
 
-
這個例子的里，放射形漸層中的stop節點在用法上和前面的線形漸層一樣，但是這裡的圖形對像是中間呈紅色，然後向各個方向發散漸變，直到邊緣漸變到藍色。放射形漸層<radialGradient>也有若干用來定義位置和方向的屬性，不過與線形漸層不同，這裡的設置會稍微複雜一點。放射形漸層裡也可以設置兩個點，用來確定它的範圍。第一個點用來定義一個環，限定漸變的範圍。該點包括坐標屬性cx和cy，以及半徑屬性r。定義這三個屬性，就可以改變漸變的位置和大小，就像上面例子裡的第二個漸變效果。

+這個例子的里，放射形漸層中的 stop 節點在用法上和前面的線形漸層一樣，但是這裡的圖形對像是中間呈紅色，然後向各個方向發散漸變，直到邊緣漸變到藍色。放射形漸層``也有若干用來定義位置和方向的屬性，不過與線形漸層不同，這裡的設置會稍微複雜一點。放射形漸層裡也可以設置兩個點，用來確定它的範圍。第一個點用來定義一個環，限定漸變的範圍。該點包括坐標屬性`cx`和`cy`，以及半徑屬性`r`。定義這三個屬性，就可以改變漸變的位置和大小，就像上面例子裡的第二個漸變效果。
 
-
第二個點被稱為焦點，通過坐標屬性fx和fy來確定。第一個點決定的是漸變所處的範圍，而焦點則決定漸變的中心。看例子更好理解：

+第二個點被稱為焦點，通過坐標屬性`fx`和`fy`來確定。第一個點決定的是漸變所處的範圍，而焦點則決定漸變的中心。看例子更好理解：
 
-

+![](/@api/deki/files/352/=SVG_Radial_Grandient_Focus_Example.png)
 
-
<?xml version="1.0" standalone="no"?>
+```xml
+
 
-<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
+
+  
+      
+        
+        
+      
+  
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="b​​lack" stroke-width="2"/>
+  
 
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+  
+  
+  
+  (fx,fy)
+  (cx,cy)
 
-</svg>

+
+```
 
-
如果焦點被移動到漸變範圍之外，漸變不可能被正確渲染，所以會被重定義到範圍的邊緣。如果不定義焦點，則默認與漸變範圍的中點是同一點。

+如果焦點被移動到漸變範圍之外，漸變不可能被正確渲染，所以會被重定義到範圍的邊緣。如果不定義焦點，則默認與漸變範圍的中點是同一點。
 
-
兩種漸變都可以通過一些屬性，定義諸如變形等樣式。在這裡僅提其中一個：spreadMethod屬性。當漸變已經到達範圍邊緣，但圖形對像還沒被完全填充時，這一屬性​​將決定接下來會發生什麼。它有三個可用值，"pad", "reflect", 以及 "repeat"。 "pad"的效果你已經看到過了，當漸變到達範圍邊緣，最後一個顏色將用來填充圖形剩下的區域。 "reflect"是繼續漸變，但是會從100%處的顏色漸變會0%的位置，然後再翻過來繼續。 "Repeat"也是讓漸變繼續，不過是跳過返回的過程，直接回到起始狀態，然後重新漸變。

+兩種漸變都可以通過一些屬性，定義諸如變形等樣式。在這裡僅提其中一個：`spreadMethod`屬性。當漸變已經到達範圍邊緣，但圖形對像還沒被完全填充時，這一屬性 ​​ 將決定接下來會發生什麼。它有三個可用值，"pad", "reflect", 以及 "repeat"。 "pad"的效果你已經看到過了，當漸變到達範圍邊緣，最後一個顏色將用來填充圖形剩下的區域。 "reflect"是繼續漸變，但是會從 100%處的顏色漸變會 0%的位置，然後再翻過來繼續。 "Repeat"也是讓漸變繼續，不過是跳過返回的過程，直接回到起始狀態，然後重新漸變。
 
-

+![](/@api/deki/files/353/=SVG_SpreadMethod_Example.png)
 
-
<?xml version="1.0" standalone="no"?>
+```xml
+
 
-<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient"
+
+  
+      
+            spreadMethod="repeat">
+        
+        
+      
+  
+  
+
+```
 
-
另外，兩個漸變都有一個名為gradientUnits的屬性，它用來決定漸變的單位。它有兩個可用值：userSpaceOnUse or objectBoundingBox。 objectBoundingBox是默認值，表示漸變會使用圖形對象的單位，所以你定義坐標時使用的是0到1，它們會自動計算成你的圖形對象使用的尺寸。 userSpaceOnUse表示要用絕對單位，所以你必須知道你的圖形對象的位置，然後將漸變的位置放在那兒。於是放射形漸層可以這樣寫：

+另外，兩個漸變都有一個名為`gradientUnits`的屬性，它用來決定漸變的單位。它有兩個可用值：`userSpaceOnUse` or `objectBoundingBox`。 `objectBoundingBox`是默認值，表示漸變會使用圖形對象的單位，所以你定義坐標時使用的是 0 到 1，它們會自動計算成你的圖形對象使用的尺寸。 `userSpaceOnUse`表示要用絕對單位，所以你必須知道你的圖形對象的位置，然後將漸變的位置放在那兒。於是放射形漸層可以這樣寫：
 
-
 <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
-

+```xml
+ 
+```
 
-
你還可以使用gradientTransform屬性創建其他類型的變換，但現在我們還沒說到introduced transforms，所以這些內容會留到後面再講。

+你還可以使用`gradientTransform`屬性創建其他類型的變換，但現在我們還沒說到[introduced transforms](/en/SVG/Tutorial/Basic_Transformations)，所以這些內容會留到後面再講。
 
-
當圖形對象的不是方形時，還有一個需要注意的處理方式：gradientUnits="objectBoundingBox"。但是它太複雜了，需要其他專家來講解。

+當圖形對象的不是方形時，還有一個需要注意的處理方式：`gradientUnits="objectBoundingBox"`。但是它太複雜了，需要其他專家來講解。
 
-
{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}

+{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}
diff --git a/files/zh-tw/web/svg/tutorial/index.md b/files/zh-tw/web/svg/tutorial/index.md
index 3855a5a4a032b4..ee7f53c421fe44 100644
--- a/files/zh-tw/web/svg/tutorial/index.md
+++ b/files/zh-tw/web/svg/tutorial/index.md
@@ -3,47 +3,45 @@ title: SVG教學
 slug: Web/SVG/Tutorial
 translation_of: Web/SVG/Tutorial
 ---
-
SVG是W3C XML的方言之一，用於標記可縮放的向量圖形。目前在Firefox、Opera、Webkit瀏覽器、IE等瀏覽器中已經部分實作。

+[SVG](/en/SVG)是 W3C XML 的方言之一，用於標記可縮放的向量圖形。目前在 Firefox、Opera、Webkit 瀏覽器、IE 等瀏覽器中已經部分實作。
 
-
本教學之目標在解釋SVG內部的技術細節。如果你只是想要畫出漂亮的圖形，你可以在Inkscape的文件頁面上找到更多有用的資源。或是看看另一個好的SVG介绍：W3C的SVG入門。

+本教學之目標在解釋 SVG 內部的技術細節。如果你只是想要畫出漂亮的圖形，你可以在[Inkscape 的文件頁面](http://inkscape.org/doc/)上找到更多有用的資源。或是看看另一個好的 SVG 介绍：[W3C 的 SVG 入門](http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html)。
 
-
備註： 本教學文件還在初期階段，如果你有能力，可以來增加擴展一兩段，寫一整頁的话會更好！

+> **備註：** 本教學文件還在初期階段，如果你有能力，可以來增加擴展一兩段，寫一整頁的话會更好！
 
-
從頭介紹SVG

+##### 從頭介紹 SVG
 
-
+- [導論](/zh-TW/SVG/Tutorial/Introduction)
+- [開始](/en/SVG/Tutorial/Getting_Started)
+- [坐標定位](/en/SVG/Tutorial/Positions)
+- [基本形状](/en/SVG/Tutorial/Basic_Shapes)
+- [路徑](/en/SVG/Tutorial/Paths)
+- [填充與邊框](/en/SVG/Tutorial/Fills_and_Strokes)
+- [漸變](/en/SVG/Tutorial/Gradients)
+- [模式](/en/SVG/Tutorial/Patterns)
+- [文字](/en/SVG/Tutorial/Texts)
+- [基本變换](/en/SVG/Tutorial/Basic_Transformations)
+- [裁剪和遮罩](/en/SVG/Tutorial/Clipping_and_masking)
+- [其他 SVG 内容](/en/SVG/Tutorial/Other_content_in_SVG)
+- [濾镜效果](/en/SVG/Tutorial/Filter_effects)
+- [SVG 字型](/en/SVG/Tutorial/SVG_fonts)
+- [SVG 的 Image 標籤](/en/SVG/Tutorial/SVG_Image_Tag)
+- [SVG 工具](/en/SVG/Tutorial/Tools_for_SVG)
 
-
下面陳列進階主题，需要單獨列出教學。

+下面陳列進階主题，需要單獨列出教學。
 
-
JavaScript脚本化SVG

+##### JavaScript 脚本化 SVG
 
-
待定

+待定
 
-
SVG濾镜教學

+##### SVG 濾镜教學
 
-
待定

+待定
 
-
SVG的SMIL動畫

+##### SVG 的 SMIL 動畫
 
-
待定

+待定
 
-
在SVG中建立字形

+##### 在 SVG 中建立字形
 
-
待定

+待定
diff --git a/files/zh-tw/web/svg/tutorial/introduction/index.md b/files/zh-tw/web/svg/tutorial/introduction/index.md
index f472c9e517f9c2..7476346636d224 100644
--- a/files/zh-tw/web/svg/tutorial/introduction/index.md
+++ b/files/zh-tw/web/svg/tutorial/introduction/index.md
@@ -3,23 +3,37 @@ title: 引言
 slug: Web/SVG/Tutorial/Introduction
 translation_of: Web/SVG/Tutorial/Introduction
 ---
-
{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting_Started") }}

-
SVG（Scalable Vector Graphics）是XML的方言，有点类似XHTML，它可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合并，也可以通过滤镜完全改变外观。

-
SVG于1999年推出，之前有几个相互竞争的格式规范被提交到W3C，但是都没有完全通过。虽然规范已经出现存在很长时间了，但浏览器实现的进度却比较缓慢，所以目前（2009年）应用在web上的SVG内容并不是很多。即便浏览器实现了一些规范，但实现速度完全不能和竞争技术相比，比如HTML Canvas和Adobe Flash，都已经实现了成熟的应用接口。但是SVG也有自身的优点，比如它实现了DOM接口（比Canvas方便），不需要安装第三方插件就可以在浏览器中使用（比Flash方便）。当然，是否使用SVG还要取决于你要实现什么。

-
基本要素

-
HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。一个简单的SVG文档只包含svg根元素，以及基本的形状元素。另外还有一个g元素，它用来把若干个基本形状标记成一个组。

-
在上述内容的基础上，SVG可以成为任何复杂的组合图形，SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。

-
开始之前

-
包括Inkscape在内的很多免费应用原生支持SVG格式的文件。但是本教程建议在学习过程中使用XML或文本编辑器，因为想要理解SVG内部的原理，最好的方法就是动手取写一些SVG的标记。各种SVG浏览器是有差别的，因此很可能当你制作了一个SVG图形，并且用一个工具调试正常后，却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持SVG标准的程度不同，另外，如果你将其他技术和SVG一起使用（比如a href="/en/JavaScript" title="en/JavaScript">JavaScript和CSS），也会出现类似的情况。

-
并非所有的现代浏览器都支持SVG，SVG wiki上有一份比较详细的SVG浏览器列表，Firefox支持SVG 1.5版本中的部分内容，并且支持的程度越来越高。希望通过这里的教程，MDC能帮助开发者理解Gecko内核和其他一些主要实现之间的差异。

-
正式开始之前，你需要基本掌握XML或其他像HTML的标记语言，如果你不是很熟悉XML，这里有几个重点一定要记住：

-
    
-  
  • SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和html不同）
    • 
-  
  • SVG里的属性值必须用引号引起来，就算是数值也必须这样做。
    • 
-

-
SVG是一个庞大的规范，本教程主要涵盖的是基础内容，一旦掌握了这些内容，你就有能力使用元素文档和接口文档，去了解其他任何你想要掌握的内容。

-
SVG的种类

-
自从2003年成为W3C推荐标准以来，最接近的“完整版”SVG是1.1版，它基于1.0版，并且增加了更多便于实现的模块化内容，SVG1.1的第二个版本正在制定当中，完整的SVG1.2本来是下一个标准版本，但已经被SVG2.0取代。SVG2.0正在制定当中，它采用了类似CSS3的制定方法，通过若干松散耦合的组件形成一套标准。

-
除了完整的SVG标准，W3C工作组还在2003年推出了SVG Tiny和SVG Basic。首先SVG Tiny主要是为性能低的小设备生成图元，而SVG Basic实现和完整版SVG里的很多功能，只是舍弃了难以实现的大型渲染（比如动画）。2008年，SVG Tiny1.2成为W3C推荐标准。

-
另外还有一些关于SVG打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。

-
{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting_Started") }}

+{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting_Started") }}
+
+![](/@api/deki/files/348/=SVG_Overview.png)[SVG](/en/SVG)（Scalable Vector Graphics）是[XML](/en/XML)的方言，有点类似 XHTML，它可以用来绘制矢量图形，例如右面展示的图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合并，也可以通过滤镜完全改变外观。
+
+SVG 于 1999 年推出，之前有几个相互竞争的格式规范被提交到[W3C](http://www.w3.org)，但是都没有完全通过。虽然规范已经出现存在很长时间了，但浏览器实现的进度却比较缓慢，所以目前（2009 年）应用在 web 上的 SVG 内容并不是很多。即便浏览器实现了一些规范，但实现速度完全不能和竞争技术相比，比如[HTML Canvas](/en/HTML/Canvas)和 Adobe Flash，都已经实现了成熟的应用接口。但是 SVG 也有自身的优点，比如它实现了 DOM 接口（比 Canvas 方便），不需要安装第三方插件就可以在浏览器中使用（比 Flash 方便）。当然，是否使用 SVG 还要取决于你要实现什么。
+
+### 基本要素
+
+HTML 提供了定义标题、段落、表格等等内容的元素。与此类似，SVG 也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。一个简单的 SVG 文档只包含`svg`根元素，以及基本的形状元素。另外还有一个`g`元素，它用来把若干个基本形状标记成一个组。
+
+在上述内容的基础上，SVG 可以成为任何复杂的组合图形，SVG 支持渐变、旋转、滤镜效果、JavaScript 接口等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。
+
+### 开始之前
+
+包括[Inkscape](http://www.inkscape.org/)在内的很多免费应用原生支持 SVG 格式的文件。但是本教程建议在学习过程中使用 XML 或文本编辑器，因为想要理解 SVG 内部的原理，最好的方法就是动手取写一些 SVG 的标记。各种 SVG 浏览器是有差别的，因此很可能当你制作了一个 SVG 图形，并且用一个工具调试正常后，却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持 SVG 标准的程度不同，另外，如果你将其他技术和 SVG 一起使用（比如 a href="/en/JavaScript" title="en/JavaScript">JavaScript 和[CSS](/en/CSS)），也会出现类似的情况。
+
+并非所有的现代浏览器都支持 SVG，[SVG wiki](http://wiki.svg.org/Viewer_Implementations)上有一份比较详细的 SVG 浏览器列表，Firefox 支持 SVG 1.5 版本中的部分内容，并且支持的程度越来越高。希望通过这里的教程，MDC 能帮助开发者理解 Gecko 内核和其他一些主要实现之间的差异。
+
+正式开始之前，你需要基本掌握 XML 或其他像 HTML 的标记语言，如果你不是很熟悉 XML，这里有几个重点一定要记住：
+
+- SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 html 不同）
+- SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。
+
+SVG 是一个庞大的规范，本教程主要涵盖的是基础内容，一旦掌握了这些内容，你就有能力使用[元素文档](/en/SVG/Element)和[接口文档](/en/SVG/Interface)，去了解其他任何你想要掌握的内容。
+
+### SVG 的种类
+
+自从 2003 年成为 W3C 推荐标准以来，最接近的“完整版”SVG 是 1.1 版，它基于 1.0 版，并且增加了更多便于实现的模块化内容，SVG1.1 的第二个版本正在制定当中，完整的 SVG1.2 本来是下一个标准版本，但已经被 SVG2.0 取代。SVG2.0 正在制定当中，它采用了类似 CSS3 的制定方法，通过若干松散耦合的组件形成一套标准。
+
+除了完整的 SVG 标准，W3C 工作组还在 2003 年推出了 SVG Tiny 和 SVG Basic。首先 SVG Tiny 主要是为性能低的小设备生成图元，而 SVG Basic 实现和完整版 SVG 里的很多功能，只是舍弃了难以实现的大型渲染（比如动画）。2008 年，SVG Tiny1.2 成为 W3C 推荐标准。
+
+另外还有一些关于 SVG 打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。
+
+{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting_Started") }}
diff --git a/files/zh-tw/web/svg/tutorial/paths/index.md b/files/zh-tw/web/svg/tutorial/paths/index.md
index 694b310e85f47d..dc4c8a86a9d38a 100644
--- a/files/zh-tw/web/svg/tutorial/paths/index.md
+++ b/files/zh-tw/web/svg/tutorial/paths/index.md
@@ -6,235 +6,238 @@ tags:
 translation_of: Web/SVG/Tutorial/Paths
 original_slug: Web/SVG/Tutorial/路径
 ---
-
{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
 
-
<path> 元件可說是SVG程式庫中最強大的基本形狀了，你可以用它來產生線條、曲線、圓弧等形狀。

+[``](/en-US/Web/SVG/Element/path) 元件可說是 SVG 程式庫中最強大的[基本形狀](/en-US/docs/Web/SVG/Tutorial/Basic_Shapes)了，你可以用它來產生線條、曲線、圓弧等形狀。
 
-
路徑(paths) 藉由結合多個直線或曲線來產生複雜形狀。路徑和折線雖然可以產生相似外觀的形狀，例如：可由折線組成由單純的直線組成的複雜形狀 。但折線需要產生許多小段的直線去模擬曲線的外觀，如果遇到需要放大的情形，會較難 scale。好好瞭解路徑對於繪製 SVG 是重要的。雖然不建議使用XML編輯器或文字編輯器建立複雜路徑，但了解它們的工作原理，將與助於發現和修復 SVG 的顯示問題。

+路徑(paths) 藉由結合多個直線或曲線來產生複雜形狀。路徑和折線雖然可以產生相似外觀的形狀，例如：可由[折線](/en-US/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline)組成由單純的直線組成的複雜形狀 。但折線需要產生許多小段的直線去模擬曲線的外觀，如果遇到需要放大的情形，會較難 scale。好好瞭解路徑對於繪製 SVG 是重要的。雖然不建議使用 XML 編輯器或文字編輯器建立複雜路徑，但了解它們的工作原理，將與助於發現和修復 SVG 的顯示問題。
 
-
path 元素，由一個屬性定義：{{ SVGAttr("d") }}（可參考基本形狀 ）。 "d" 屬性包含了一系列的指令(command)，以及這些指令各自使用的參數。

+path 元素，由一個屬性定義：{{ SVGAttr("d") }}（可參考[基本形狀](/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) ）。 `"d"` 屬性包含了一系列的指令(command)，以及這些指令各自使用的參數。
 
-
 

+Each of the commands is instantiated (for example, creating a class, naming and locating it) by a specific letter. For instance, let's move to the x and y coordinates (10, 10). The "Move to" command is called with the letter M. When the parser runs into this letter, it knows you want to move to a point. So, to move to (10,10) you would use the command "M 10 10". After that, the parser begins reading for the next command.
 
-
Each of the commands is instantiated (for example, creating a class, naming and locating it) by a specific letter. For instance, let's move to the x and y coordinates (10, 10). The "Move to" command is called with the letter M. When the parser runs into this letter, it knows you want to move to a point. So, to move to (10,10) you would use the command "M 10 10". After that, the parser begins reading for the next command.

+All of the commands also come in two variants. An **uppercase letter** specifies absolute coordinates on the page, and a **lowercase letter** specifies relative coordinates (e.g. _move from the last point 10px up and 7px to the left_).
 
-
All of the commands also come in two variants. An uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates (e.g. move from the last point 10px up and 7px to the left).

+Coordinates in the `"d"` attribute are **always unitless** and hence in the user coordinate system. Later, we will learn how paths can be transformed to suit other needs.
 
-
Coordinates in the "d" attribute are always unitless and hence in the user coordinate system. Later, we will learn how paths can be transformed to suit other needs.

+## Line commands
 
-
Line commands

+There are five line commands for `` nodes. The first command is the "Move To" or M, which was described above. It takes two parameters, a coordinate ' x ' and coordinate ' y ' to move to. If your cursor already was somewhere on the page, no line is drawn to connect the two places. The "Move To" command appears at the beginning of paths to specify where the drawing should start. e.g. :
 
-
There are five line commands for <path> nodes. The first command is the "Move To" or M, which was described above. It takes two parameters, a coordinate  ' x ' and coordinate ' y ' to move to. If your cursor already was somewhere on the page, no line is drawn to connect the two places. The "Move To" command appears at the beginning of paths to specify where the drawing should start. e.g. :

+    M x y
 
-
M x y
-

+or
 
-
or

+    m dx dy
 
-
m dx dy

+In the following example we only have a point at (10,10). Note, though, that it wouldn't show up if you were just drawing the path normally. For example:
 
-
In the following example we only have a point at (10,10). Note, though, that it wouldn't show up if you were just drawing the path normally. For example:

+![](/@api/deki/files/45/=Blank_Path_Area.png)
 
-

+```xml
+
 
-
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  
 
-  <path d="M10 10"/>
+  
+  
 
-  <!-- Points -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
+
+```
 
-</svg>

+There are three commands that draw lines. The most generic is the "Line To" command, `called with L`. `L` takes two parameters—x and y coordinates—and draws a line from the current position to a new position.
 
-
There are three commands that draw lines. The most generic is the "Line To" command, called with L. L takes two parameters—x and y coordinates—and draws a line from the current position to a new position.

+     L x y (or l dx dy)
 
-
 L x y (or l dx dy)
-

+There are two abbreviated forms for drawing horizontal and vertical lines. `H` draws a horizontal line, and `V` draws a vertical line. Both commands only take one argument since they only move in one direction.
 
-
There are two abbreviated forms for drawing horizontal and vertical lines. H draws a horizontal line, and V draws a vertical line. Both commands only take one argument since they only move in one direction.

+     H x (or h dx)
+     V y (or v dy)
 
-
 H x (or h dx)
- V y (or v dy)
-

+An easy place to start is by drawing a shape. We will start with a rectangle (the same type that could be more easily made with a `` element). It's composed of horizontal and vertical lines only:
 
-
An easy place to start is by drawing a shape. We will start with a rectangle (the same type that could be more easily made with a <rect> element). It's composed of horizontal and vertical lines only:

+![](/@api/deki/files/292/=Path_Line_Commands.png)
 
-

+```xml
+
 
-
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  
 
-  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
+  
+  
+  
+  
+  
 
-  <!-- Points -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-  <circle cx="90" cy="90" r="2" fill="red"/>
-  <circle cx="90" cy="10" r="2" fill="red"/>
-  <circle cx="10" cy="90" r="2" fill="red"/>
+
+```
 
-</svg>

+We can shorten the above path declaration a little bit by using the "Close Path" command, called with `Z`. This command draws a straight line from the current position back to the first point of the path. It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command.
 
-
We can shorten the above path declaration a little bit by using the "Close Path" command, called with Z. This command draws a straight line from the current position back to the first point of the path. It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command.

+     Z (or z)
 
-
 Z (or z)
-

+So our path above could be shortened to:
 
-
So our path above could be shortened to:

+```xml
+ 
+```
 
-
 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
-

+You can also use the relative form of these commands to draw the same picture. Relative commands are called by using lowercase letters, and rather than moving the cursor to an exact coordinate, they move it relative to its last position. For instance, since our box is 80 x 80, the path element could have been written:
 
-
You can also use the relative form of these commands to draw the same picture. Relative commands are called by using lowercase letters, and rather than moving the cursor to an exact coordinate, they move it relative to its last position. For instance, since our box is 80 x 80, the path element could have been written:

+```xml
+ 
+```
 
-
 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
-

+The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.
 
-
The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.

+In these examples, it would probably be simpler to use the \ or \ elements. However, paths are used so often in drawing SVG that developers may be more comfortable using them instead. There is no real performance penalty or bonus for using one or the other.
 
-
In these examples, it would probably be simpler to use the <polygon> or <polyline> elements. However, paths are used so often in drawing SVG that developers may be more comfortable using them instead. There is no real performance penalty or bonus for using one or the other.

+## Curve commands
 
-
Curve commands

+There are three different commands that you can use to create smooth curves. Two of those curves are Bezier curves, and the third is an "arc" or part of a circle. You might have already gained practical experience with Bezier curves using path tools in Inkscape, Illustrator or Photoshop. For a complete description of the math behind Bezier curves, go to a reference like the one on [Wikipedia](http://en.wikipedia.org/wiki/B%C3%A9zier_curve). There are an infinite number of Bezier curves, but only two simple ones are available in path elements: a cubic one, called with C, and a quadratic one, called with Q.
 
-
There are three different commands that you can use to create smooth curves. Two of those curves are Bezier curves, and the third is an "arc" or part of a circle. You might have already gained practical experience with Bezier curves using path tools in Inkscape, Illustrator or Photoshop. For a complete description of the math behind Bezier curves, go to a reference like the one on Wikipedia. There are an infinite number of Bezier curves, but only two simple ones are available in path elements: a cubic one, called with C, and a quadratic one, called with Q.

+### Bezier Curves
 
-
Bezier Curves

+The cubic curve, C, is the slightly more complex curve. Cubic Beziers take in two control points for each point. Therefore, to create a cubic Bezier, you need to specify three sets of coordinates.
 
-
The cubic curve, C, is the slightly more complex curve. Cubic Beziers take in two control points for each point. Therefore, to create a cubic Bezier, you need to specify three sets of coordinates.

+     C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
 
-
 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
-

+The last set of coordinates here (x,y) are where you want the line to end. The other two are control points. (x1,y1) is the control point for the start of your curve, and (x2,y2) is the control point for the end. The control points essentially describe the slope of your line starting at each point. The Bezier function then creates a smooth curve that transfers you from the slope you established at the beginning of your line, to the slope at the other end.
 
-
The last set of coordinates here (x,y) are where you want the line to end. The other two are control points. (x1,y1) is the control point for the start of your curve, and (x2,y2) is the control point for the end. The control points essentially describe the slope of your line starting at each point. The Bezier function then creates a smooth curve that transfers you from the slope you established at the beginning of your line, to the slope at the other end.

+![Cubic Bézier Curves with grid](https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png)
 
-
Cubic Bézier Curves with grid

+```xml
+
 
-
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  
+  
+  
+  
+  
+  
+  
+  
+  
 
-  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
-  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
-  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
-  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
-  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
-  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
-  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
-  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
-  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+
+```
 
-</svg>
-

+The example above creates nine Cubic Bezier curves. As the curves move toward the right, the control points become spread out horizontally. As the curves move downward, they become further separated from the end points. The thing to note here is that the curve starts in the direction of the first control point, and then bends so that it arrives along the direction of the second control point.
 
-
The example above creates nine Cubic Bezier curves. As the curves move toward the right, the control points become spread out horizontally. As the curves move downward, they become further separated from the end points. The thing to note here is that the curve starts in the direction of the first control point, and then bends so that it arrives along the direction of the second control point.

+You can string together several Bezier curves to create extended, smooth shapes. Often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. In this case, you can use a shortcut version of the cubic Bezier, designated by the command `S` (or `s`).
 
-
You can string together several Bezier curves to create extended, smooth shapes. Often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. In this case, you can use a shortcut version of the cubic Bezier, designated by the command S (or s).

+     S x2 y2, x y (or s dx2 dy2, dx dy)
 
-
 S x2 y2, x y (or s dx2 dy2, dx dy)
-

+`S` produces the same type of curve as earlier, but if it follows another `S` command or a `C` command, the first control point is assumed to be a reflection of the one used previously. If the `S` command doesn't follow another `S` or `C` command, then the current position of the cursor is used as the first control point. In this case the result is the same as what the `Q` command would have produced with the same parameters. An example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue.
 
-
S produces the same type of curve as earlier, but if it follows another S command or a C command, the first control point is assumed to be a reflection of the one used previously. If the S command doesn't follow another S or C command, then the current position of the cursor is used as the first control point. In this case the result is the same as what the Q command would have produced with the same parameters. An example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue.

+![ShortCut_Cubic_Bezier_with_grid.png](https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png)
 
-
ShortCut_Cubic_Bezier_with_grid.png

+```xml
+
+  
+
+```
 
-
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
-</svg>

+The other type of Bezier curve, the quadratic curve called with Q, is actually a simpler curve than the cubic one. It requires one control point which determines the slope of the curve at both the start point and the end point. It takes two arguments: the control point and the end point of the curve. Note that the co-ordinate deltas for `q` are both relative to the previous point (that is, `dx` and `dy` are not relative to `dx1` and `dy1`).
 
-
The other type of Bezier curve, the quadratic curve called with Q, is actually a simpler curve than the cubic one. It requires one control point which determines the slope of the curve at both the start point and the end point. It takes two arguments: the control point and the end point of the curve. Note that the co-ordinate deltas for q are both relative to the previous point (that is, dx and dy are not relative to dx1 and dy1).

+     Q x1 y1, x y (or q dx1 dy1, dx dy)
 
-
 Q x1 y1, x y (or q dx1 dy1, dx dy)
-

+![Quadratic Bézier with grid](https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png)
 
-
Quadratic Bézier with grid

+```xml
+
+  
+
+```
 
-
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
-</svg>

+As with the cubic Bezier curve, there is a shortcut for stringing together multiple quadratic Beziers, called with T.
 
-
As with the cubic Bezier curve, there is a shortcut for stringing together multiple quadratic Beziers, called with T.

+     T x y (or t dx dy)
 
-
 T x y (or t dx dy)
-

+This shortcut looks at the previous control point you used and infers a new one from it. This means that after your first control point, you can make fairly complex shapes by specifying only end points.
 
-
This shortcut looks at the previous control point you used and infers a new one from it. This means that after your first control point, you can make fairly complex shapes by specifying only end points.

+> **備註：** This only works if the previous command was a Q or a T command. If it is not, then the control point is assumed to be the same as the previous point, and you'll only draw lines.
 
-

-
備註： This only works if the previous command was a Q or a T command. If it is not, then the control point is assumed to be the same as the previous point, and you'll only draw lines.

-

+![Shortcut_Quadratic_Bezier_with_grid.png](https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png)
 
-
Shortcut_Quadratic_Bezier_with_grid.png

+```xml
+
+  
+
+```
 
-
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
-</svg>

+Both curves produce similar results, although the cubic allows you greater freedom in exactly what your curve looks like. Deciding which curve to use is situational and depends on the amount of symmetry your line has.
 
-
Both curves produce similar results, although the cubic allows you greater freedom in exactly what your curve looks like. Deciding which curve to use is situational and depends on the amount of symmetry your line has.

+### Arcs
 
-
Arcs

+The other type of curved line you can create using SVG is the arc, called with A. Arcs are sections of circles or ellipses. For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles there are two possible paths that you can take to connect the points, so in any situation there are four possible arcs available. Because of that, arcs have to take in quite a few arguments:
 
-
The other type of curved line you can create using SVG is the arc, called with A. Arcs are sections of circles or ellipses. For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles there are two possible paths that you can take to connect the points, so in any situation there are four possible arcs available. Because of that, arcs have to take in quite a few arguments:

+     A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+     a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
 
-
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
- a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
-

+At its start, the arc element takes in two arguments for the x-radius and y-radius. If you need to, look up [ellipses](/en-US/Web/SVG/Element/ellipse) to see how they behave. The final two arguments designate the x and y coordinates to end the stroke. Together, these four values define the basic structure of the arc.
 
-
At its start, the arc element takes in two arguments for the x-radius and y-radius. If you need to, look up ellipses to see how they behave. The final two arguments designate the x and y coordinates to end the stroke. Together, these four values define the basic structure of the arc.

+The third parameter describes the rotation of the arc. This is best explained with an example:
 
-
The third parameter describes the rotation of the arc. This is best explained with an example:

+![SVGArcs_XAxisRotation_with_grid](svgarcs_xaxisrotation_with_grid.png)
 
-
SVGArcs_XAxisRotation_with_grid

-
-
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 315
+```xml
+
+  
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+
+```
 
-
The example shows a path element that goes diagonally across the page. At its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). In the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. For the second arc, though, the x-axis-rotation is set to -45 degrees. This rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.

+The example shows a path element that goes diagonally across the page. At its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). In the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. For the second arc, though, the x-axis-rotation is set to -45 degrees. This rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.
 
-
For the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse. In a slightly modified example you can see the two ellipses that form the four different arcs:

+For the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse. In a slightly modified example you can see the two ellipses that form the four different arcs:
 
-
Show the 4 arcs on the Ellipse example

+![Show the 4 arcs on the Ellipse example](svgarcs_xaxisrotation_with_grid_ellipses.png)
 
-
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
-  <path d="M10 315
-           L 110 215
-           A 36 60 0 0 1 150.71 170.29
-           L 172.55 152.45
-           A 30 50 -45 0 1 215.1 109.9
-           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
-  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
-  <circle cx="110" cy="215" r="2" fill="red"/>
-  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
-  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
-</svg>
-

+    
+      
+      
+      
+      
+      
+    
 
-
Notice that each of the blue ellipses are formed by two arcs, depending if you travel clockwise or counter-clockwise. Each ellipse has one short arc and one long arc. The two ellipses are just mirror images of each other. They are flipped along the line formed from the start->end points.

+Notice that each of the blue ellipses are formed by two arcs, depending if you travel clockwise or counter-clockwise. Each ellipse has one short arc and one long arc. The two ellipses are just mirror images of each other. They are flipped along the line formed from the start->end points.
 
-
If the start->end points are farther than the ellipse's x and y radius can reach, the ellipse's radii will be minimally expanded so it could reach the start->end points. The interactive codepen at the bottom of this page demonstrates this well. To determine if your ellipse's radii is large enough to require expanding, you would need to solve a system of equations such as this on wolfram alpha. This computation is for the non-rotated ellipse with start->end (110, 215)->(150.71, 170.29). The solution, (x, y), is the center of the ellipse(s). The solution will be imaginary if your ellipse radii is too small. This second computation is for the non-rotated ellipse with start->end (110, 215)->(162.55, 162.45). The solution has a small imaginary component because the ellipse was just barely expanded.

+If the start->end points are farther than the ellipse's x and y radius can reach, the ellipse's radii will be minimally expanded so it could reach the start->end points. The interactive codepen at the bottom of this page demonstrates this well. To determine if your ellipse's radii is large enough to require expanding, you would need to solve a system of equations such as [this on wolfram alpha](). This computation is for the non-rotated ellipse with start->end (110, 215)->(150.71, 170.29). The solution, (x, y), is the center of the ellipse(s). The solution will be [imaginary]() if your ellipse radii is too small. This second computation is for the non-rotated ellipse with start->end (110, 215)->(162.55, 162.45). The solution has a small imaginary component because the ellipse was just barely expanded.
 
-
The four different paths mentioned above are determined by the next two argument flags. As mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles you will travel around. The example below shows all four possible combinations, along with the two circles for each case.

+The four different paths mentioned above are determined by the next two argument flags. As mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles you will travel around. The example below shows all four possible combinations, along with the two circles for each case.
 
-

+![](/@api/deki/files/345/=SVGArcs_Flags.png)
 
-
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
-  <path d="M80 80
+```xml
+
+  
+  
+  
+  
+           L 275 230 Z" fill="blue"/>
+
+```
 
-
Arcs are an easy way to create pieces of circles or ellipses in your drawings. For instance, a pie chart would require a different arc for each piece.

+Arcs are an easy way to create pieces of circles or ellipses in your drawings. For instance, a pie chart would require a different arc for each piece.
 
-
If you're transitioning to SVG from Canvas, arcs can be the hardest thing to learn, but are also much more powerful. Complete circles and ellipses are actually the only shapes that SVG arcs have trouble drawing. Because the start and end points for any path going around a circle are the same point, there are an infinite number of circles that could be chosen, and the actual path is undefined. It's possible to approximate them by making the start and end points of your path slightly askew, and then connecting them with another path segment. For example, you can make a circle with an arc for each semicircle. At that point, it's often easier to use a real circle or ellipse node instead. This interactive demo might help you understand the concepts behind SVG arcs: http://codepen.io/lingtalfi/pen/yaLWJG (tested in chrome and firefox only, might not work in your browser)

+If you're transitioning to SVG from [Canvas](/en/HTML/Canvas), arcs can be the hardest thing to learn, but are also much more powerful. Complete circles and ellipses are actually the only shapes that SVG arcs have trouble drawing. Because the start and end points for any path going around a circle are the same point, there are an infinite number of circles that could be chosen, and the actual path is undefined. It's possible to approximate them by making the start and end points of your path slightly askew, and then connecting them with another path segment. For example, you can make a circle with an arc for each semicircle. At that point, it's often easier to use a real circle or ellipse node instead. This interactive demo might help you understand the concepts behind SVG arcs:  (tested in chrome and firefox only, might not work in your browser)
 
-
{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
diff --git a/files/zh-tw/web/svg/tutorial/patterns/index.md b/files/zh-tw/web/svg/tutorial/patterns/index.md
index 95562d846538f7..7bee9b614fb69f 100644
--- a/files/zh-tw/web/svg/tutorial/patterns/index.md
+++ b/files/zh-tw/web/svg/tutorial/patterns/index.md
@@ -3,51 +3,71 @@ title: 图案
 slug: Web/SVG/Tutorial/Patterns
 translation_of: Web/SVG/Tutorial/Patterns
 ---
-
{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}

-
pattern（图案）是一个比较难理解的填充类型。同时，pattern的作用很强大，所以在这里需要进行一些讨论，以便对填充模式有一个大致的了解。和渐变一样，<pattern>元素也需要放在SVG文件的&ltldefs>段落里。

-

-
<?xml version="1.0" standalone="no"?>
-<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <defs>
-    <linearGradient id="Gradient1">
-      <stop offset="5%" stop-color="white"/>
-      <stop offset="95%" stop-color="blue"/>
-    </linearGradient>
-    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-      <stop offset="5%" stop-color="red"/>
-      <stop offset="95%" stop-color="orange"/>
-    </linearGradient>
-
-    <pattern id="Pattern" x=".05" y=".05" width=".25" height=".25">
-      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
-      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
-      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
-    </pattern>
-
-  </defs>
-
-  <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
-</svg>

-
在pattern元素里，你可以使用任意的基本图形元素，也可以按照之前所学的方法给它们设置样式，包括渐变和不透明度。在上面的例子里，我们在pattern元素里放了一个圆形和两个矩形元素，它们相互重叠，其中一个矩形是另一个矩形的两倍大小，用来填满pattern。

-
pattern最难理解的是定义尺寸和单位。在上面的例子里，我们给pattern元素定义了width和height属性，用来描述pattern占据的尺寸范围，另外还有x和y属性，用来定义pattern起点的偏移量。它们的具体解释如下：

-
渐变有gradientUnits属性，pattern也有一个类似的属性patternUnits，用来定义属性采用的单位，它的默认值是objectBoundingBox，等同于pattern采用的宽高缩放比是1。在上面的例子里，我们需要pattern的填充效果在纵向和横向都重复4次，所以width和height设置的值都是0.25，意思是pattern的填充效果的宽和高是整个图形宽高的1/4（0.25）。

-
与渐变不同的是，pattern还有另外一个属性patternContentUnits，用来描述pattern内部形状使用的单位，这个属性的默认值是userSpaceOnUse，它与patternUnits属性相反，即：如果你没定义patternContentUnits，也没有定义patternUnits，那么pattern内部采用的坐标单位，会不同于pattern采用的坐标单位。这个地方可能会有一点不好理解。在上面的例子中，我们考虑到这个图形的尺寸是200px见方，pattern需要在纵向和横向都重复4次，这意味着pattern的尺寸是50*50px的正方形，pattern内部的矩形和圆形应该位于50*50px的范围内，任何超出范围的部分都不会被显示。另外，pattern还有10px的偏移量，由于它是从左上角开始显示，所以x和y属性应该是10/200=0.05。

-
这里需要说明一下，当图形的尺寸发生变化时，pattern也会自动缩放，适应图形的变化，但是pattern内部的图形不会改变尺寸。所以，尽管我们仍然设置了4次重复，但pattern内部的元素仍然保持原尺寸，所以它们之间有比较大的空白。通过改变patternContentUnits属性，我们可以让所有元素使用同样的单位。

-
 <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
-   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
-   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
-   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
- </pattern>
-

-
现在，由于pattern内部的元素和pattern本身采用相同的单位，我们就不用再设置偏移量去纠正pattern的起始位置，并且，当图形的尺寸放大时，pattern也会自动缩放，所以pattern内部的元素数目和重复次数都不会变化。这里有一个使用userSpaceOnUse的对比例子，如果图形改变尺寸，pattern会保持原尺寸，并且重复更多次，达到填满图形的效果。

-
在Gecko引擎中，如果圆形的半径小于 0.075将会出现一些问题。（这可能是pattern独有的bug，也可能在所有情况下都是bug，尚不确定。）为了避免这种错误出现，应尽量避免使用objectBoundingBox。

-
以上这些都不是我们通常理解的pattern。pattern一般会设置一个尺寸，并且独立于图形进行重复。如果像下面这样做，那么pattern和它内部的元素都会被创建在当前用户空间内，并且不会被改变：

-
 <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
-   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
-   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
-   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
- </pattern>
-

-
当然，这意味着当你改变图形的尺寸后，pattern不会缩放。上面提到的三种情况都会被放在下面的例子里，将图形绘制在一个拉长到300px高度的画布上。图示可能并不详尽，你可以在你的应用里改变更多设置项。

-
Image:SVG_Pattern_Comparison_of_Units.pngo

-
{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}

+{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}
+
+pattern（图案）是一个比较难理解的填充类型。同时，pattern 的作用很强大，所以在这里需要进行一些讨论，以便对填充模式有一个大致的了解。和渐变一样，[``](/en/SVG/Element/pattern)元素也需要放在 SVG 文件的`<ldefs>`段落里。
+
+![](/@api/deki/files/350/=SVG_Pattern_Example.png)
+
+```xml
+
+
+  
+    
+      
+      
+    
+    
+      
+      
+    
+
+    
+      
+      
+      
+    
+
+  
+
+  
+
+```
+
+在 pattern 元素里，你可以使用任意的基本图形元素，也可以按照之前所学的方法给它们设置样式，包括渐变和不透明度。在上面的例子里，我们在 pattern 元素里放了一个圆形和两个矩形元素，它们相互重叠，其中一个矩形是另一个矩形的两倍大小，用来填满 pattern。
+
+pattern 最难理解的是定义尺寸和单位。在上面的例子里，我们给 pattern 元素定义了`width`和`height`属性，用来描述 pattern 占据的尺寸范围，另外还有`x`和`y`属性，用来定义 pattern 起点的偏移量。它们的具体解释如下：
+
+渐变有`gradientUnits`属性，pattern 也有一个类似的属性`patternUnits`，用来定义属性采用的单位，它的默认值是 objectBoundingBox，等同于 pattern 采用的宽高缩放比是 1。在上面的例子里，我们需要 pattern 的填充效果在纵向和横向都重复 4 次，所以 width 和 height 设置的值都是 0.25，意思是 pattern 的填充效果的宽和高是整个图形宽高的 1/4（0.25）。
+
+与渐变不同的是，pattern 还有另外一个属性`patternContentUnits`，用来描述 pattern 内部形状使用的单位，这个属性的默认值是 userSpaceOnUse，它与 patternUnits 属性相反，即：如果你没定义 patternContentUnits，也没有定义 patternUnits，那么 pattern 内部采用的坐标单位，会不同于 pattern 采用的坐标单位。这个地方可能会有一点不好理解。在上面的例子中，我们考虑到这个图形的尺寸是 200px 见方，pattern 需要在纵向和横向都重复 4 次，这意味着 pattern 的尺寸是 50\*50px 的正方形，pattern 内部的矩形和圆形应该位于 50\*50px 的范围内，任何超出范围的部分都不会被显示。另外，pattern 还有 10px 的偏移量，由于它是从左上角开始显示，所以 x 和 y 属性应该是 10/200=0.05。
+
+这里需要说明一下，当图形的尺寸发生变化时，pattern 也会自动缩放，适应图形的变化，但是 pattern 内部的图形不会改变尺寸。所以，尽管我们仍然设置了 4 次重复，但 pattern 内部的元素仍然保持原尺寸，所以它们之间有比较大的空白。通过改变`patternContentUnits`属性，我们可以让所有元素使用同样的单位。
+
+```xml
+ 
+   
+   
+   
+ 
+```
+
+现在，由于 pattern 内部的元素和 pattern 本身采用相同的单位，我们就不用再设置偏移量去纠正 pattern 的起始位置，并且，当图形的尺寸放大时，pattern 也会自动缩放，所以 pattern 内部的元素数目和重复次数都不会变化。这里有一个使用 userSpaceOnUse 的对比例子，如果图形改变尺寸，pattern 会保持原尺寸，并且重复更多次，达到填满图形的效果。
+
+在 Gecko 引擎中，如果圆形的半径小于 0.075 将会出现一些问题。（这可能是 pattern 独有的 bug，也可能在所有情况下都是 bug，尚不确定。）为了避免这种错误出现，应尽量避免使用 objectBoundingBox。
+
+以上这些都不是我们通常理解的 pattern。pattern 一般会设置一个尺寸，并且独立于图形进行重复。如果像下面这样做，那么 pattern 和它内部的元素都会被创建在当前用户空间内，并且不会被改变：
+
+```xml
+ 
+   
+   
+   
+ 
+```
+
+当然，这意味着当你改变图形的尺寸后，pattern 不会缩放。上面提到的三种情况都会被放在下面的例子里，将图形绘制在一个拉长到 300px 高度的画布上。图示可能并不详尽，你可以在你的应用里改变更多设置项。
+
+![Image:SVG_Pattern_Comparison_of_Units.png](/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png)o
+
+{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}
diff --git a/files/zh-tw/web/svg/tutorial/positions/index.md b/files/zh-tw/web/svg/tutorial/positions/index.md
index d9b64a103dbd54..aaf393080c6b14 100644
--- a/files/zh-tw/web/svg/tutorial/positions/index.md
+++ b/files/zh-tw/web/svg/tutorial/positions/index.md
@@ -3,49 +3,41 @@ title: 座標定位
 slug: Web/SVG/Tutorial/Positions
 tags:
   - SVG
-  - 'SVG:教程'
+  - SVG:教程
 translation_of: Web/SVG/Tutorial/Positions
 ---
-
{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
 
-
網格

+## 網格
 
-
 對於所有元素，SVG使用的座標系统或者說網格系統，和Canvas用的差不多（所有電腦繪圖绘图都差不多）。這種座標系统是：以頁面的左上角為(0,0)坐標點，坐標以像素為單位，x軸正方向是向右，y軸正方向是向下。注意，這和你小時候所教的繪圖方式是相反的。但是在HTML文檔中，元素都是用這種方式定位的。

+![](/@api/deki/files/78/=Canvas_default_grid.png) 對於所有元素，SVG 使用的座標系统或者說網格系統，和[Canvas](/zh-CN/HTML/Canvas)用的差不多（所有電腦繪圖绘图都差不多）。這種座標系统是：以頁面的左上角為(0,0)坐標點，坐標以像素為單位，x 軸正方向是向右，y 軸正方向是向下。注意，這和你小時候所教的繪圖方式是相反的。但是在 HTML 文檔中，元素都是用這種方式定位的。
 
-
範例：

+#### 範例：
 
-
元素

+元素
 
-
<rect x="0" y="0" width="100" height="100" />
+    
 
-

+定義一个矩形，即從左上角開始，向右延展 100px，向下延展 100px，形成一个 100\*100 大的矩形。
 
-
定義一个矩形，即從左上角開始，向右延展100px，向下延展100px，形成一个100*100大的矩形。

+### 什麼是 "像素"?
 
-
什麼是 "像素"?

+基本上，在 SVG 文檔中的 1 个像素對應輸出設備（比如螢幕）上的 1 個像素。但是這種情况是可以改變的，否則 SVG 的名字裡也不至於會有“Scalable”（可縮放）這個詞。如同 CSS 可以定義字體的絕對大小和相對大小，SVG 也可以義絕對大小（比如使用“pt”或“cm”標示單位）同時 SVG 也能使用相對大小，只需给出數字，不標明單位，輸出時就會採用用戶的單位。
 
-
基本上，在 SVG 文檔中的1个像素對應輸出設備（比如螢幕）上的1個像素。但是這種情况是可以改變的，否則 SVG 的名字裡也不至於會有“Scalable”（可縮放）這個詞。如同CSS可以定義字體的絕對大小和相對大小，SVG也可以義絕對大小（比如使用“pt”或“cm”標示單位）同時SVG也能使用相對大小，只需给出數字，不標明單位，輸出時就會採用用戶的單位。

+在没有进一步规范说明的情况下，1 个用户单位等同于 1 个屏幕单位。要明确改变这种设定，SVG 里有多种方法。我们从`svg`根元素开始：
 
-
在没有进一步规范说明的情况下，1个用户单位等同于1个屏幕单位。要明确改变这种设定，SVG里有多种方法。我们从svg根元素开始：

+    
 
-
<svg width="100" height="100">
+上面的元素定義了一個 100\*100px 的 SVG 畫布，這裡 1 用戶單位等同於 1 螢幕單位。
 
-

+    
 
-
上面的元素定義了一個100*100px的SVG畫布，這裡1用戶單位等同於1螢幕單位。

+這裡定義的畫布尺寸是 200\*200px。但是，viewBox 屬性定義了畫布上可以顯示的區域：從(0,0)點開始，100 寬\*100 高的區域。這個 100\*100 的區域，會放到 200\*200 的畫布上顯示。於是就形成了放大兩倍的效果。
 
-
<svg width="200" height="200" viewBox="0 0 100 100">
+用戶單位和螢幕單位的映射關係被稱為**用戶座標系統**。除了縮放之外，座標系統還可以旋轉、傾斜、翻轉。預設的用戶座標系統 1 用戶像素等於設備上的 1 像素（但是設備上可能會自己定義 1 像素到底是多大）。在定義了具體尺寸單位的 SVG 中，比如單位是“cm”或“in”，最終圖形會以實際大小的 1 比 1 比例呈現。
 
-

+下面是引自 SVG1.1 規範的一段說明：
 
-
這裡定義的畫布尺寸是200*200px。但是，viewBox屬性定義了畫布上可以顯示的區域：從(0,0)點開始，100寬*100高的區域。這個100*100的區域，會放到200*200的畫布上顯示。於是就形成了放大兩倍的效果。

+> \[…] 假設在用戶的設備環境裡，1px 等於 0.2822222 毫米（即分辨率是 90dpi），那麼所有的 SVG 內容都會按照這種比例處理： \[…] "1cm" 等於 "35.43307px" （即 35.43307 用戶單位）；
 
-
用戶單位和螢幕單位的映射關係被稱為用戶座標系統。除了縮放之外，座標系統還可以旋轉、傾斜、翻轉。預設的用戶座標系統1用戶像素等於設備上的1像素（但是設備上可能會自己定義1像素到底是多大）。在定義了具體尺寸單位的SVG中，比如單位是“cm”或“in”，最終圖形會以實際大小的1比1比例呈現。

-
-
下面是引自SVG1.1規範的一段說明：

-
-

-
[…] 假設在用戶的設備環境裡，1px等於0.2822222毫米（即分辨率是90dpi），那麼所有的SVG內容都會按照這種比例處理： […] "1cm" 等於 "35.43307px" （即35.43307用戶單位）；

-

-
-
{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
diff --git a/files/zh-tw/web/tutorials/index.md b/files/zh-tw/web/tutorials/index.md
index 1bd91c0547ddda..2a7fd7a6814c56 100644
--- a/files/zh-tw/web/tutorials/index.md
+++ b/files/zh-tw/web/tutorials/index.md
@@ -10,239 +10,130 @@ tags:
   - Tutorial
 translation_of: Web/Tutorials
 ---
-
這個頁面提供了許多關於網路相關技術的說明及學習文件。無論你是正在打基礎的新手或有經驗的老手，相信在這個頁面你都能找到許多有用的資源。這些開發資源是由具有前瞻思維的公司及擁抱開放標準的開發者所提供，允許任何人翻譯它並以 Creative Commons 的條款釋出。

-
-
Web 完全新手

-
-

- 
Web 新手上路

- 
本系列文章簡介 web 開發 (web development) 是怎麼一回事。你將會設置所需要的工具、製作一個簡易的網頁，然後發表你的程式碼。

-

-
-
HTML 教學

-
-
初級

-
-

-

-

- 
HTML入門

- 
此單元，為了孰悉重要的概念和語法，思考將 HTML 轉為文字, 如何建立超連鏈接, 以及如何使用 HTML 架構建立網站做好準備。

- 
MDN HTML 元素引用

- 
HTML 元素綜合參考。以及在不同瀏覽器的支援程度。

-

-

-
-

-

- 
使用 HTML 建立一個簡易網站 (The Blog Starter)

- 
適用於 HTML 初學者的指南，其中包含常見的標籤( tag ), 其中包括利用編碼範例步驟，一步步指導建立一個基本網頁。

- 
初學者 HTML 指南 (Website Setup)

- 
此指南將指導你如何使用 HTML 和 HTML5 標籤 (tags) 建立基礎網站。 簡易的步驟教學，以及包含可用於提升編碼技巧的圖像和資源。

- 
HTML 挑戰  (Wikiversity)

- 
使用這些挑戰來磨練你的 HTML 技能 (例如 :  "Should I use an <h2> element or a <strong> element?"), 注意這些含有意義的標籤。

-

-

-

-
-
中級

-
-

-

-

- 
多媒體及崁入

- 
此單元探討包含如何使用 HTML 崁入多媒體於網頁之中，包括使用不同方式讓崁入圖片，影片，聲音檔，甚至是其他整個網頁。

-

-

-
-

-

- 

- 
HTML 表格

- 
將資料以可理解的方式使用表格呈現在網頁上 {{glossary("Accessibility", "accessible")}} 方法可能是一個挑戰。本文涵蓋基礎的表格標記，以及更複雜的功能，例如實現說明標題及概述。

-

-

-

-
-
高級

-
-

-

-

- 
HTML 表單

- 
表單是網際網路一個非常重要的部分 - 這些涵蓋了網站互動所需的大部分功能，例如 : 註冊、登入、發送回饋，購買產品等。本文將幫助你開始創建客戶回饋表單。

- 
 給程式創作者快速載入 HTML 網頁的提示 

- 
優化網頁，為使用者提供響應式網站，減少 web 服務器和 Internet 連線的負擔。

-

-

-

-
-
CSS 教學

-
-
初級

-
-

-

-

- 
CSS 基本概念

- 
CSS（層疊樣式表）是用於設置網頁樣式的編碼。 CSS Basics將帶領你了解入門所需的內容。 我們將回答以下問題，例如：如何將文字設為黑色或紅色？ 如何讓我的內容顯示在螢幕上的這些地方？ 如何用背景圖片和顏色布置我的網頁？

- 
 介紹 CSS

- 
本單元深入介紹CSS應用，包括選擇器和屬性，編寫CSS規則，將CSS應用於HTML，如何指定CSS中的長度，顏色和其他單位，並列和繼承，框框模組基本知識和CSS除錯。

-

-

-
-

-

- 
樣式框

- 
接下來，我們來看看樣式框，這是建立網頁的基本步驟之一。 在本單元中，我們回顧一下框框模組，通過設置邊框和邊距，自定義背景顏色，圖像和其它以及酷炫的功能（如陰影和框上的濾鏡）來查看樣式框佈局。

- 
樣式文本

- 
在此，我們看看文本樣式基礎，包括設置字體，粗體和斜體，線條和字母間距以及陰影和其他文本功能。 我們通過查看將自定義字體應用於頁面以及樣式列表和鏈接來完善模組。

- 
常見的CSS問題

- 
初學者的常見問題及解答。

-

-

-

-
-
中級

-
-

-

-

- 
CSS 布局

- 
此時，我們已看過CSS基礎知識，如何設置文本樣式，以及如何設置和操作內容所在的框框。 現在是時候看看如何將框框放在彼此之間相對位置上的正確位置。 我們已經涵蓋了必要的先決條件，因此現在可以深入了解CSS佈局，查看不同的顯示設置，包含浮動和定位的傳統佈局方法，以及Flexbox等新的佈局工具。

- 
CSS 參考

- 
完整參考CSS，詳細介紹Firefox和其他瀏覽器的支援度。

-

-

-
-

-

- 
流變格線框架 (A List Apart)

- 
在瀏流器視窗大小調整的同時，能夠流暢地調整內容大小的設計佈局，同時使用字體排版格線。

- 
CSS 挑戰 (Wikiversity)

- 
提高你的CSS技能，並了解需多加練習的地方。

-

-

-

-
-
高級

-
-

-

-

- 
Using CSS transforms

- 
Apply rotation, skewing, scaling, and translation using CSS.

- 
CSS transitions

- 
CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.

-

-

-
-

-

- 
Quick Guide to Implement Web Fonts with @font-face (HTML5 Rocks)

- 
The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.

- 
Starting to Write CSS (David Walsh)

- 
An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.

-

-

-

-
-

-

- 
Canvas tutorial

- 
Learn how to draw graphics using scripting using the canvas element.

- 
HTML5 Doctor

- 
Articles about using HTML5 right now.

-

-

-
-
JavaScript 教學

-
-
初級

-
-

-

-

- 

- 
JavaScript first steps

- 
In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.

- 
JavaScript building blocks

- 
In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.

-

-

-
-

-

- 
Getting started with JavaScript

- 
What is JavaScript and how can it help you?

- 
Codecademy (Codecademy)

- 
Codecademy is a easy way to learn how to code JavaScript. It's interactive and you can do it with your friends.

-

-

-

-
-
中級

-
-

-

-

- 
Introducing JavaScript objects

- 
In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.

- 
Client-side web APIs

- 
When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work.

-

-

-
-

-

- 
A re-Introduction to JavaScript

- 
A recap of the JavaScript programming language aimed at intermediate-level developers.

- 
Eloquent JavaScript

- 
A comprehensive guide to intermediate and advanced JavaScript methodologies.

- 
Speaking JavaScript (Dr. Axel Rauschmayer)

- 
For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics.

- 
Essential JavaScript Design Patterns (Addy Osmani)

- 
An introduction to essential JavaScript design patterns.

-

-

-

-
-
高級

-
-

-

-

- 
JavaScript Guide

- 
A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.

- 
You Don't Know JS (Kyle Simpson)

- 
A series of books diving deep into the core mechanisms of the JavaScript language.

- 
JavaScript Garden

- 
Documentation of the most quirky parts of JavaScript.

- 
Exploring ES6 (Dr. Axel Rauschmayer)

- 
Reliable and in-depth information on ECMAScript 2015.

-

-

-
-

-
-

- 
Javascipt Patterns

- 
A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.

- 
How browsers work

- 
A detailed research article describing different modern browsers, their engines, page rendering etc.

- 
JavaScript Videos (GitHub)

- 
A collection of JavaScript videos to watch.

-

-

-

-
-
Extension Development

-
-

-

-

- 
WebExtensions

- 
WebExtensions is a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.

-

-

-

+這個頁面提供了許多關於網路相關技術的說明及學習文件。無論你是正在打基礎的新手或有經驗的老手，相信在這個頁面你都能找到許多有用的資源。這些開發資源是由具有前瞻思維的公司及擁抱開放標準的開發者所提供，允許任何人翻譯它並以 Creative Commons 的條款釋出。
+
+## Web 完全新手
+
+- [Web 新手上路](/zh-TW/docs/Learn/Getting_started_with_the_web)
+  - : 本系列文章簡介 web 開發 (web development) 是怎麼一回事。你將會設置所需要的工具、製作一個簡易的網頁，然後發表你的程式碼。
+
+## HTML 教學
+
+### 初級
+
+- [HTML 入門](/zh-TW/docs/Learn/HTML/Introduction_to_HTML)
+  - : 此單元，為了孰悉重要的概念和語法，思考將 HTML 轉為文字, 如何建立超連鏈接, 以及如何使用 HTML 架構建立網站做好準備。
+- **[MDN HTML 元素引用](/zh-TW/docs/HTML/Element)**
+  - : HTML 元素綜合參考。以及在不同瀏覽器的支援程度。
+- **[使用 HTML 建立一個簡易網站](https://www.theblogstarter.com/html-for-beginners) (The Blog Starter)**
+  - : 適用於 HTML 初學者的指南，其中包含常見的標籤( tag ), 其中包括利用編碼範例步驟，一步步指導建立一個基本網頁。
+- **[初學者 HTML 指南](http://bit.ly/2z9xSS2) (Website Setup)**
+  - : 此指南將指導你如何使用 HTML 和 HTML5 標籤 (tags) 建立基礎網站。 簡易的步驟教學，以及包含可用於提升編碼技巧的圖像和資源。
+- **[HTML 挑戰 ](http://wikiversity.org/wiki/Web_Design/HTML_Challenges)(Wikiversity)**
+  - : 使用這些挑戰來磨練你的 HTML 技能 (例如 : "Should I use an \
 element or a \ element?"), 注意這些含有意義的標籤。
+
+### 中級
+
+- [多媒體及崁入](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding)
+  - : 此單元探討包含如何使用 HTML 崁入多媒體於網頁之中，包括使用不同方式讓崁入圖片，影片，聲音檔，甚至是其他整個網頁。
+- [HTML 表格](/zh-TW/docs/Learn/HTML/Tables)
+  - : 將資料以可理解的方式使用表格呈現在網頁上 {{glossary("Accessibility", "accessible")}} 方法可能是一個挑戰。本文涵蓋基礎的表格標記，以及更複雜的功能，例如實現說明標題及概述。
+
+### 高級
+
+- [HTML 表單](/zh-TW/docs/Learn/HTML/Forms)
+  - : 表單是網際網路一個非常重要的部分 - 這些涵蓋了網站互動所需的大部分功能，例如 : 註冊、登入、發送回饋，購買產品等。本文將幫助你開始創建客戶回饋表單。
+- **[給程式創作者快速載入 HTML 網頁的提示](/zh-TW/docs/Tips_for_Authoring_Fast-loading_HTML_Pages)**
+  - : 優化網頁，為使用者提供響應式網站，減少 web 服務器和 Internet 連線的負擔。
+
+## CSS 教學
+
+### 初級
+
+- [CSS 基本概念](/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics)
+  - : CSS（層疊樣式表）是用於設置網頁樣式的編碼。 CSS Basics 將帶領你了解入門所需的內容。 我們將回答以下問題，例如：如何將文字設為黑色或紅色？ 如何讓我的內容顯示在螢幕上的這些地方？ 如何用背景圖片和顏色布置我的網頁？
+- [介紹 CSS](/zh-TW/docs/Learn/CSS/Introduction_to_CSS)
+  - : 本單元深入介紹 CSS 應用，包括選擇器和屬性，編寫 CSS 規則，將 CSS 應用於 HTML，如何指定 CSS 中的長度，顏色和其他單位，並列和繼承，框框模組基本知識和 CSS 除錯。
+- [樣式框](/zh-TW/docs/Learn/CSS/Styling_boxes)
+  - : 接下來，我們來看看樣式框，這是建立網頁的基本步驟之一。 在本單元中，我們回顧一下框框模組，通過設置邊框和邊距，自定義背景顏色，圖像和其它以及酷炫的功能（如陰影和框上的濾鏡）來查看樣式框佈局。
+- [樣式文本](/zh-TW/docs/Learn/CSS/Styling_text)
+  - : 在此，我們看看文本樣式基礎，包括設置字體，粗體和斜體，線條和字母間距以及陰影和其他文本功能。 我們通過查看將自定義字體應用於頁面以及樣式列表和鏈接來完善模組。
+- **[常見的 CSS 問題](/zh-TW/docs/Common_CSS_Questions)**
+  - : 初學者的常見問題及解答。
+
+### 中級
+
+- [CSS 布局](/zh-TW/docs/Learn/CSS/CSS_layout)
+  - : 此時，我們已看過 CSS 基礎知識，如何設置文本樣式，以及如何設置和操作內容所在的框框。 現在是時候看看如何將框框放在彼此之間相對位置上的正確位置。 我們已經涵蓋了必要的先決條件，因此現在可以深入了解 CSS 佈局，查看不同的顯示設置，包含浮動和定位的傳統佈局方法，以及 Flexbox 等新的佈局工具。
+- **[CSS 參考](/zh-TW/docs/CSS/CSS_Reference)**
+  - : 完整參考 CSS，詳細介紹 Firefox 和其他瀏覽器的支援度。
+- **[流變格線框架](http://www.alistapart.com/articles/fluidgrids/) (A List Apart)**
+  - : 在瀏流器視窗大小調整的同時，能夠流暢地調整內容大小的設計佈局，同時使用字體排版格線。
+- **[CSS 挑戰](http://en.wikiversity.org/wiki/Web_Design/CSS_challenges) (Wikiversity)**
+  - : 提高你的 CSS 技能，並了解需多加練習的地方。
+
+### 高級
+
+- **[Using CSS transforms](/zh-TW/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)**
+  - : Apply rotation, skewing, scaling, and translation using CSS.
+- **[CSS transitions](/zh-TW/docs/CSS/CSS_transitions)**
+  - : CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.
+- **[Quick Guide to Implement Web Fonts with @font-face](http://www.html5rocks.com/tutorials/webfonts/quick/) (HTML5 Rocks)**
+  - : The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.
+- **[Starting to Write CSS](http://davidwalsh.name/starting-css) (David Walsh)**
+  - : An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.
+- [Canvas tutorial](/zh-TW/docs/Web/API/Canvas_API/Tutorial)
+  - : Learn how to draw graphics using scripting using the canvas element.
+- **[HTML5 Doctor](http://html5doctor.com/)**
+  - : Articles about using HTML5 right now.
+
+## JavaScript 教學
+
+### 初級
+
+- [JavaScript first steps](/zh-TW/docs/Learn/JavaScript/First_steps)
+
+  - : In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.
+- [JavaScript building blocks](/zh-TW/docs/Learn/JavaScript/Building_blocks)
+  - : In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.
+- [Getting started with JavaScript](/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+  - : What is JavaScript and how can it help you?
+- **[Codecademy](http://www.codecademy.com/) (Codecademy)**
+  - : Codecademy is a easy way to learn how to code JavaScript. It's interactive and you can do it with your friends.
+
+### 中級
+
+- [Introducing JavaScript objects](/zh-TW/docs/Learn/JavaScript/Objects)
+  - : In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.
+- [Client-side web APIs](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs)
+  - : When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work.
+- **[A re-Introduction to JavaScript](/zh-TW/docs/A_re-introduction_to_JavaScript)**
+  - : A recap of the JavaScript programming language aimed at intermediate-level developers.
+- **[Eloquent JavaScript](http://eloquentjavascript.net/)**
+  - : A comprehensive guide to intermediate and advanced JavaScript methodologies.
+- **[Speaking JavaScript](http://speakingjs.com/es5/) (Dr. Axel Rauschmayer)**
+  - : For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics.
+- **[Essential JavaScript Design Patterns](http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/) (Addy Osmani)**
+  - : An introduction to essential JavaScript design patterns.
+
+### 高級
+
+- [JavaScript Guide](/zh-TW/docs/Web/JavaScript/Guide)
+  - : A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.
+- **[You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) (Kyle Simpson)**
+  - : A series of books diving deep into the core mechanisms of the JavaScript language.
+- **[JavaScript Garden](http://bonsaiden.github.com/JavaScript-Garden/)**
+  - : Documentation of the most quirky parts of JavaScript.
+- **[Exploring ES6](http://exploringjs.com/es6/) (Dr. Axel Rauschmayer)**
+  - : Reliable and in-depth information on ECMAScript 2015.
+- **[Javascipt Patterns](http://shichuan.github.io/javascript-patterns)**
+  - : A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.
+- **[How browsers work](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)**
+  - : A detailed research article describing different modern browsers, their engines, page rendering etc.
+- [JavaScript Videos](https://github.com/bolshchikov/js-must-watch) (GitHub)
+  - : A collection of JavaScript videos to watch.
+
+### Extension Development
+
+- [WebExtensions](/zh-TW/docs/Mozilla/Add-ons/WebExtensions)
+  - : WebExtensions is a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the [extension API](https://developer.chrome.com/extensions) supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or [Microsoft Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/) with [just a few changes](/zh-TW/Add-ons/WebExtensions/Porting_from_Google_Chrome). The API is also fully compatible with [multiprocess Firefox](/zh-TW/Firefox/Multiprocess_Firefox).