recursal/MDN huggingface dataset:
網路開放字型格式 (WOFF)
===============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
**WOFF**（**網頁開放字型格式**）是由 Mozilla、Type Supply、LettError 和其它組織協力開發的全新網路字型格式。它使用了同為表格結構的 `sfnt` 壓縮版，廣泛用於 TrueType、OpenType 和開放字型格式，另外加入了中繼資料和私有資料結構，其中包含事先定義的欄位，讓有意願的廠商和製造商提供授權資訊。

使用 WOFF 主要有以下三項好處：

1. 字型資料經過壓縮，因此使用 WOFF 的網站流量降低，載入速度也會比未壓縮的 TrueType 或 OpenType 檔更快。
2. 許多不願授權的字型商都可以授權 WOFF 格式的字型，網站設計師有更多的字型可以選擇。
3. 專有軟體和自由軟體商都喜歡 WOFF 格式，因此在網路世界上，可以成為真正通用和可交換的字型格式，有別於目前其它字型格式。
使用 WOFF
-------

你可透過 `@font-face` CSS 屬性在網頁內的文字使用 WOFF 字型。它的運作方式和 OpenType 以及 TrueType 字型並無二異，但在下載內容時可能會更有效率，這完全歸功於其與生俱來的壓縮特性。

規範
--

| Specification |
| --- |
| WOFF File Format 1.0 # OverallStructure |
| WOFF File Format 2.0 # FileStructure |

瀏覽器相容性
------

### css.at-rules.font-face.WOFF

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.at-rules.font-face.WOFF\_2

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* `@font-face`
使用 CSS 多重背景
===========

藉由 CSS3 我們可以對元素使用 **多重背景**。每個設定的背景被一個個分層，第一個背景在最上面，最後一個背景是在最下面一層。 記得只有最後一個背景可以設定 background color。

簡易的表達方式:


```css
.myclass {
  background: background 1, //第一層
    background 2, ..., background N; //最後一層
}
```


可以使用縮寫的方式 `background` (en-US) 和個別標記的方式設定多重背景，但是部分屬性無法設置多重背景，例如 `background-color`。下面是能設置為多重背景的背景屬性：

* `background` (en-US)
* `background-attachment`
* `background-clip` (en-US)
* `background-image` (en-US)
* `background-origin` (en-US)
* `background-position` (en-US)
* `background-repeat` (en-US)
* `background-size` (en-US)
範例
--

下面的範例中，重疊三個背景：Firefox logo、線性漸層、一張泡泡的圖片


```css
.multi\_bg\_example {
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));

  background-repeat: no-repeat, no-repeat, no-repeat;

  background-position:
    bottom right,
    left,
    right;
}
```


```
<div class="multi\_bg\_example"></div>
```


```
.multi\_bg\_example {
  width: 100%;
  height: 400px;
  background:
    url(firefox.png),
    url(bubbles.png),
    -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
    -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
    -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}
```

結果
--

如你所見，Firefox logo（列表第一個選項）在最上面，接著是漸層。每個隨後的子屬性（`background-repeat` (en-US) 和 `background-position` (en-US)）應用相對的背景上。所以第一個 `background-repeat` (en-US) 的值應用在第一個（最前面）背景。

參見
--

* 使用 CSS 漸層 (en-US)
height
======

**`height`** 屬於 CSS 的媒體功能之一，其值為可視區域 (viewport) 的高度，像是 CSS 的 `<length>` (en-US)。

規格
--

| Specification |
| --- |
| Media Queries Level 4 # height |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
色彩選擇工具
======

這是個可以讓人新增、調整和測試網頁顏色的工具。藉由這個工具讓人可以輕鬆將顏色轉換成各種 CSS 支援的格式，包含：HEXA、RGB（Red/Green/Blue）和 HSL （Hue/Staturation/Lightness）。在 RGB（rgba）和 HSL（hsla）格式也支援控制阿爾法通道（alpha channel）

隨著調整每個顏色都會顯示成三種 CSS 的標準格式；此外，基於目前選擇的顏色，一個調色板 HSL 和 HSV、還有 alpha，被創建。滴管風格的色彩選擇器對話框可以在 HSL 或 HSV 格式中切換。
理解邊界重疊的原因
=========

