  \<svg>是矢量圖的根元素，通過xmlns屬性聲明命名空間，從而告訴用戶代理標記名稱屬于哪個XML方言。在下面的示例中，為\<svg>元素聲明了寬度和高度（默認以像素為單位），其子元素\<title>可作為提示，在\<desc>中可聲明一段描述性純文本，這兩個元素都不會在頁面中呈現。而\<rect>是一個矩形，將被繪制到頁面中。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100">
<title>SVG example</title>
<desc>SVG contains a rectangle</desc>
<rect width="50" height="50" fill="#F60" />
</svg>
~~~
  SVG作為一種圖像格式，可以包含在\<img>元素內（如下所示）或CSS樣式中（例如background-image屬性）。
~~~html
<img src="demo.svg" />
~~~
## 一、坐標系統
**1）視口**
  在SVG中，有一張無限大的畫布，而畫布區域被稱為視口（viewport）。通過\<svg>元素的width和height兩個屬性可定義視口的尺寸，視口的原點在其左上角。
  而在視口中，還包含一個坐標系統，由viewBox屬性控制。它能包含四個數值（以逗號或空格分隔），分別是用戶坐標系統的最小橫坐標（x軸）和縱坐標（y軸），以及寬和高。
  下面的兩個\<svg>元素，第一個采用了默認的坐標系統，第二個聲明了新的坐標系統，并且寬高比相同，如圖1所示，第二個矩形縮小了。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100">
<rect width="50" height="50" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" />
</svg>
~~~
:-: 
圖 1
  接下來修改兩個最小坐標（如圖2所示），第一個\<svg>元素聲明的最小坐標為(20,20)，雖然矩形的坐標是(0,0)，但是比最小坐標要小，所以就會往左上角偏移；第二個\<svg>元素聲明了負數坐標，與前一個正好相反；在第三個\<svg>元素中，修改了矩形的坐標，正好在左上角。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="20 20 300 200">
<rect width="50" height="50" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="-20 -20 300 200">
<rect width="50" height="50" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="20 20 300 200">
<rect width="50" height="50" fill="#F60" x="20" y="20" />
</svg>
~~~
:-: 
圖 2
**2）preserveAspectRatio屬性**
  當viewBox屬性中聲明的尺寸與視圖的寬高比不一致時，可以使用preserveAspectRatio屬性指定圖形的縮放比例和對齊方式，語法如下，默認值是“xMidYMid meet”。
~~~html
preserveAspectRatio: <align> [<meetOrSlice>]
~~~
  其中\<align>的屬性值由兩個軸（x和y）以及三個位置（min、mid和max）組合而成，如表1所列。
:-: 表 1
  在下面的示例中，由于三個\<svg>元素寬高比是3:2，而viewBox的寬高比是3:1，因此矩形會等比縮小。對它們分別應用xMinYMin、xMidYMid和xMinYMax，效果如圖3所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMinYMin">
<rect width="50" height="50" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMidYMid">
<rect width="50" height="50" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMinYMax">
<rect width="50" height="50" fill="#F60" />
</svg>
~~~
:-: 
圖 3
  注意，因為寬度正好適配，所以對于x軸的對齊方式，效果都是相同的。
  \<meetOrSlice>可控制圖形的適配或裁剪，可選的值如表2所列。
:-: 表 2
  在下面的示例中，兩個矩形的高度比視口要大，對它們分別應用meet和slice，效果如圖4所示，第二個矩形將整個視口給填滿了。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMinYMin meet">
<rect width="150" height="150" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMinYMin slice">
<rect width="150" height="150" fill="#F60" />
</svg>
~~~
:-: 
圖 4
## 二、形狀
  SVG的基本形狀包括線段（line）、矩形（rect）、圓形（circle）、橢圓（ellipse）、多邊形（polygon）和折線（polyline）。
**1）\<line>**
線段元素需要指定起止點的坐標，如下所示，效果如圖5所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<line x1="20" y1="100" x2="100" y2="20" stroke="black" stroke-width="2"/>
</svg>
~~~
:-: 
圖 5
  其中stroke和stroke-width是筆畫屬性，可指定筆畫的顏色和寬度，相關屬性如表3所列，部分屬性的效果如圖6所示。
:-: 表 3
:-: 
圖 6
**2）\<rect>**
  除了直角矩形之外，還可以聲明圓角矩形，如下所示，效果如圖7所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect x="10" y="10" width="100" height="100" rx="15" ry="15" fill="#F60"/>
