SVG開篇
SVG是可縮放的矢量圖,在計算機(jī)中有兩種圖形,一種是位圖,一種是矢量圖
-
位圖
傳統(tǒng)的jpg / png / gif圖都是位圖
位圖是由一個個很小的顏色小方塊組合在一起的圖片,一個小方塊代表1px
優(yōu)點:色彩豐富逼真
缺點:放大后會失真,體積大
-
矢量圖
矢量圖是用XML格式定義,通過[路徑] 和 [填充顏色]來描述渲染的圖片
優(yōu)點:放大后不會失真,體積很小
缺點:不易制作顏色變化太多的圖像
-
注意點
和canvas一樣,svg也有默認(rèn)的寬高,并且默認(rèn)的寬高和canvas都是一樣的,默認(rèn)的寬度是300px,默認(rèn)的高度是150px
和canvas不同的是,svg可以通過css設(shè)置寬高也可以通過行內(nèi)屬性設(shè)置寬高
SVG四種使用方法
內(nèi)嵌到HTML中(直接在HTML中繪制)
-
通過瀏覽器直接打開SVG文件
- 如果需要將svg保存到單獨的一個文件中,并且需要通過瀏覽器直接打開,那么久必須給svg添加一個屬性 xmlns = "http://www.w3.org/2000/svg";
在HTML的img標(biāo)簽中引用
作為CSS背景使用
SVG繪制矩形
-
繪制矩形:rect
x/y: 指定繪制的位置
width/height: 指定繪制的大小
fill: 修改填充的顏色
stroke: 修改描邊的顏色
stroke-width: 修改描邊的寬度
rx/ry: 設(shè)置圓角的半徑
SVG繪制圓和橢圓
-
繪制圓:circle
cx/xy: 圓繪制的位置
r: 圓的半徑
-
繪制橢圓:ellipse
cx/cy: 橢圓繪制的位置(圓心的位置)
rx: 水平方向的半徑
ry: 垂直方向的半徑
SVG繪制直線和折線
-
繪制直線:line
x1/y1: 設(shè)置起點
x2/y2: 設(shè)置終點
-
繪制折線:polyline
- points: 設(shè)置所有的點,兩兩一對
-
繪制多邊形:polygon
- polygon和polyline差不多,只不過會自動關(guān)閉路徑
SVG常用屬性
fill: 修改填充顏色
fill-opacity: 0~1設(shè)置填充顏色的透明度
stroke: 修改描邊顏色
stroke-width: 修改描邊寬度
stroke-opacity: 0~1 設(shè)置描邊透明度
stroke-linecap: butt/square/round 設(shè)置線段兩端帽子
stroke-dasharray: 設(shè)置虛線
stroke-dashoffset: 設(shè)置虛線偏移位
stroke-linejoin: miter/bevel/round 設(shè)置折線轉(zhuǎn)角樣式
注意點:在SVG中這些所有的常用屬性都是可以在CSS中使用的
SVG繪制路徑
-
SVG路徑(path)是一個比較牛X的東西,可以繪制任意圖形,只不過比較復(fù)雜而已
M = moveto 起點
L = lineto 其他點
H = horizontal lineto 和上一個點Y相等
V = vertical lineto 和上一個點X相等
Z = closepath 關(guān)閉當(dāng)前路徑
-
路徑指令注意點
大寫字母是絕對定位,小寫字母是相對定位
絕對定位: 寫什么位置就是什么位置
相對定位: 相對上一次的位置,在上一次位置基礎(chǔ)上調(diào)整
SVG繪制圓弧
-
A(rx,ry,xr,laf,sf,x,y) 從當(dāng)前位置繪制弧線到指定位置
rx(radius-x):弧線X半徑
ry(radius-y):弧線Y半徑
xr(xAxis-rotation):弧線所在橢圓旋轉(zhuǎn)角度
laf(large-arc-flag):是否選擇弧較長的那一段
sf(sweep-flag):是否順時針繪制
x,y:弧的終點位置
SVG繪制貝塞爾曲線
-
Q(x1,y1,x,y) 從當(dāng)前位置繪制二次貝賽爾曲線到指定位置
x1/y1: 控制點位置
x/y: 終點位置
-
C(x1,y1,x2,y2,x,y) 從當(dāng)前位置繪制三次貝賽爾曲線到指定位置
x1/y1: 控制點1位置
x2/y2: 控制點2位置
x/y: 終點位置
SVG繪制文本
和canvas一樣,是以左下角作為參考
和canvas一樣,默認(rèn)是文字的基線和指定的位置對齊
-
繪制文本:text
x/y: 指定繪制位置
style: 設(shè)置文字樣式
text-anchor: 指定文字水平方向?qū)R方式
dominant-baseline: 指定文字垂直方向?qū)R方式
dx/dy: 相對前一個文字位置,未設(shè)置位置的文字會繼承前一個文字
繪制多行文本: <text><tspan>文本內(nèi)容</tspan></text>
-
繪制路徑文本:textPath
定義一個路徑
告訴文本需要按照哪個路徑來繪制(xlink:href)
注意點:如果是繪制路徑文本,那么超出路徑范圍的內(nèi)容不會被繪制出來
SVG繪制超鏈接
-
可以給任意內(nèi)容添加超鏈接,只需要用超鏈接包裹起來即可
xlink:href: 指定鏈接地址
xlink:title: 指定鏈接提示
target: 指定打開方式
SVG繪制圖片
通過image標(biāo)簽
默認(rèn)情況下我們指定的圖片多大就繪制多大
當(dāng)設(shè)置的尺寸和圖片實際尺寸不一樣時,高度填滿,寬度等比拉伸
SVG結(jié)構(gòu)標(biāo)簽
-
g結(jié)構(gòu)元素
g是group的縮寫,可以將多個元素放到一個g標(biāo)記中,這樣就組成了一個組
以便操作統(tǒng)一,比如旋轉(zhuǎn),縮放或者添加相關(guān)樣式等等
g標(biāo)記設(shè)置的所有樣式都會應(yīng)用到這一組所有的樣式中
-
use
g結(jié)構(gòu)元素封裝的圖形還可以通過<use>元素進(jìn)行復(fù)制使用
<use xlink:href="">
-
defs
- g封裝的元素默認(rèn)是可見的,如果僅僅是需要定義一組模板,將來需要用到時候才顯示,那么就可以使用defs
-
symbol
symbol兼具<g>的分組功能和<defs>初識不可見的特性
symbol能夠創(chuàng)建自己的視窗,所以能夠應(yīng)用viewBox和preserveAspecRatio屬性
SVG裁剪和蒙版
-
clipPath
- 只有路徑范圍內(nèi)的內(nèi)容會被顯示,路徑范圍以外的內(nèi)容不會被顯示
-
mask
mak和clipPath差不多
裁切路徑是可見與不可見的突變
蒙版則是可見與不可見的漸變
注意點: 在指定裁剪和蒙版的時候需要提供過url(#id)來指定
SVG漸變色
-
和Canvas一樣,在SVG中也可以生成漸變顏色
<linearGradient></linearGradient> 線性漸變
<radialGradient></radialGradient> 徑向漸變
-
漸變屬性
x1/y1: 漸變范圍開始位置
x2/y2: 漸變范圍結(jié)束位置
默認(rèn)情況下x1/y1/x2/y2是當(dāng)前元素的百分比,可以通過gradientUnits修改
gradientUnits = "objectBoundingBox"
gradientUnits = "userSpaceOnUse"
注意點: 使用漸變顏色需要通過url(#id)來使用
SVG畫筆
在SVG中除了可以使用純色和漸變色作為填充色以外,還可以使用自定義圖形作為填充
-
Pattern屬性
width/height默認(rèn)情況下也是百分比
可以通過gradientUnits修改
patternUnits="objectBoundingBox"
patternUnits="userSpaceOnUse"
viewBox
ViewBox就是可視區(qū)域,用戶能看到的區(qū)域
默認(rèn)情況下,可視區(qū)域的大小和內(nèi)容區(qū)域大小是一致的,但是我們也可以手動修改可視區(qū)域的大小
-
ViewBox屬性格式
viewBox="x y width height"
x: 修改可視區(qū)域x方向位置
y: 修改可視區(qū)域y方向位置
width/height: 修改可視區(qū)域尺寸,近大遠(yuǎn)小
默認(rèn)情況下如果viewBox的尺寸是等比縮放的,那么調(diào)整后viewBox區(qū)域的xy和內(nèi)容區(qū)域的xy對齊
如果viewBox的尺寸不是等比縮放的,那么系統(tǒng)就會調(diào)整viewBox的位置,我們設(shè)置的x/y會失效
-
如果需要viewBox的xy和內(nèi)容區(qū)域的xy繼續(xù)保持位置,那么就需要使用preserveAspectRatio屬性來設(shè)置對齊方式
xMin viewport和viewBox左邊對齊
xMid viewport和viewBox x軸中心對齊
xMinx viewport和viewBox右邊對齊
YMin viewport和viewBox上邊緣對齊,注意Y是大寫
YMid viewport和viewBox y軸中心點對齊,注意Y是大寫
YMax viewport和viewBox下邊緣對齊,注意Y是大寫
SVG動畫
-
在SVG中提供了三種常用動畫標(biāo)記
<animate> 基礎(chǔ)動畫
<animateTransform> 形變動畫
<animateMotion> 路徑動畫
-
SVG動畫使用方式
創(chuàng)建動畫,告訴動畫標(biāo)記哪個元素需要執(zhí)行動畫
創(chuàng)建元素,在元素中說明需要執(zhí)行什么動畫
-
SVG動畫屬性
attributeType: CSS/XML 規(guī)定屬性值的名稱空間
attributeName: 規(guī)定元素的哪個屬性會產(chǎn)生動畫效果
from/to: 從哪到哪
dur: 動畫時長
fill: 動畫結(jié)束之后的狀態(tài) 保持freeze結(jié)束狀態(tài)/remove恢復(fù)初始狀態(tài)
-
SVG動畫常用屬性
repeatCount: 規(guī)定動畫重復(fù)的次數(shù)
repeatDur: 規(guī)定動畫重復(fù)總時長
-
begin: 規(guī)定動畫開始的時間
begin="1s"
begin="click"
begin="click + 1s"
-
restart: 規(guī)定元素開始動畫之后,是否可以被重新開始執(zhí)行
always: 動畫可以再任何時候被重置,這是默認(rèn)值
whenNotActive: 只有在動畫沒有被激活的時候才能被重置,例如在動畫結(jié)束之后
never: 在整個SVG執(zhí)行的過程中,元素動畫不能被重置
calcMode: 運動速度
keyTimes: 劃分動畫時間片段,取值0~1
value:劃分對應(yīng)取值片段的值
- 形變動畫中固定的屬性
- attributeName: transform
- type: translate/rotate/scale
SVG腳本編程
-
創(chuàng)建SVG時必須指定命名空間
- const SVG_NS = "http://www.w3.org/2000/svg"
-
使用xlink屬性也必須指定命名空間
- const XLINK_NS = "http://www.w3.org/1999/xlink"
-
腳本編程推薦自學(xué)svg框架