當一個 Block 的 下邊界範圍 (en-US) ( margin-bottom ) 和一個 Block 的 上邊界範圍 (en-US) ( margin-top ) 都有設定時只會留下最大那個，這種情況我們稱為**邊界重疊** ( margin collapsing )。請留意設定了 float 或絕對定位 (en-US)的元件並不會產生邊界重疊。
有三個標準情況會形成邊界重疊：

同一層的相鄰

兩個相鄰的元素邊界就會發生重疊，除非後者有加上 clear-fix。例如


```html
<style>
 p:nth-child(1) {
 margin-bottom: 13px;
 }
 p:nth-child(2) {
 margin-top: 87px;
 }
</style>

<p>下邊界範圍會...</p>
<p>...跟這個元素的上邊界範圍重疊。</p>
```


如果邊界會合併的的話，理所當然會認為上例中的上下兩個元素會合成一個 100px 的邊界範圍。

但其實會發生重疊，而且只會留下最大的邊界範圍，以此例子來說，邊界範圍就是 87px。

父元素與第一個/最後一個子元素

如果第一個子元素跟父元素的上邊界範圍 ( margin-top ) 貼在一起，也會發生邊界重疊的情況。除非父元素有設定邊框 ( border ) 、 內距 ( padding )、內容設定為 inline 或是有加上 clear-fix，這些都會隔開子元素和父元素的屬性。

最後一個子元素也是，但是與父元素的下邊界範圍 ( margin-bottom ) 更容易被隔開，因為父元素可以設定這些屬性。例如：


```html
<style type="text/css">
 section {
 margin-top: 13px;
 margin-bottom: 87px;
 }

 header {
 margin-top: 87px;
 }

 footer {
 margin-bottom: 13px;
 }
</style>

<section>
  <header>上邊界重疊是 87</header>
  <footer>下邊界重疊還是 87 不能再高了</footer>
</section>
```


空的元素

當同一個元素上邊界範圍可以直接貼到下邊界範圍時，也會發生邊界重疊。這種情況會發生在一個元素完全沒有設定邊框 ( border ) 、 內距 ( padding )、高度 ( height ) 、最小高度 ( min-height ) 、最大高度 ( max-height ) 、內容設定為 inline 或是加上 clear-fix 的時候。例如：


```html
<style>
 p {
 margin: 0px;
 }
 div {
 margin-top: 13px;
 margin-bottom: 87px;
 }
</style>

<p>下邊界範圍是 87</p>
<div></div>
<p>...上邊界範圍也是 87。</p>
```


上面這些情況是會同時發生的，那時邊界重疊的原因又更複雜了。

比較特別的是，當計算的時候某些邊界範圍是負數，邊界重疊的結果會取最大值和最小值相加。舉例來說如果 -13px、8px 和 100px 疊在一起，邊界範圍的計算方法會是 100px - 13px 也就是 87px。

以上這些內容都是發生在 Block-Level 的元素，設定 floating 和 absolutely positioned 的元素完全不用擔心邊界重疊的計算。

參見
--

* CSS Reference (en-US)
* CSS 重要概念：
    + CSS 語法
    + @ 規則 (en-US)
    + 註釋 (en-US)
    + 優先級 (en-US)
    + 繼承
    + 盒模型 (en-US)
    + 佈局模式 (en-US)
    + 視覺格式化模型 (en-US)
    + 外邊距合併
    + 值
        - 初始值 (en-US)
        - 計算值 (en-US)
        - 解析值 (en-US)
        - 指定值 (en-US)
        - 應用值 (en-US)
        - 實際值 (en-US)
    + 特性值定義語法 (en-US)
    + 特性簡寫
    + 可置換元素
測試媒體查詢
======

**實驗性質:** **這是一個實驗中的功能 (en-US)**  
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

DOM 提供了一個用程式去測試 media query 的方法：那就是透過 `MediaQueryList` 物件；透過 `MediaQueryList` 物件上的屬性和方法，我們可以得知、觀察目前 media query 的狀態。

創建 media query list 物件
----------------------

透過傳入目標 medai query 到 `window.matchMedia` (en-US) 方法，我們將可以取得相對應的 MediaQueryList 物件。

以下範例將取得偵測螢幕方向的 MediaQueryList 物件：
```

var mql = window.matchMedia("(orientation: portrait)");
```

檢查 media query 結果
-----------------

讀取 MediaQueryList 物件 的 matches 屬性就可以得知測試結果：


```js
if (mql.matches) {
  /\* The device is currently in portrait orientation \*/
} else {
  /\* The device is currently in landscape orientation \*/
}
```

