<svg>是矢量圖的根元素，通過xmlns屬性聲明命名空間，從而告訴用戶代理標記名稱屬於哪個XML方言。在下面的示例中，為<svg>元素聲明了寬度和高度（默認以像素為單位），其子元素<title>可作為提示，在<desc>中可聲明一段描述性純文本，這兩個元素都不會在頁面中呈現。而<rect>是一個矩形，將被繪製到頁面中。
<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屬性）。
<img src="demo.svg" />
一、坐標系統
1）視口
在SVG中，有一張無限大的畫布，而畫布區域被稱為視口（viewport）。通過<svg>元素的width和height兩個屬性可定義視口的尺寸，視口的原點在其左上角。
而在視口中，還包含一個坐標系統，由viewBox屬性控制。它能包含四個數值（以逗號或空格分隔），分別是用戶坐標系統的最小橫坐標（x軸）和縱坐標（y軸），以及寬和高。
下面的兩個<svg>元素，第一個採用了默認的坐標系統，第二個聲明了新的坐標系統，並且寬高比相同，如圖1所示，第二個矩形縮小了。
<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>元素中，修改了矩形的坐標，正好在左上角。
<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”。
preserveAspectRatio: <align> [<meetOrSlice>]
其中<align>的屬性值由兩個軸（x和y）以及三個位置（min、mid和max）組合而成，如表1所列。
表 1
| 值 |
說明 |
| xMin |
viewport與viewBox的左側對齊 |
| xMid |
viewport與viewBox的x軸中點對齊 |
| xMax |
viewport與viewBox的右側對齊 |
| YMin |
viewport與viewBox的頂部對齊 |
| YMid |
viewport與viewBox的y軸中點對齊 |
| YMax |
viewport與viewBox的底部對齊 |
在下面的示例中，由於三個<svg>元素寬高比是3:2，而viewBox的寬高比是3:1，因此矩形會等比縮小。對它們分別應用xMinYMin、xMidYMid和xMinYMax，效果如圖3所示。
<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 |
保留圖形的寬高比，並且縮放viewBox以適應viewport |
| slice |
保留圖形的寬高比，並且放大viewBox以覆蓋viewport |
在下面的示例中，兩個矩形的高度比視口要大，對它們分別應用meet和slice，效果如圖4所示，第二個矩形將整個視口給填滿了。
<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所示。
<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
| 值 |
說明 |
| stroke |
筆畫顏色 |
| stroke-dasharray |
筆畫的外觀（實線、點線或虛線），由一系列逗號分隔的数字組成，表示長度和空隙長度 |
| stroke-dashoffset |
相對繪圖起點的偏移值 |
| stroke-linecap |
描邊的展現形狀 |
| stroke-linejoin |
路徑轉角處的形狀 |
| stroke-miterlimit |
斜接長度與線寬的最大比例 |
| stroke-opacity |
筆畫不透明度，取值範圍0~1，其中0表示透明 |
| stroke-width |
筆畫寬度 |
圖 6
2）<rect>
除了直角矩形之外，還可以聲明圓角矩形，如下所示，效果如圖7所示。
<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屬性定義一個值，就能得到圓環缺失一段的效果，從而就能模擬出圓環型的進度條了。
<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所示。
<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所示。
<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所示。
<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>元素還可繪製出不規則的圖形，例如心形，如下所示。
<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
| 指令 |
效果 |
| M、m |
移動到指定的坐標 |
| L、l |
繪製一條直線 |
| H、h |
繪製一條水平線 |
| V、v |
繪製一條垂直線 |
| Z、z |
關閉路徑 |
| Q、q |
繪製一條二次貝塞爾曲線 |
| T、t |
繪製一條平滑的二次貝塞爾曲線 |
| C、c |
繪製一條三次貝塞爾曲線 |
| S、s |
繪製一條平滑的三次貝塞爾曲線 |
| A、a |
繪製弧形曲線 |
三、文檔結構
1）內部樣式
SVG允許在其內部嵌入<style>元素，如下所示，其中CDATA區段中的文本會被解析器忽略，但不影響渲染。
<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所示。
<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>元素。
<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>元素中的圓。
<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兩個屬性，如下所示。
<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所示。
<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所示。
<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所示。
<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所示，第三個矩形指定了原點。
<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所示。
<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所示。
<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所示。
<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所示，每個圖案只显示四分之一個圓。
<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所示。
<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所示。
<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。
<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所示。
<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所示。
<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所示）。
<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所示。
<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所示。
<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。
<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”。
<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。
<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所示。
<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所示。
<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
【參考資料】
SVG元素參考
[技術分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實做（上）
理解SVG viewport,viewBox,preserveAspectRatio縮放
SVG圖像的viewport和viewBox用於設置圖像可見區域的大小
SVG：理解stroke-dasharray和stroke-dashoffset屬性
SVG 研究之路 (16) – Stroke-miterlimit
如何使用SVG圖案
SVG 研究之路 (26) – 有趣的 Patterns
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※帶您來了解什麼是 USB CONNECTOR ?
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!
※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※教你寫出一流的銷售文案?