</svg>
~~~
:-: 
圖 7
**3）\<circle>和\<ellipse>**
  利用圓形，可非常便捷的畫出圓環，效果如圖8所示。將\<circle>元素的stroke-dasharray聲明為圓的周長（2πR），例如半徑為50，周長就是314。如果為stroke-dashoffset屬性定義一個值，就能得到圓環缺失一段的效果，從而就能模擬出圓環型的進度條了。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2"
stroke-dasharray="314" stroke-dashoffset="40" fill="transparent" />
</svg>
~~~
:-: 
圖 8
  橢圓和圓形類似，只是需要聲明兩個方向的半徑，如圖9所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<ellipse cx="100" cy="100" rx="100" ry="50" />
</svg>
~~~
:-: 
圖 9
**4）\<polygon>**
  \<polygon>可畫出任意形狀的封閉圖形，例如平行四邊形、梯形等。在points屬性中，可聲明各個點的坐標，每組坐標用逗號隔開，下面繪制了一個五角星，如圖10所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<polygon points="100,0 160,180 10,60 190,60 40,180" fill="#F60"/>
</svg>
~~~
:-: 
圖 10
**5）\<polyline>**
  折線不需要閉合，與\<polygon>元素類似，也是由points屬性繪制，如下所示，得到的折線如圖11所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<polyline points="20,100 40,60 70,80 100,20" fill="none" stroke="black" />
</svg>
~~~
:-: 
圖 11
**6）\<path>**
  上述基本形狀都可以由\<path>元素來繪制，并且通過\<path>元素還可繪制出不規則的圖形，例如心形，如下所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<path d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
~~~
  其中d屬性可聲明一系列路徑，包含多個指令，如表4所列。
:-: 表 4
## 三、文檔結構
**1）內部樣式**
  SVG允許在其內部嵌入\<style>元素，如下所示，其中CDATA區段中的文本會被解析器忽略，但不影響渲染。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<style>
<![CDATA[
line {
stroke: black;
stroke-width: 2;
}
]]>
</style>
<line x1="20" y1="100" x2="100" y2="20" />
</svg>
~~~
**2）\<g>**
  \<g>元素相當于一個容器，能將其所有的子元素組合在一起。應用于\<g>元素中的屬性會被其子元素所繼承，如下所示，兩個圓的筆畫顏色都是綠色，而寬度都是10，如圖12所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<g id="ring" fill="white" stroke="green" stroke-width="10">
<circle cx="80" cy="80" r="50" />
<circle cx="120" cy="120" r="50" />
</g>
</svg>
~~~
:-: 
圖 12
**3）\<use>**
  \<use>元素可引用其它圖形，以及\<g>元素，類似于復制黏貼的功能。在下面的示例中，通過\<use>元素的xlink:href屬性引用了id為ring的\<g>元素，并且將\<use>元素上聲明的屬性傳給了\<circle>元素。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<g id="ring">
<circle cx="80" cy="80" r="50" />
<circle cx="120" cy="120" r="50" />
</g>
<use x="100" y="0" fill="white" stroke="green" stroke-width="10" xlink:href="#ring" />
</svg>
~~~
  注意，當給\<use>元素定義坐標后，\<circle>元素會與其相加計算出最終的坐標，如圖13所示。
:-: 
圖 13
**4）\<defs>**
  可將需要復用的圖形抽象到\<defs>元素中，在其內部定義的圖形不會直接呈現到頁面中。在上面那個示例的基礎上，將\<g>元素整個放置到\<defs>中，效果如圖14所示，沒有渲染\<g>元素中的圓。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<defs>
<g id="ring">
<circle cx="80" cy="80" r="50" />
<circle cx="120" cy="120" r="50" />
</g>
</defs>
<use x="100" y="0" fill="white" stroke="green" stroke-width="10" xlink:href="#ring" />
</svg>
~~~
:-: 
圖 14
**5）\<symbol>**
  \<symbol>提供了另一種組合圖形的方式，但與\<g>元素不同，它的圖形不會呈現，并且它可以聲明viewBox和preserveAspectRatio兩個屬性，如下所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100">