接收測試結果通知
--------

當我們想要動態依據 media query 測試狀況執行對應處理，除了持續定期偵測外，還有一個更有效率的途徑：那就是註冊 media query 的事件處理器 (listener)。只要呼叫 MediaQueryList 物件上 addListener 方法，傳入符合 `MediaQueryListListener` (en-US) 介面的 listener 便完成事件註冊：


```js
var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql);
```


上面我們替螢幕方向 media query 註冊了一個 listener。請注意，在第一次註冊後，listener 會立刻被呼叫一次，這是為了初始化準備，因為我們可能預設 UI 是針對 'portait' 模式，但目前卻是 'landscape' 模式，所以這個第一次呼叫將給予我們作初始化調整的空間。

`下面handleOrientationChange()` 方法便是我們針對螢幕方向變化的 listener：


```js
function handleOrientationChange(mql) {
  if (mql.matches) {
    /\* The device is currently in portrait orientation \*/
  } else {
    /\* The device is currently in landscape orientation \*/
  }
}
```

停止接收測試結果通知
----------

當我們不需要接受通知時，只需要呼叫 removeListener 方法，然後傳入欲移除的 listener 即可：
```

mql.removeListener(handleOrientationChange);
```

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

延伸閱讀
----

* Media queries (en-US)
* `window.matchMedia()` (en-US)
* `MediaQueryList`
* `MediaQueryListListener` (en-US)
translate3d()
=============

**`translate3d()`** CSS 函式以 3D 場境的方式定位元素。其結果為 `<transform-function>` (en-US) 資料型別。

嘗試一下
----

這個轉場的特徵是三維向量，其坐標則定義元素的方向該如何移動。

語法
--
```

translate3d(tx, ty, tz)
```

### 數值

`tx`

其 `<length>` (en-US) 代表平移向量的橫坐標。

`ty`

其 `<length>` (en-US) 代表平移向量的縱坐標。

`tz`

其 `<length>` (en-US) 代表平移向量的 z 分量。數值不能是 `<percentage>` (en-US)：否則，此轉場的屬性無效。



| ℝ2 上的笛卡兒座標（Cartesian coordinate） | ℝℙ2 上的齊次坐標（homogeneous coordinates） | ℝ3 上的笛卡兒座標 | ℝℙ3 上的齊次坐標 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented
 on the plane.
  | 
 A translation is not a linear transformation in ℝ3 and can't
 be represented using a Cartesian-coordinate matrix.
  | 

1
 0
0
tx

0
 1
0
ty

0
0
1
tz

0
0
0
1

 |

示例
--

### 使用單軸平移

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* Equivalent to perspective(500px) translateX(10px) \*/
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}
```


#### 結果

### Combining z-axis and x-axis translation

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}
```


#### 結果

規範
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-translate3d |

瀏覽器相容性
------

請參見 `<transform-function>` (en-US)。

參見
--

* `transform`
* `<transform-function>` (en-US)
Stacking context example 1
==========================

« CSS « 理解 CSS 的 z-index

### 堆疊環境範例 1

讓我們先從一個基本的例子。根堆疊情況下，我們有兩個 div（DIV＃1 和＃DIV 3），兩種相對定位的，但是如果沒有的 z-index 屬性。裡面 DIV＃1 有一個絕對定位的 div＃2，而在 DIV＃3 有一個絕對定位的 div＃4，雙方沒有的 z-index 屬性。

唯一的堆疊上下文是根上下文。如果沒有 Z-指標，要素依次層疊的發生。

![堆疊環境範例1](/zh-TW/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05a.png)

如果 DIV＃2 被分配一個正的（非零和非自動）z 索引值，它是上述所有其他的 DIV 呈現。

![堆疊環境範例1](/zh-TW/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05b.png)

然後，如果 DIV＃4 也被分配比 DIV＃2 的 Z 指數正 z 指數越大，它上面的所有其他的 DIV DIV，包括 2＃呈現。

![堆疊環境範例1](/zh-TW/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05c.png)

在最後的例子，你可以看到，DIV＃2 和＃DIV 4 不兄弟姐妹，因為它們屬於不同的家長在 HTML 元素的層次結構。即便如此，DIV＃4 堆疊相的 DIV＃2 可以通過 z 索引來控制。碰巧的是，由於 DIV＃1 和＃DIV 3 不指定任何的 z-index 值，他們不創造一個堆疊環境。這意味著，所有的內容，包括 DIV＃2 和 DIV＃4 屬於相同根堆疊環境。

