經(jīng)過(guò)上周的學(xué)習(xí)显晶，今天的總結(jié)分享我想把svg分成三個(gè)部分：基本元素调塌、path、動(dòng)畫头镊。
基本元素：
主要是svg畫圖形時(shí)常用到的一些 矩形 <rect>蚣驼、圓形 <circle>、橢圓 <ellipse>相艇、線 <line>颖杏、折線 <polyline>、多邊形 <polygon>坛芽，以及一些可能會(huì)用到的元素
path：
主要是基本元素中比較復(fù)雜留储，功比較多的一個(gè)元素 路徑 <path>
動(dòng)畫：
主要是5大成員<set>、<animate>咙轩、<animateColor>获讳、<animateTransform>、<animateMotion>
現(xiàn)在開始吧活喊！
首先講一下svg的環(huán)境：
環(huán)境
環(huán)境
<svg width="320" height="320"?viewbox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
……
</svg>
解釋：
1.svg標(biāo)簽表示svg容器丐膝，標(biāo)簽內(nèi)寫svg的元素、動(dòng)畫
2.width钾菊、height表示容器的尺寸
3.xmlns是命名空間的聲明尤误，svg是使用XML格式的
4.viewbox這個(gè)參數(shù)可要可不要。但是它關(guān)乎你畫的圖形是否支持縮放功能结缚。
a损晤、在一個(gè)200*300的畫布上畫出一個(gè)圓心(100, 100)半徑100的圓
b、當(dāng)我把畫布改成100*300红竭，會(huì)是什莫效果尤勋？
超出畫布的部分被隱藏了
c、如果我希望畫布改變了茵宪，圖形也能夠完全顯示最冰，有什莫辦法？
難道我要手動(dòng)去修改圓的參數(shù)稀火？
如果只有1個(gè)很簡(jiǎn)單的圖形的畫也就很好操作暖哨，但如果是一個(gè)很復(fù)雜個(gè)圖形呢？如果有很多的圖形呢凰狞？在實(shí)際項(xiàng)目中不會(huì)只有一個(gè)svg篇裁，一個(gè)svg也不會(huì)只有一個(gè)簡(jiǎn)單圖形，在實(shí)際項(xiàng)目中用這種方法的成本就很高了
那還有沒(méi)有其他的辦法呢赡若？當(dāng)然有啦!viewbox就可以解決這個(gè)問(wèn)題达布。
d、viewBox 有四個(gè)參數(shù)分別代表：最小X軸數(shù)值逾冬；最小y軸數(shù)值黍聂；svg寬度躺苦；svg高度
viewbox="0 0 200 300"
通常情況前兩個(gè)參數(shù)不用變 0 0，剛好代表了坐標(biāo)原點(diǎn)的位置产还，如果需要改變坐標(biāo)原點(diǎn)的位置匹厘，則改變前兩個(gè)參數(shù)；
后兩個(gè)參數(shù)分別和svg的width height對(duì)應(yīng)
e脐区、如圖是svg 200*300集乔，viewbox="0 0 200 300"的效果，和沒(méi)有添加viewbox一樣
f坡椒、改變svg100*300， 不變viewbox="0 0 200 300"尤溜，
可以看到圖形隨著畫布的縮小而縮小了倔叼，而且是同比例的。
這是視口不變宫莱，畫布改變大小的情況丈攒；
g、不變svg200*300授霸， 改變viewbox="0 0 100 150"巡验，
這是視口改變，畫布不變的情況碘耳；
黑色表示沒(méi)有改變比例显设，綠色表示改變比例后的圖形，但是由于svg畫布的大小限制辛辨，只能顯示粉色部分捕捂。
h、總結(jié)：
視口不變斗搞，畫布改變指攒，圖形隨著畫布等比例變化；
視口改變僻焚，畫布不變允悦，圖形隨著視口等比例變化；
如果不設(shè)置視口虑啤，畫布改變隙弛，圖形不變
栗子：
下面是我自己新建的一個(gè)html文件，使用svg狞山，同時(shí)使用style標(biāo)出svg容器驶鹉，這樣就能夠知道svg容器在哪里有多大了；
當(dāng)然铣墨，你也可以直接新建一個(gè)svg文件
基本元素
一室埋、矩形 <rect>
width、height：矩形的寬、高
x姚淆、y：矩形的坐標(biāo)位置孕蝉，以左上角為定位，
（坐標(biāo)系的圓點(diǎn)在svg的左上角腌逢，相當(dāng)于整個(gè)svg在直角坐標(biāo)系的第四象限）
fill：填充顏色
fill-opacity： 填充顏色透明度
stroke：邊框顏色（畫筆顏色）
stroke-width：邊框?qū)挾?/p>
stroke-opacity：邊框透明度
rx降淮、ry：圓角x、y
給繪制的圖形添加css搏讶，有三種方式：
Way1：在標(biāo)簽中使用style屬性
Way2：在標(biāo)簽中使用css樣式屬性
Way3：添加css文件佳鳖，通過(guò)class類添加樣式屬性
二、圓形 <circle>
cx媒惕、cy：圓心的坐標(biāo)位置
r：半徑
三系吩、橢圓 <ellipse>
cx、cy：圓心坐標(biāo)位置
rx妒蔚、ry：半徑x穿挨、半徑y(tǒng)
四、線 <line>
? ?直線：
x1肴盏、y1：直線起點(diǎn)坐標(biāo)位置
x2科盛、y2：直線終點(diǎn)坐標(biāo)位置
????虛線：
stroke-dasharray：至少有兩個(gè)參數(shù)，用空格或者逗號(hào)隔開菜皂；分別表示劃線長(zhǎng)度和空格長(zhǎng)度贞绵，如果有多個(gè)參數(shù)就表示畫線 空格 畫線 空格 ……
stroke-dashoffset：偏移，正數(shù)起點(diǎn)往左移恍飘，負(fù)數(shù)起點(diǎn)往右移
做導(dǎo)航菜單鼠標(biāo)懸浮的動(dòng)畫效果用這個(gè)虛線的可以做出很多很炫的效果但壮；
做進(jìn)度條的動(dòng)畫效果也是蠻不錯(cuò)的
主要就是stroke-dasharray、stroke-dashoffset這倆參數(shù)值的變化常侣，會(huì)是畫線和空格的長(zhǎng)度蜡饵，位置產(chǎn)生變化，從而看起來(lái)非常的帥氣胳施，哈哈
五溯祸、折線 <polyline>
points：折線每個(gè)點(diǎn)的坐標(biāo)位置，用逗號(hào)隔開每個(gè)點(diǎn)
六舞肆、多邊形 <polygon>
points：折線每個(gè)點(diǎn)的坐標(biāo)位置焦辅，用逗號(hào)隔開每個(gè)點(diǎn)
圖形是封閉的，最后一個(gè)點(diǎn)椿胯，自動(dòng)連接第一個(gè)點(diǎn)
七筷登、其他
1.文本
<text x="10" y="20" fill="pink">
? ? ?這是我的文字
?</text>
注意：文本的xy起點(diǎn)是以文字左下角為準(zhǔn)