<symbol id="ring" viewBox="0 0 300 200">
<circle cx="80" cy="80" r="50" />
<circle cx="120" cy="120" r="50" />
</symbol>
<use fill="white" stroke="green" stroke-width="10" xlink:href="#ring" />
</svg>
~~~
**6）\<image>**
  \<use>元素可以引用SVG文件的某個部分，而\<image>元素可以引用整個SVG文件或柵格圖像（如下所示），并且能控制引用文件的尺寸和preserveAspectRatio屬性，效果如圖15所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<image xlink:href="img/avatar.png" width="150" />
</svg>
~~~
:-: 
圖 15
## 四、變形、圖案和漸變
**1）變形**
  transform屬性定義了一系列圖形元素變形的規則，包括位移（translate）、縮放（scale）、旋轉（rotate）和傾斜（skew）。注意，與CSS3中的transform屬性不同，SVG中的transform屬性作用的對象是坐標系統，而不是元素本身。
  translate()函數會接收兩個參數，沿x軸和y軸位移坐標系統，如圖16所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" transform="translate(50, 30)" />
</svg>
~~~
:-: 
圖 16
  scale()函數也會接收兩個參數（這點與CSS3中的scale()不同），沿x軸和y軸縮放坐標系統，如圖17所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" transform="scale(2, 3)" />
</svg>
~~~
:-: 
圖 17
  rotate()函數可接收三個參數，第一個是旋轉角度，另外兩個是原點坐標，也就是坐標系統按照該原點旋轉，如圖18所示，第三個矩形指定了原點。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" transform="rotate(30)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" transform="rotate(30, 50, 30)" />
</svg>
~~~
:-: 
圖 18
  傾斜分為兩個函數：skewX()和skewY()，分別會沿著x軸和y軸傾斜，如圖19所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" transform="skewX(30)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
<rect width="50" height="50" fill="#F60" transform="skewY(30)" />
</svg>
~~~
:-: 
圖 19
**2）圖案**
  要創建一個圖案，就得使用\<pattern>元素包裹圖形元素，再利用patternUnits屬性確定平鋪圖案的方式。它有兩個關鍵字可選，默認的objectBoundingBox會讓\<pattern>元素的尺寸以百分數或0~1之間的小數表示，參照對象分別是引用\<pattern>的圖形元素的寬和高。
  以下面的圖案為例，它的寬和高都是10%，參照的圓形的寬高都是200，計算出的實際值就都是20，效果如圖20所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200">
<defs>
<pattern id="star1" width="10%" height="10%" patternUnits="objectBoundingBox">
<circle cx="10" cy="10" r="10" />
</pattern>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#star1)" />
</svg>
~~~
:-: 
圖 20
  另一個userSpaceOnUse會讓\<pattern>元素的尺寸以絕對值表示，如下所示，因為\<pattern>元素的寬高都為25，所以圖案會有空白間隙，得到的效果如圖21所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200">
<defs>
<pattern id="star2" width="25" height="25" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" />
</pattern>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#star2)" />
</svg>
~~~
:-: 
圖 21
  \<pattern>元素還包含另一個patternContentUnits屬性，用于處理圖案內部的排列方式，它的兩個關鍵字也是objectBoundingBox和userSpaceOnUse，后者是該屬性的默認值。
  objectBoundingBox會讓\<pattern>中的圖形元素以小數定義，如下所示。三個屬性值都是0.1（不能用百分數），參照的仍然是引用\<pattern>的圖形元素，計算得到的實際值都是20，效果如圖22所示，每個圖案只顯示四分之一個圓。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200">
<defs>
<pattern id="star3" width="10%" height="10%" patternContentUnits="objectBoundingBox">
<circle cx=".1" cy=".1" r=".1" />
</pattern>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#star3)" />
</svg>
~~~
:-: 
圖 22
**3）漸變**
  \<linearGradient>元素用于繪制線性漸變，其子元素\<stop>可指定某處的色標（即漸變點），如下所示，在起點、中點和止點處聲明了三種顏色，其中stop-opacity用于聲明不透明度（取值范圍0~1），1表示完全不透明，得到的效果如圖23所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200">
<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="#F60" />
<stop offset="50%" stop-color="#CCC" stop-opacity=".5"/>
<stop offset="100%" stop-color="#FC0" />
</linearGradient>
</defs>
<rect width="200" height="100" fill="url(#gradient)" />
</svg>
~~~
:-: 
圖 23
  如果要改變線性漸變的方向，可通過修改起點和終點的坐標實現，例如沿垂直線漸變，代碼如下，得到的效果如圖24所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200">