在堆疊上下文而言，DIV＃1 和 DIV＃3 簡單地同化到根元素，將得到的層次結構如下：

* 根堆疊環境
    + DIV＃2（Z-指數 1）
    + DIV＃4（Z-指數 2）

**備註：** DIV＃1 和＃DIV 3 不適透亮。重要的是要記住，分配的不透明度小於 1 到定位的元素隱式創建一個疊加的背景下，就像一個加入的 z-index 值是非常重要的。這個例子顯示，當父元素不會創建一個堆疊環境會發生什麼。

範例
--

### HTML


```html
<div id="div1">
  <br /><span class="bold">DIV #1</span> <br />position: relative;
  <div id="div2">
    <br /><span class="bold">DIV #2</span> <br />position: absolute;
    <br />z-index: 1;
  </div>
</div>

<br />

<div id="div3">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
  <div id="div4">
    <br /><span class="bold">DIV #4</span> <br />position: absolute;
    <br />z-index: 2;
  </div>
</div>
```

### CSS


```css
.bold {
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  z-index: 2;
  position: absolute;
  width: 200px;
  height: 80px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}
```

結果
--

### 參見

* 無堆疊的 z-index：默認規則疊加
* 堆疊和浮動：如何浮動元素的處理方式
* 添加 z-index：使用的 z-index 來改變默認的堆疊
* 堆疊背景：在堆疊環境票據
* 堆疊環境例子 2：在所有層面上 2 級 HTML 層次，Z 指數
* 堆疊上下文例 3：3 級的 HTML 等級，在第二級上的 z 索引
調整列表縮排
======

原文 : Consistent List Indentation

使用 CSS 來協助縮排列表看來簡單實則卻否，原因很簡單 - 各大瀏覽器其實作方式不盡相同。一個很大的原因來自於對距離的掌握，但這很讓人喪志，因為瀏覽器沒有一致的排版方式。舉例來說，倘若你宣告一個 list 沒有 left margin，在 IE 中他可以被移動，但在 Gecko-based 的瀏覽器中他們將很固執的固定在那。

為了更徹底明白為何有這種情況發生，了解列表是怎樣被創造的至關重要。

### 創建列表

首先，我們考慮一個最簡單的 list item。他並不屬於任何一個 list 中，並且也沒有項目符號 (意思就是沒有 bullet )。如 Figure 1 所示：

![Figure 1](/zh-TW/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure1.gif)

這裡的紅點線框是 list 內容的外框。在這裡的例子中， list item 並沒有設定 padding 或 borders。現在我們加上兩個 list item，如圖二：

![Figure 2](/zh-TW/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure2.gif)

接著我們加上 parent element，這裡我們以 unordered list (i.e., `<ul>`)為例。根據 CSS box model，這些 list item 都會被包裹在 parent element 的範圍中。如下圖中的紫色外框，他包住了三個 list item 的外圍：

![Figure 3](/zh-TW/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure3.gif)

然後我們加上 list item markers。因為我們用的是 unordered list，因此使用預設的 filled-circle "bullets"。結果如下：

![Figure 4](/zh-TW/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure4.gif)

好的，現在看出來了，這些 marker 在 `<ul> 空間之外。但更重要的是，這些 marker 其實是在 <li> 之外！這個結果使得 list item 看起來像是附加在 marker 之上。`

結論出來了，在瀏覽器(除了 windows 下的 IE)處理列表時， marker 是在 `<li>` element 的外頭。所以這些個對 list item 的設定並不會對 marker 造成影響，影響的是其後附加的內容。

### 二次縮排

所以我們該如何設定其外觀？現在讓我們來分析一下下們這組設定：
```

ul, li {margin-left: 0; padding-left: 0;}
```


當套用了這組設定， marker 將會很悲劇的落到畫面之外。

為了避免這種慘劇發生，瀏覽器有三種不同的實作方式來避免：

1. 幫每一個 `<li>` element 設定 left margin
2. 幫 `<ul>` element 設定 left margin
3. 幫 `<ul>` element 設定一些 left padding

事後檢視，沒有瀏覽器採用第一種作法。Windows and Macintosh 上的 Internet Explorer 和 Opera 採用第二種作法。Gecko 相關的瀏覽器則使用第三種設計。

