****此篇為svg的進階介紹篇，了解更多關于svg的介紹請看 HTML5學習--SVG全攻略（基礎篇）***
**一.SVG路徑 **
（一）直線命令
path元素里有5個畫直線的命令，顧名思義，直線命令就是在兩個點之間畫直線。首先是“Move to”命令，M，前面已經(jīng)提到過，它需要兩個參數(shù)，分別是需要移動到的點的x軸和y軸的坐標。假設，你的畫筆當前位于一個點，在使用M命令移動畫筆后，只會移動畫筆，但不會在兩點之間畫線。因為M命令僅僅是移動畫筆，但不畫線。所以M命令經(jīng)常出現(xiàn)在路徑的開始處，用來指明從何處開始畫。
為了更好地展示路徑，下面的所有例子里，在用path繪制路徑的同時，也會用circle標注路徑上的點。
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10"/>
<!-- Points -->
<circle cx="10" cy="10" r="2" fill="red"/>
</svg>
能夠真正畫出線的命令有三個（M命令是移動畫筆位置，但是不畫線），最常用的是“Line to”命令，L，L需要兩個參數(shù)，分別是一個點的x軸和y軸坐標，L命令將會在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段。
L x y (or l dx dy)
另外還有兩個簡寫命令，用來繪制平行線和垂直線。H，繪制平行線。V，繪制垂直線。這兩個命令都只帶一個參數(shù)，標明在x軸或y軸移動到的位置，因為它們都只在坐標軸的一個方向上移動。
H x (or h dx)
V y (or v dy)
最后，我們可以通過一個“閉合路徑命令”Z來簡化上面的path，Z命令會從當前點畫一條直線到路徑的起點，盡管我們不總是需要閉合路徑，但是它還是經(jīng)常被放到路徑的最后。另外，Z命令不用區(qū)分大小寫。
Z (or z)
畫一個80*80的正方形實例
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
移動畫筆到（10，10）位置出發(fā)，繪制水平線到指定的 90 位置，繪制豎直線到指定的 90 位置 ，繪制水平線到指定的 10 位置，閉合路徑（回到原點）。
（二）三次貝塞爾曲線指令 (C,S)
曲線指令一共有三組，和直線指令一樣，指令字母大寫表示坐標位置是絕對坐標，指令字母小寫表示坐標位置是相對坐標。三次貝塞爾曲線指令 (C,c,S,s)是其中的一個。
可以通過定義一個起點和終點，以及兩個控制點（一個控制起點，一個控制終點），繪制一條貝塞爾曲線。
三次貝塞爾曲線指令的格式為：
C (or c) x1,y1 x2,y2 x,y
x1,y1 是曲線起點的控制點坐標
x2,y2 是曲線終點的控制點坐標
x,y 是曲線的終點坐標
你可以將若干個貝塞爾曲線連起來，從而創(chuàng)建出一條很長的平滑曲線。通常情況下，一個點某一側的控制點是它另一側的控制點的對稱（以保持斜率不變）。這樣，你可以使用一個簡寫的貝塞爾曲線命令S，如下所示：
S x2 y2, x y (or s dx2 dy2, dx dy)
S命令可以用來創(chuàng)建與之前那些曲線一樣的貝塞爾曲線，但是，如果S命令跟在一個C命令或者另一個S命令的后面，它的第一個控制點，就會被假設成前一個控制點的對稱點。如果S命令單獨使用，前面沒有C命令或者另一個S命令，那么它的兩個控制點就會被假設為同一個點。下面是S命令的語法示例，下圖中的某個控制點用紅色標示，與它對稱的控制點用藍色標示。
（三）二次貝塞爾曲線指令 (Q,T)
二次貝塞爾曲線Q，它比三次貝塞爾曲線簡單，只需要一個控制點，用來確定起點和終點的曲線斜率。因此它需要兩組參數(shù)，控制點和終點坐標。
Q x1 y1, x y (or q dx1 dy1, dx dy)
就像三次貝塞爾曲線有一個S命令，二次貝塞爾曲線有一個差不多的T命令，可以通過更簡短的參數(shù)，延長二次貝塞爾曲線。
T x y (or t dx dy)
和三次貝塞爾曲線指令 S一樣，快捷命令T會通過前一個控制點，推斷出一個新的控制點。這意味著，在你的第一個控制點后面，可以只定義終點，就創(chuàng)建出一個相當復雜的曲線。需要注意的是，T命令前面必須是一個Q命令，或者是另一個T命令，才能達到這種效果。如果T單獨使用，那么控制點就會被認為和終點是同一個點，所以畫出來的將是一條直線。
<svg width="190px" height="160px" version="1.1" 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>
（四）橢圓弧線 (A)
弧形命令A是另一個創(chuàng)建SVG曲線的命令。基本上，弧形可以視為圓形或橢圓形的一部分。假設，已知橢圓形的長軸半徑和短軸半徑，另外已知兩個點（它們的距離在圓的半徑范圍內(nèi)），這時我們會發(fā)現(xiàn)，有兩個路徑可以連接這兩個點。每種情況都可以生成出四種弧形。所以，為了保證創(chuàng)建的弧形唯一，A命令需要用到比較多的參數(shù)：
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
弧線命令：
rx - （radius-x）弧線所在橢圓的 x 半軸長
ry - （radius-y）弧線所在橢圓的 y 半軸長
xr - （xAxis-rotation）弧線所在橢圓的長軸角度
laf - （large-arc-flag）是否選擇弧長較長的那一段弧
sf - （sweep-flag）是否選擇逆時針方向的那一段弧
x, y - 弧的終點位置
如上圖例所示，畫布上有一條對角線，中間有兩個橢圓弧被對角線切開(x radius = 30, y radius = 50)。第一個橢圓弧的x-axis-rotation（x軸旋轉(zhuǎn)角度）是0，所以弧形所在的橢圓是正置的（沒有傾斜）。在第二個橢圓弧中，x-axis-rotation設置為-45，所以這是一個旋轉(zhuǎn)了45度的橢圓，并以短軸為分割線，形成了兩個對稱的弧形。參看圖示中的第二個橢圓形。
如前所講，還有兩種可能的橢圓用來形成路徑，它們給出的四種可能的路徑中，有兩種不同的路徑。這里要講的參數(shù)是large-arc-flag（角度大小） 和sweep-flag（弧線方向），large-arc-flag決定弧線是大于還是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧線的方向，0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧。下面的例子展示了這四種情況。
<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z" fill="green"/>
<path d="M230 80
A 45 45, 0, 1, 0, 275 125
L 275 80 Z" fill="red"/>
<path d="M80 230
A 45 45, 0, 0, 1, 125 275
L 125 230 Z" fill="purple"/>
<path d="M230 230
A 45 45, 0, 1, 1, 275 275
L 275 230 Z" fill="blue"/>
</svg>
**二.SVG文本 **
（一）< text > 及其屬性
在SVG中有兩種截然不同的文本模式. 一種是寫在圖像中的文本，另一種是SVG字體。現(xiàn)在我們主要集中前者：寫在圖像中的文本。在一個SVG文檔中，元素內(nèi)部可以放任何的文字。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="100" y="100" font-weight="bold" fill="red" font-size="30">Hello 簡書</text>
</svg>
屬性x和屬性y性決定了文本在視口中顯示的位置。屬性text-anchor，可以有這些值：start、middle、end或inherit，允許決定從這一點開始的文本流的方向。和形狀元素類似，屬性fill可以給文本填充顏色，屬性stroke可以給文本描邊，形狀元素和文本元素都可以引用漸變或圖案, 相比較CSS2.1只能繪制簡單的彩色文字，SVG顯得更具有優(yōu)勢。
設置字體屬性
文本的一個至關重要的部分是它顯示的字體。SVG提供了一些屬性，類似于它們的CSS同行，用來激活文本選區(qū)。下列每個屬性可以被設置為一個SVG屬性或者成為一個CSS聲明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。
（二）tspan
tspan元素用來標記大塊文本的子部分，它必須是一個text元素或別的tspan元素的子元素。一個典型的用法是把句子中的一個詞變成粗體紅色。
<text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
（三）路徑文本
除了筆直地繪制一行文字以外， SVG 也可以根據(jù) < path > 元素的形狀來放置文字。 只要在textPath元素內(nèi)部放置文本，并通過其xlink:href屬性值引用< path > 元素，我們就可以讓文字塊呈現(xiàn)在< path > 元素給定的路徑上了。
使用方法：
<path id="my_path" d="M 100 200 Q 200 100 300 200 T 500 200" stroke="rgb(0,255,0)" fill="none" />
<text>
<textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>
startOffset 屬性 確定排列起始
dx, dy 屬性 切線和法線方向的偏移
（四）< a > - 超鏈接
可以添加到任意的圖形上
屬性：
xlink:href 指定連接地址
xlink:title 指定連接提示
target 指定打開目標
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.lxweimin.com" xlink:title="打開簡書" target="_blank">
<text x="0" y="15" fill="red">I love 簡書</text>
</a>
</svg>
三.剪切和遮罩
（一）創(chuàng)建剪切
clip-path屬性是指定一個應用到元素上的剪切路徑。應用在SVG中 < clipPath > 元素上的屬性值可以完全運用在clip-path的屬性上。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
在(100,100)創(chuàng)建一個圓形，半徑是100。屬性clip-path引用了一個帶單個rect元素的< clipPath >元素。它內(nèi)部的這個矩形將把畫布的上半部分涂黑。
注意：clipPath元素經(jīng)常放在一個defs元素內(nèi)。
然而，該rect不會被繪制。它的象素數(shù)據(jù)將用來確定：圓形的哪些像素需要最終呈現(xiàn)出來。因為矩形只覆蓋了圓形的上半部分，所以下半部分將消失了(右圖示例)；現(xiàn)在我們已經(jīng)有了一個半圓形，不用處理弧形路徑元素。對于這個剪切，clipPath內(nèi)部的每個路徑都會被檢查到、與它的描邊屬性一起被估值、變形。然后目標的位于clipPath內(nèi)容的結果的透明度區(qū)域的每一塊都不會呈現(xiàn)。顏色、不透明度都沒有這種效果，因為它們不能讓一部分徹底消失。
（二）遮罩
遮罩的效果最令人印象深刻的是表現(xiàn)為一個漸變。如果你想要讓一個元素淡出，你可以利用遮罩效果實現(xiàn)這一點。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="green" />
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
你看到有一個綠色填充的矩形在底層，一個紅色填充的矩形在上層。后者有一個mask屬性指向一個mask元素。mask元素的內(nèi)容是一個單一的rect元素，它填充了一個透明到白色的漸變。作為紅色矩形繼承mark內(nèi)容的alpha值（透明度）的結果，我們看到一個從綠色到紅色漸變的輸出（右圖）。
（三）用opacity定義透明度
有一個簡單方法可以用來為整個元素設置透明度。它就是opacity屬性：
<rect x="0" y="0" width="100" height="100" opacity=".5" />
上面的矩形將繪制為半透明。還有兩個分開的屬性fill-opacity和stroke-opacity，分別用來控制填充和描邊的不透明度。注意，描邊將繪制在填充的上面。因此，如果你在元素上設置了一個描邊透明度，它同時還有填充，則填充將在描邊上透過一半，另一半背景也將出現(xiàn)：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="200" height="200" fill="blue" />
<circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
</svg>