<defs>
<linearGradient id="gradientVertical" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" stop-color="#F60" />
<stop offset="50%" stop-color="#CCC" stop-opacity=".5" />
<stop offset="100%" stop-color="#FC0" />
</linearGradient>
</defs>
<rect width="200" height="100" fill="url(#gradientVertical)" />
</svg>
~~~
:-: 
圖 24
  \<linearGradient>元素還有一個spreadMethod屬性，可指定在漸變范圍之外的填充方式，它有三個值可選，如下所列。
  （1）pad：默認值，用起點和終點的顏色填充。
  （2）reflect：按終點到起點，起點到終點的方式重復填充。
  （3）repeat：按起點到終點的方式重復填充。
  下面用一個示例來演示spreadMethod屬性，如圖25所示，從左往右，spreadMethod屬性的值依次是pad、reflect和repeat。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200">
<defs>
<linearGradient id="spreadMethod" x1="20%" y1="30%" x2="60%" y2="70%">
<stop offset="0" stop-color="#F60" />
<stop offset="40%" stop-color="#CCC" />
<stop offset="80%" stop-color="#FC0" />
</linearGradient>
<linearGradient id="gradientPad" href="#spreadMethod" spreadMethod="pad" />
<linearGradient id="gradientReflect" href="#spreadMethod" spreadMethod="reflect" />
<linearGradient id="gradientRepeat" href="#spreadMethod" spreadMethod="repeat" />
</defs>
<rect width="200" height="100" fill="url(#gradientPad)" />
<rect width="200" height="100" fill="url(#gradientReflect)" x="210" />
<rect width="200" height="100" fill="url(#gradientRepeat)" x="420" />
</svg>
~~~
:-: 
圖 25
  另外一種徑向漸變由\<radialGradient>元素控制，具體可參考官方文檔。
## 五、文本
**1）\<text>**
  \<text>元素用于處理SVG文件中的文本，在該元素中可修改字體樣式，包括字體名稱、大小、顏色、外觀等。在下面的示例中，聲明了四個\<text>元素，并為它們添加了各自的樣式，效果如圖26所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="100">
<style>
.small {
font: italic 13px sans-serif;
}
.heavy {
font: bold 30px sans-serif;
}
.Rrrrr {
font: italic 40px serif;
fill: red;
}
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">name</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Strick!</text>
</svg>
~~~
:-: 
圖 26
**2）對齊**
  在\<text>元素中對齊文本得用text-anchor屬性，它的對齊方式為起點（start）、居中（middle）和終點（end）。在下面的示例中，為了便于觀察這三個關鍵字的行為，畫了一條參考線，如圖27所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="150">
<path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
<text text-anchor="start" x="60" y="40">Start</text>
<text text-anchor="middle" x="60" y="75">Middle</text>
<text text-anchor="end" x="60" y="110">End</text>
</svg>
~~~
:-: 
圖 27
  SVG中的文本對齊與CSS中的略有不同，當起點對齊時，第一個字符會貼著參考線；當居中對齊時，文本的中間位置會被參考線貫穿；當終點對齊時，文本的最后一個字符會貼著參考線。
**3）\<tspan>**
  在\<text>元素中，通過其子元素\<tspan>可調整文本屬性，從而實現一段文本呈現不同的效果，如下所示，這段文本為斜體，而\<tspan>元素中的文本被加粗并且賦予了紅色（如圖28所示）。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
<style>
text {
font: italic 18px serif;
}
tspan {
font: bold 20px sans-serif;
fill: red;
}
</style>
<text x="10" y="30" class="small">
My name is
<tspan>Strick</tspan>!
</text>
</svg>
~~~
:-: 
圖 28
**4）長度**
  textLength屬性用于定義文本的長度，lengthAdjust屬性用于設置字符間距和字形，如下所示，默認值spacing只會控制字符間距，而spacingAndGlyphs還能控制字形，如圖29所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="60">
<text y="20" textLength="90%" lengthAdjust="spacing">Big text length</text>
<text y="40" textLength="90%" lengthAdjust="spacingAndGlyphs">Big text length</text>
</svg>
~~~
:-: 
圖 29
**5）文本路徑**
  將文本放置在\<textPath>元素中，就可讓文本按任意的路徑排列，而不是以往的水平或垂直排列。在下面的示例中，文本按一條螺旋曲線排列，如圖30所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="120">
