****此篇為svg的進(jìn)階介紹篇绞绒，了解更多關(guān)于svg的介紹請(qǐng)看 HTML5學(xué)習(xí)--SVG全攻略（基礎(chǔ)篇）***

**一.SVG路徑 **

（一）直線命令
　path元素里有5個(gè)畫直線的命令婶希，顧名思義，直線命令就是在兩個(gè)點(diǎn)之間畫直線蓬衡。首先是“Move to”命令喻杈，M，前面已經(jīng)提到過狰晚，它需要兩個(gè)參數(shù)筒饰，分別是需要移動(dòng)到的點(diǎn)的x軸和y軸的坐標(biāo)。假設(shè)家肯，你的畫筆當(dāng)前位于一個(gè)點(diǎn)龄砰，在使用M命令移動(dòng)畫筆后，只會(huì)移動(dòng)畫筆讨衣，但不會(huì)在兩點(diǎn)之間畫線换棚。因?yàn)镸命令僅僅是移動(dòng)畫筆，但不畫線反镇。所以M命令經(jīng)常出現(xiàn)在路徑的開始處固蚤，用來指明從何處開始畫。
　　為了更好地展示路徑歹茶，下面的所有例子里夕玩，在用path繪制路徑的同時(shí)你弦，也會(huì)用circle標(biāo)注路徑上的點(diǎn)。

<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>

能夠真正畫出線的命令有三個(gè)（M命令是移動(dòng)畫筆位置燎孟，但是不畫線）禽作，最常用的是“Line to”命令，L揩页，L需要兩個(gè)參數(shù)旷偿，分別是一個(gè)點(diǎn)的x軸和y軸坐標(biāo)，L命令將會(huì)在當(dāng)前位置和新位置（L前面畫筆所在的點(diǎn)）之間畫一條線段爆侣。

L x y (or l dx dy)

另外還有兩個(gè)簡(jiǎn)寫命令萍程，用來繪制平行線和垂直線。H兔仰，繪制平行線茫负。V，繪制垂直線乎赴。這兩個(gè)命令都只帶一個(gè)參數(shù)忍法，標(biāo)明在x軸或y軸移動(dòng)到的位置，因?yàn)樗鼈兌贾辉谧鴺?biāo)軸的一個(gè)方向上移動(dòng)无虚。

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

最后缔赠，我們可以通過一個(gè)“閉合路徑命令”Z來簡(jiǎn)化上面的path，Z命令會(huì)從當(dāng)前點(diǎn)畫一條直線到路徑的起點(diǎn)友题，盡管我們不總是需要閉合路徑嗤堰，但是它還是經(jīng)常被放到路徑的最后。另外度宦，Z命令不用區(qū)分大小寫踢匣。

Z (or z)

畫一個(gè)80*80的正方形實(shí)例

運(yùn)行結(jié)果.png

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

移動(dòng)畫筆到（10，10）位置出發(fā)戈抄，繪制水平線到指定的 90 位置离唬，繪制豎直線到指定的 90 位置 ，繪制水平線到指定的 10 位置划鸽，閉合路徑（回到原點(diǎn)）输莺。

（二）三次貝塞爾曲線指令 (C,S)
曲線指令一共有三組，和直線指令一樣裸诽，指令字母大寫表示坐標(biāo)位置是絕對(duì)坐標(biāo)嫂用，指令字母小寫表示坐標(biāo)位置是相對(duì)坐標(biāo)。三次貝塞爾曲線指令 (C,c,S,s)是其中的一個(gè)丈冬。

可以通過定義一個(gè)起點(diǎn)和終點(diǎn)嘱函，以及兩個(gè)控制點(diǎn)（一個(gè)控制起點(diǎn)，一個(gè)控制終點(diǎn)）埂蕊，繪制一條貝塞爾曲線往弓。

三次貝塞爾曲線指令的格式為：

C (or c) x1,y1 x2,y2 x,y

x1,y1 是曲線起點(diǎn)的控制點(diǎn)坐標(biāo)
x2,y2 是曲線終點(diǎn)的控制點(diǎn)坐標(biāo)
x,y 是曲線的終點(diǎn)坐標(biāo)

你可以將若干個(gè)貝塞爾曲線連起來疏唾，從而創(chuàng)建出一條很長的平滑曲線。通常情況下函似，一個(gè)點(diǎn)某一側(cè)的控制點(diǎn)是它另一側(cè)的控制點(diǎn)的對(duì)稱（以保持斜率不變）槐脏。這樣，你可以使用一個(gè)簡(jiǎn)寫的貝塞爾曲線命令S缴淋，如下所示：

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