現在讓我們來瞧瞧後兩種作法的差異。在 Internet Explorer 及 Opera 中，<ul> element 為了縮排需要被設定了 40 pixel 的 left margin。假如我們此時在 `<ul>` element 設定背景顏色，其結果如下：

![Figure 5](/zh-TW/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure5.gif)

Gecko 則不太一樣，他為 `<ul>` element 設定了 40 pixel 的 left *padding*。因此造成上圖的程式碼會在 Gecko 中變成下圖：

![Figure 6](/zh-TW/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure6.gif)

從結果來說，marker 都很好的附著在 `<li>` element 之前並未消失。唯一的不同點是發生在你替 `<ul>` element 設定背景顏色時。

### 不變的是

現在我們知道，若你希望在 Gecko, Internet Explorer 和 Opera 都有一樣的 list 外觀， `<ul>` element 的 left margin 和 left padding 都要設定。你大可不必理會 `<li>` 的設定。

假如你想要有 Netscape 6.x 的預設風格，寫法如下：
```

ul {margin-left: 0; padding-left: 40px;}
```


若你對 Explorer/Opera 風格有興趣，可以寫成：
```

ul {margin-left: 40px; padding-left: 0;}
```


當然啦，你可以不用 pixel 來表示長度，取而代之的可以使用類似 `1.25em` 的寫法。現在若你想要重設列表，而不打算有任何縮排，可以這樣寫：
```

ul {margin-left: 0; padding-left: 0;}
```


請注意，這樣的寫法將造成 bullet 被扔在整個列表及其 parent element 之外。當你在 `body` 中這樣寫，很顯然的你的 `bullet` 將不會出現在你的視窗內。

### 結論

在這篇文章中我們並未指出哪個瀏覽器對 list 縮排的處理是正確的。之所以會有不同的排版方式只是因為他們採用了不同的排版方法。確定你設定了 list 的 left padding 和 left margin，這樣你比較能寫出跨瀏覽器良好縮排程式。

### 建議

* 在你調整列表的縮排時，務必確定你設定了 padding 和 margin。
建立或觸發事件
=======

本文介紹如何建立和觸發事件。

建立自定義事件
-------

事件可以用 `Event` constructor 建立，如下所示：


```js
var event = new Event('build');

// 監聽事件
elem.addEventListener('build', function (e) { ... }, false);

// 觸發事件
elem.dispatchEvent(event);
```


除了 Internet Explorer 以外，大多數的瀏覽器都支持這個 constructor 。若要能夠支援 Internet Explore 的更詳細的方法，可以參考段落《早期的做法》。

### 增加自定義的資料－－CustomEvent()

要在事件的 object 追加其他資料，能使用 `CustomEvent` 介面。它有 **detail** 屬性，可以用來傳送自訂資料。

舉例來說，可以以下面方式建立事件：


```js
var event = new CustomEvent("build", { detail: elem.dataset.time });
```


它可以讓你傳送自訂資料到事件的監聽器：


```js
function eventHandler(e) {
  log("The time is: " + e.detail);
}
```

### 早期的做法

早期建立事件的方式參考了 Java 的 API 。下為一個早期作法的例子：


```js
// 建立事件
var event = document.createEvent("Event");

// 設定事件名稱為 「build」 。
event.initEvent("build", true, true);

// 監聽事件
elem.addEventListener(
  "build",
  function (e) {
    // e.target matches elem
  },
  false,
);

// 事件對象可以是任一 HTML 元素或是 EventTarget 。
elem.dispatchEvent(event);
```

觸發自定義事件
-------

下面的例子演示了一個複選框藉由 DOM 的 methods 模擬一次點擊（換言之，讓程式執行一次「點擊事件」。）。 觀看實例。


```js
function simulateClick() {
  var event = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
  });
  var cb = document.getElementById("checkbox");
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}
```

參見
--

* `document.createEvent()`
* `Event.initEvent()` (en-US)
* `EventTarget.dispatchEvent()`
* `EventTarget.addEventListener()`
SVG教學
=====

SVG 是 W3C XML 的方言之一，用於標記可縮放的向量圖形。目前在 Firefox、Opera、Webkit 瀏覽器、IE 等瀏覽器中已經部分實作。