<defs>
<path id="curve" d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
</defs>
<text>
<textPath href="#curve">
My name is Strick! What is your name?
</textPath>
</text>
</svg>
~~~
:-: 
圖 30
## 六、動畫
**1）\<animate>**
  \<animate>是一個動畫元素，它可以包含在圖形元素中，多個\<animate>元素可以實現多重動畫。例如將矩形先沿著水平方向，再沿著垂直方向位移，最后在位移結束后切換背景色的動畫，代碼如下所示，效果如圖31。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
<rect id="move" width="50" height="50" fill="#F60">
<animate attributeType="XML" dur="1s" repeatCount="1" attributeName="x"
from="0" to="50" fill="freeze" begin="1s" id="line" />
<animate attributeType="XML" dur="1s" repeatCount="1" attributeName="y"
from="0" to="30" fill="freeze" begin="2s" />
<animate attributeType="XML" dur="3s" repeatCount="indefinite" attributeName="fill"
values="#F60;#FC0;#CCC" begin="line.end" />
</rect>
</svg>
~~~
:-: 
圖 31
  \<animate>元素包含多個動畫屬性，此處只使用了其中的幾個，具體說明如下，其中fill="freeze"是指動畫結束后保持最后的動作。
  （1）attributeName：執行動畫的屬性。
  （2）attributeType：屬性類型，可選值包括XML和CSS。
  （3）from：屬性的起始值。
  （4）to：屬性的結束值。
  （5）dur：動畫持續時間。
  （6）repeatCount：動畫執行次數，可以是有限次的整數，也可以是無限次的indefinite。
  （7）begin：動畫開始時機，可以是秒數，也可以是某個動作，例如上面第一個動畫結束后執行顏色的切換。
  \<set>元素是對\<animate>元素的補充，可為那些不能過渡的屬性提供動畫，例如在某個時刻顯示文本，如下所示，點擊矩形可顯示“change color”。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
<!--省略矩形代碼-->
<text x="100" y="20" text-anchor="middle" style="display:none">
<set attributeName="display" attributeType="CSS" to="block" begin="move.click" dur="1s" fill="freeze" />
change color
</text>
</svg>
~~~
**2）\<animateTransform>**
  對于transform屬性的動畫，得用\<animateTransform>元素完成。下面的示例演示了旋轉矩形（如圖32所示），其中type屬性用于指定變形的動作，可選的值有translate、scale、rotate、skewX和skewY。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="160">
<rect id="move" width="50" height="50" fill="#F60" x="80" y="80">
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
from="0 80 80" to="360 80 80" dur="5s" repeatCount="indefinite" />
</rect>
</svg>
~~~
:-: 
圖 32
**3）\<animateMotion>**
  \<animateMotion>元素可讓圖形沿著任意路徑運動，無論是直線還是曲線，都能實現。在下面的示例中，橙色矩形會沿著S型曲線來回運動，如圖33所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
<path fill="none" stroke="#000"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<rect width="20" height="10" fill="#F60">
<animateMotion dur="10s" repeatCount="indefinite"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</rect>
</svg>
~~~
:-: 
圖 33
  如果要讓矩形始終沿著平行于曲線的方向運動，那么可以將rotate屬性設為auto，如圖34所示。