S命令可以用來創(chuàng)建與之前那些曲線一樣的貝塞爾曲線准给，但是，如果S命令跟在一個(gè)C命令或者另一個(gè)S命令的后面重抖，它的第一個(gè)控制點(diǎn)，就會(huì)被假設(shè)成前一個(gè)控制點(diǎn)的對(duì)稱點(diǎn)祖灰。如果S命令單獨(dú)使用钟沛，前面沒有C命令或者另一個(gè)S命令，那么它的兩個(gè)控制點(diǎn)就會(huì)被假設(shè)為同一個(gè)點(diǎn)局扶。下面是S命令的語法示例恨统，下圖中的某個(gè)控制點(diǎn)用紅色標(biāo)示，與它對(duì)稱的控制點(diǎn)用藍(lán)色標(biāo)示三妈。

運(yùn)行結(jié)果.png

（三）二次貝塞爾曲線指令 (Q,T)

二次貝塞爾曲線Q畜埋，它比三次貝塞爾曲線簡(jiǎn)單，只需要一個(gè)控制點(diǎn)畴蒲，用來確定起點(diǎn)和終點(diǎn)的曲線斜率悠鞍。因此它需要兩組參數(shù)，控制點(diǎn)和終點(diǎn)坐標(biāo)模燥。

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

image.png

　就像三次貝塞爾曲線有一個(gè)S命令咖祭，二次貝塞爾曲線有一個(gè)差不多的T命令，可以通過更簡(jiǎn)短的參數(shù)蔫骂，延長二次貝塞爾曲線么翰。

T x y (or t dx dy)

和三次貝塞爾曲線指令 S一樣，快捷命令T會(huì)通過前一個(gè)控制點(diǎn)辽旋，推斷出一個(gè)新的控制點(diǎn)浩嫌。這意味著，在你的第一個(gè)控制點(diǎn)后面补胚，可以只定義終點(diǎn)码耐，就創(chuàng)建出一個(gè)相當(dāng)復(fù)雜的曲線。需要注意的是糖儡，T命令前面必須是一個(gè)Q命令伐坏，或者是另一個(gè)T命令，才能達(dá)到這種效果握联。如果T單獨(dú)使用桦沉，那么控制點(diǎn)就會(huì)被認(rèn)為和終點(diǎn)是同一個(gè)點(diǎn)每瞒，所以畫出來的將是一條直線。

<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>

運(yùn)行結(jié)果.png

（四）橢圓弧線 (A)