本教學之目標在解釋 SVG 內部的技術細節。如果你只是想要畫出漂亮的圖形，你可以在 Inkscape 的文件頁面上找到更多有用的資源。或是看看另一個好的 SVG 介绍：W3C 的 SVG 入門。

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

##### 從頭介紹 SVG

* 導論
* 開始
* 坐標定位
* 基本形状
* 路徑
* 填充與邊框
* 漸變
* 模式
* 文字
* 基本變换
* 裁剪和遮罩
* 其他 SVG 内容
* 濾镜效果
* SVG 字型
* SVG 的 Image 標籤
* SVG 工具

下面陳列進階主题，需要單獨列出教學。

##### JavaScript 脚本化 SVG

待定

##### SVG 濾镜教學

待定

##### SVG 的 SMIL 動畫

待定

##### 在 SVG 中建立字形

待定
座標定位
====

* « 前頁
* 次頁 »
網格
--

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

#### 範例：

元素


```html
<rect x="0" y="0" width="100" height="100" />
```


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

### 什麼是 "像素"?

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

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


```html
<svg width="100" height="100"></svg>
```


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


```html
<svg width="200" height="200" viewBox="0 0 100 100"></svg>
```


這裡定義的畫布尺寸是 200\*200px。但是，viewBox 屬性定義了畫布上可以顯示的區域：從(0,0)點開始，100 寬\*100 高的區域。這個 100\*100 的區域，會放到 200\*200 的畫布上顯示。於是就形成了放大兩倍的效果。

用戶單位和螢幕單位的映射關係被稱為**用戶座標系統**。除了縮放之外，座標系統還可以旋轉、傾斜、翻轉。預設的用戶座標系統 1 用戶像素等於設備上的 1 像素（但是設備上可能會自己定義 1 像素到底是多大）。在定義了具體尺寸單位的 SVG 中，比如單位是「cm」或「in」，最終圖形會以實際大小的 1 比 1 比例呈現。

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

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

* « 前頁
* 次頁 »
引言
==

* « 前頁
* 次頁 »

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