~~~html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
<path fill="none" stroke="#000"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<rect width="20" height="10" fill="#F60">
<animateMotion dur="10s" repeatCount="indefinite" rotate="auto"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</rect>
</svg>
~~~
:-: 
圖 34
*****
> 原文出處：
[博客園-HTML躬行記](https://www.cnblogs.com/strick/category/1770829.html)
[知乎專欄-HTML躬行記](https://zhuanlan.zhihu.com/c_1250826149041238016)
已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎閱讀。
推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。
- ES6
- 1、let和const
- 2、擴展運算符和剩余參數
- 3、解構
- 4、模板字面量
- 5、對象字面量的擴展
- 6、Symbol
- 7、代碼模塊化
- 8、數字
- 9、字符串
- 10、正則表達式
- 11、對象
- 12、數組
- 13、類型化數組
- 14、函數
- 15、箭頭函數和尾調用優化
- 16、Set
- 17、Map
- 18、迭代器
- 19、生成器
- 20、類
- 21、類的繼承
- 22、Promise
- 23、Promise的靜態方法和應用
- 24、代理和反射
- HTML
- 1、SVG
- 2、WebRTC基礎實踐
- 3、WebRTC視頻通話
- 4、Web音視頻基礎
- CSS進階
- 1、CSS基礎拾遺
- 2、偽類和偽元素
- 3、CSS屬性拾遺
- 4、浮動形狀
- 5、漸變
- 6、濾鏡
- 7、合成
- 8、裁剪和遮罩
- 9、網格布局
- 10、CSS方法論
- 11、管理后臺響應式改造
- React
- 1、函數式編程
- 2、JSX
- 3、組件
- 4、生命周期
- 5、React和DOM
- 6、事件
- 7、表單
- 8、樣式
- 9、組件通信
- 10、高階組件
- 11、Redux基礎
- 12、Redux中間件
- 13、React Router
- 14、測試框架
- 15、React Hooks
- 16、React源碼分析
- 利器
- 1、npm
- 2、Babel
- 3、webpack基礎
- 4、webpack進階
- 5、Git
- 6、Fiddler
- 7、自制腳手架
- 8、VSCode插件研發
- 9、WebView中的頁面調試方法
- Vue.js
- 1、數據綁定
- 2、指令
- 3、樣式和表單
- 4、組件
- 5、組件通信
- 6、內容分發
- 7、渲染函數和JSX
- 8、Vue Router
- 9、Vuex
- TypeScript
- 1、數據類型
- 2、接口
- 3、類
- 4、泛型
- 5、類型兼容性
- 6、高級類型
- 7、命名空間
- 8、裝飾器
- Node.js
- 1、Buffer、流和EventEmitter
- 2、文件系統和網絡
- 3、命令行工具
- 4、自建前端監控系統
- 5、定時任務的調試
- 6、自制短鏈系統
- 7、定時任務的進化史
- 8、通用接口
- 9、微前端實踐
- 10、接口日志查詢
- 11、E2E測試
- 12、BFF
- 13、MySQL歸檔
- 14、壓力測試
- 15、活動規則引擎
- 16、活動配置化
- 17、UmiJS版本升級
- 18、半吊子的可視化搭建系統
- 19、KOA源碼分析（上）
- 20、KOA源碼分析（下）
- 21、花10分鐘入門Node.js
- 22、Node環境升級日志
- 23、Worker threads
- 24、低代碼
- 25、Web自動化測試
- 26、接口攔截和頁面回放實驗
- 27、接口管理
- 28、Cypress自動化測試實踐
- 29、基于Electron的開播助手
- Node.js精進
- 1、模塊化
- 2、異步編程
- 3、流
- 4、事件觸發器
- 5、HTTP
- 6、文件
- 7、日志
- 8、錯誤處理
- 9、性能監控（上）
- 10、性能監控（下）
- 11、Socket.IO
- 12、ElasticSearch
- 監控系統
- 1、SDK
- 2、存儲和分析
- 3、性能監控
- 4、內存泄漏
- 5、小程序
- 6、較長的白屏時間
- 7、頁面奔潰
- 8、shin-monitor源碼分析
- 前端性能精進
- 1、優化方法論之測量
- 2、優化方法論之分析
- 3、瀏覽器之圖像
- 4、瀏覽器之呈現
- 5、瀏覽器之JavaScript
- 6、網絡
- 7、構建
- 前端體驗優化
- 1、概述
- 2、基建
- 3、后端
- 4、數據
- 5、后臺
- Web優化
- 1、CSS優化
- 2、JavaScript優化
- 3、圖像和網絡
- 4、用戶體驗和工具
- 5、網站優化
- 6、優化閉環實踐
- 數據結構與算法
- 1、鏈表
- 2、棧、隊列、散列表和位運算
- 3、二叉樹
- 4、二分查找
- 5、回溯算法
- 6、貪心算法
- 7、分治算法
- 8、動態規劃
- 程序員之路
- 大學
- 2011年
- 2012年
- 2013年
- 2014年
- 項目反思
- 前端基礎學習分享
- 2015年
- 再一次項目反思
- 然并卵
- PC網站CSS分享
- 2016年
- 制造自己的榫卯
- PrimusUI
- 2017年
- 工匠精神
- 2018年
- 2019年
- 前端學習之路分享
- 2020年
- 2021年
- 2022年
- 2023年
- 2024年
- 日志
- 2020