弧形命令A(yù)是另一個(gè)創(chuàng)建SVG曲線的命令纯露〗斯牵基本上，弧形可以視為圓形或橢圓形的一部分埠褪。假設(shè)浓利，已知橢圓形的長軸半徑和短軸半徑，另外已知兩個(gè)點(diǎn)（它們的距離在圓的半徑范圍內(nèi)）钞速，這時(shí)我們會(huì)發(fā)現(xiàn)贷掖，有兩個(gè)路徑可以連接這兩個(gè)點(diǎ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）是否選擇逆時(shí)針方向的那一段弧
x, y - 弧的終點(diǎn)位置

image.png

　如上圖例所示驾凶，畫布上有一條對(duì)角線牙甫，中間有兩個(gè)橢圓弧被對(duì)角線切開(x radius = 30, y radius = 50)。第一個(gè)橢圓弧的x-axis-rotation（x軸旋轉(zhuǎn)角度）是0调违，所以弧形所在的橢圓是正置的（沒有傾斜）窟哺。在第二個(gè)橢圓弧中，x-axis-rotation設(shè)置為-45技肩，所以這是一個(gè)旋轉(zhuǎn)了45度的橢圓且轨，并以短軸為分割線，形成了兩個(gè)對(duì)稱的弧形亩鬼。參看圖示中的第二個(gè)橢圓形殖告。

如前所講，還有兩種可能的橢圓用來形成路徑雳锋，它們給出的四種可能的路徑中黄绩，有兩種不同的路徑。這里要講的參數(shù)是large-arc-flag（角度大戌韫） 和sweep-flag（弧線方向）爽丹，large-arc-flag決定弧線是大于還是小于180度，0表示小角度弧辛蚊，1表示大角度弧粤蝎。sweep-flag表示弧線的方向，0表示從起點(diǎn)到終點(diǎn)沿逆時(shí)針畫弧袋马，1表示從起點(diǎn)到終點(diǎn)沿順時(shí)針畫弧初澎。下面的例子展示了這四種情況。

<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>

運(yùn)行結(jié)果.png

**二.SVG文本 **

（一）< text > 及其屬性
　在SVG中有兩種截然不同的文本模式. 一種是寫在圖像中的文本，另一種是SVG字體”纾現(xiàn)在我們主要集中前者：寫在圖像中的文本软啼。在一個(gè)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 簡(jiǎn)書</text>
</svg>

運(yùn)行結(jié)果.png

屬性x和屬性y性決定了文本在視口中顯示的位置祸挪。屬性text-anchor，可以有這些值：start贞间、middle贿条、end或inherit，允許決定從這一點(diǎn)開始的文本流的方向增热。和形狀元素類似整以，屬性fill可以給文本填充顏色，屬性stroke可以給文本描邊钓葫，形狀元素和文本元素都可以引用漸變或圖案, 相比較CSS2.1只能繪制簡(jiǎn)單的彩色文字悄蕾，SVG顯得更具有優(yōu)勢(shì)。

設(shè)置字體屬性
　　文本的一個(gè)至關(guān)重要的部分是它顯示的字體础浮。SVG提供了一些屬性，類似于它們的CSS同行奠骄，用來激活文本選區(qū)豆同。下列每個(gè)屬性可以被設(shè)置為一個(gè)SVG屬性或者成為一個(gè)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元素用來標(biāo)記大塊文本的子部分桅狠，它必須是一個(gè)text元素或別的tspan元素的子元素讼载。一個(gè)典型的用法是把句子中的一個(gè)詞變成粗體紅色。

<text>
  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>

運(yùn)行結(jié)果.png

（三）路徑文本
除了筆直地繪制一行文字以外中跌， 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>

運(yùn)行結(jié)果.png

startOffset 屬性 確定排列起始
dx, dy 屬性 切線和法線方向的偏移

（四）< a > - 超鏈接
可以添加到任意的圖形上

屬性：
xlink:href 指定連接地址
xlink:title 指定連接提示
target 指定打開目標(biāo)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.reibang.com" xlink:title="打開簡(jiǎn)書"  target="_blank">
    <text x="0" y="15" fill="red">I love 簡(jiǎn)書</text>
  </a>
</svg>

運(yùn)行結(jié)果.png

三.剪切和遮罩

（一）創(chuàng)建剪切
clip-path屬性是指定一個(gè)應(yīng)用到元素上的剪切路徑。應(yīng)用在SVG中 < clipPath > 元素上的屬性值可以完全運(yùn)用在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>

運(yùn)行結(jié)果.png

在(100,100)創(chuàng)建一個(gè)圓形凸克，半徑是100议蟆。屬性clip-path引用了一個(gè)帶單個(gè)rect元素的< clipPath >元素。它內(nèi)部的這個(gè)矩形將把畫布的上半部分涂黑触徐。

注意：clipPath元素經(jīng)常放在一個(gè)defs元素內(nèi)咪鲜。
　　然而，該rect不會(huì)被繪制撞鹉。它的象素?cái)?shù)據(jù)將用來確定：圓形的哪些像素需要最終呈現(xiàn)出來疟丙。因?yàn)榫匦沃桓采w了圓形的上半部分，所以下半部分將消失了(右圖示例)鸟雏；現(xiàn)在我們已經(jīng)有了一個(gè)半圓形享郊，不用處理弧形路徑元素。對(duì)于這個(gè)剪切孝鹊，clipPath內(nèi)部的每個(gè)路徑都會(huì)被檢查到炊琉、與它的描邊屬性一起被估值、變形又活。然后目標(biāo)的位于clipPath內(nèi)容的結(jié)果的透明度區(qū)域的每一塊都不會(huì)呈現(xiàn)苔咪。顏色、不透明度都沒有這種效果柳骄，因?yàn)樗鼈儾荒茏屢徊糠謴氐紫А?/p>

（二）遮罩
遮罩的效果最令人印象深刻的是表現(xiàn)為一個(gè)漸變团赏。如果你想要讓一個(gè)元素淡出，你可以利用遮罩效果實(shí)現(xiàn)這一點(diǎ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>

運(yùn)行結(jié)果.png

　你看到有一個(gè)綠色填充的矩形在底層舔清，一個(gè)紅色填充的矩形在上層。后者有一個(gè)mask屬性指向一個(gè)mask元素曲初。mask元素的內(nèi)容是一個(gè)單一的rect元素体谒，它填充了一個(gè)透明到白色的漸變。作為紅色矩形繼承mark內(nèi)容的alpha值（透明度）的結(jié)果臼婆，我們看到一個(gè)從綠色到紅色漸變的輸出（右圖）抒痒。

（三）用opacity定義透明度
有一個(gè)簡(jiǎn)單方法可以用來為整個(gè)元素設(shè)置透明度。它就是opacity屬性：

<rect x="0" y="0" width="100" height="100" opacity=".5" />

上面的矩形將繪制為半透明目锭。還有兩個(gè)分開的屬性fill-opacity和stroke-opacity评汰，分別用來控制填充和描邊的不透明度。注意痢虹，描邊將繪制在填充的上面被去。因此，如果你在元素上設(shè)置了一個(gè)描邊透明度奖唯，它同時(shí)還有填充惨缆，則填充將在描邊上透過一半，另一半背景也將出現(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>

運(yùn)行結(jié)果.png