![Mozilla dino logo](/zh-TW/docs/Web/SVG/Tutorial/Introduction/dino.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 一起使用（比如 JavaScript 和 CSS），也会出现类似的情况。

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

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

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

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

### 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 打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。

* « 前頁
* 次頁 »
入門
==

* « 前頁
* 次頁 »
### 一個簡單的例子

讓我們用一個簡單的例子來進入主題，先看下面的程式碼：


```xml
<svg version="1.1"
 baseProfile="full"
 xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>
```


複製這段程式碼，在一個文件裡貼上，給該文件起名為 demo1.svg，然後用 Firefox 打開它，會渲染成下面截圖的樣子。(Firefox 用户: 點這裡)

![svgdemo1.png](/zh-TW/docs/Web/SVG/Tutorial/Getting_Started/svgdemo1.png)

渲染過程包括以下内容：

1. 我們先看一下`svg`根元素：
    * 不使用類似(X)HTML 的文檔聲明，因為基於 SVG 的 DTD 會造成很多問題，弊大於利。
    * 為了明確 SVG 版本，`version` 和 baseProfile 兩個屬性必須要寫
    * 作為 XML 方言，SVG 必須始終绑定正確的命名空間（xmlns 属性）。更多資訊，請參考命名空間速成班頁面
2. 畫一個覆蓋整個圖形的矩形 ，將背景設為红色
3. 在红色矩形中間畫一個綠色的圓形，半徑是 80 像素（圓心坐標：x 軸向左偏移 150 像素，y 軸向上偏移 100 像素）【坐標系統會在後面章節介紹】
4. 描繪「SVG」文字，字母填充成白色，通過設定錨點定義文本的中點，在這個例子裡，中點是綠色圓形的圓心，通過調整字號和垂直位置，確保最終顯示效果的美觀
### SVG 文件的基本屬性

* 首先要注意的是元素渲染的順序，SVG 的全局規則是：靠後的元素，將在靠前的元素上面渲染。
* 在 web 上，SVG 可以直接放進瀏覽器裡顯示，或者通過以下幾種方式嵌入到 HTML 文檔中顯示：
    + 如果是 XHTML 文檔，並且響應端接受 application/xhtml+xml 類型，SVG 就可以在 XML 源裡直接嵌入
    + 如果是 HTML5 文檔，並且瀏覽器支持 HTML5，SVG 也可以直接嵌入，但是語法上需要修改，以符合 HTML5 規範。
    + SVG 可以通過 Object 元素引入:
     xml
    ```xml
    <object data="image.svg" type="image/svg+xml" />
    
    ```
    + 同樣可以通過 iframe 引入:
     xml
    ```xml
    <iframe src="image.svg"></iframe>
    
    ```
    + 理論上，img 元素也可以用来引入 SVG，但是 Firefox 4.0 之前的版本不支持這一功能。
    + 最後，SVG 可以用 JavaScript 動態創建，並且注入到 HTML DOM 裡面。這樣做的好處是，對於不支持 SVG 的瀏覽器，可以啟用其它替代技術。這是一個深入探討該主題的專題頁面。
* SVG 如何處理大小和單位，將在下一頁進行解釋。
### 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 的 服務器配置頁面。

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

* « 前頁
* 次頁 »
stroke-dashoffset
=================

« SVG 屬性引用首頁

`stroke-dashoffset` 屬性指定一個數值至虛線的開頭。

如果使用 <percentage> ，值則會代表當前 viewport 的百分比。

值允許為負值。

Usage context
-------------

|  |  |
| --- | --- |
| 類別 | Presentation attribute |
| 可用值 | <percentage> |
 <length> | inherit
  |
| 初始值 | 0 |
| 可動畫化 | 是 |
| 規範文件 | SVG 1.1 (2nd Edition) |

範例
--

### HTML 內容


```html
<svg
 width="200"
 height="200"
 viewBox="0 0 200 200"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <line
 stroke-dashoffset="0"
 stroke-dasharray="20"
 x1="0"
 y1="10"
 x2="200"
 y2="10" />
  <line
 stroke-dashoffset="10"
 stroke-dasharray="20"
 x1="0"
 y1="20"
 x2="200"
 y2="20" />
  <line
 stroke-dashoffset="20"
 stroke-dasharray="20"
 x1="0"
 y1="30"
 x2="200"
 y2="30" />
  <line
 stroke-dashoffset="50%"
 stroke-dasharray="20"
 x1="0"
 y1="40"
 x2="200"
 y2="40" />
  <line
 stroke-dashoffset="25%"
 stroke-dasharray="20"
 x1="0"
 y1="50"
 x2="200"
 y2="50" />
  <line
 stroke-dashoffset="0%"
 stroke-dasharray="20"
 x1="0"
 y1="60"
 x2="200"
 y2="60" />
</svg>
```

### CSS 內容


```css
line {
  stroke: #51bba7;
  stroke-width: 2;
}
```

### 結果

適用元素
----

以下元素可以使用 `stroke-dashoffset` 屬性

* Shape elements »
* Text content elements »
規範
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTTP 請求方法
=========

HTTP 定義了一組能令給定資源，執行特定操作的**請求方法**（request methods）。他們儘管屬於名詞，但也能稱為 *HTTP 動詞*。每個方法都有不同的語意，不過也有些共享的相通功能，像是safe (en-US)、idempotent (en-US)、cacheable。

`GET`

`GET` 方法請求展示指定資源。使用 `GET` 的請求只應用於取得資料。

`HEAD` (en-US)

`HEAD` 方法請求與 `GET` 方法相同的回應，但它沒有回應主體（response body）。

`POST` (en-US)

`POST` 方法用於提交指定資源的實體，通常會改變伺服器的狀態或副作用（side effect）。

`PUT` (en-US)

`PUT` 方法會取代指定資源所酬載請求（request payload）的所有表現。

`DELETE` (en-US)

`DELETE` 方法會刪除指定資源.

`CONNECT`

`CONNECT` 方法會和指定資源標明的伺服器之間，建立隧道（tunnel）。

`OPTIONS` (en-US)

`OPTIONS` 方法描述指定資源的溝通方法（communication option）。

`TRACE` (en-US)

`TRACE` 方法會與指定資源標明的伺服器之間，執行迴路返回測試（loop-back test）。

`PATCH` (en-US)

`PATCH` 方法套用指定資源的部份修改。

規範
--

| Specification |
| --- |
| HTTP Semantics # CONNECT |
| HTTP Semantics # DELETE |
| HTTP Semantics # GET |
| HTTP Semantics # HEAD |
| HTTP Semantics # OPTIONS |
| HTTP Semantics # POST |
| HTTP Semantics # PUT |
| HTTP Semantics # TRACE |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* HTTP 標頭 (en-US)