SVG學(xué)習(xí)筆記
簡(jiǎn)介
SVG使用XML來(lái)描述二維圖形和繪圖程序的語(yǔ)言。
SVG形狀
SVG在HTML頁(yè)面
SVG 文件可通過(guò)以下標(biāo)簽嵌入 HTML 文檔：embed、object 或者 iframe。
例如：
<iframe src="circle1.svg"></iframe>
也可以直接在HTML中嵌入SVG代碼：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
或者是鏈接到一個(gè)SVG文件：
<a href="circle1.svg">View SVG file</a>
SVG矩形-rect
例如：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20"width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;
stroke-opacity:0.9;opacity:0.5"/>
</svg>
-
x和y屬性分別定義矩形距離左側(cè)和頂端的位置 -
rx和ry用于使矩形產(chǎn)生圓角 -
width和height分別用于定義矩形寬度和高度 -
style屬性用于定義CSS樣式 -
fill屬性定義填充顏色 -
stroke-width定義邊框的寬度 -
stroke屬性定義邊框的顏色 -
fill-opacity定義背景顏色的透明度 -
stroke-opacity定義邊框的透明度 -
opacity定義整個(gè)圖像的透明度
SVG圓形-circle
例如：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
-
cx和cy屬性定義圓點(diǎn)的圓心坐標(biāo)。如果省略cx和cy，圓的中心會(huì)被設(shè)置為(0, 0) -
r屬性用于定義半徑大小 -
fill屬性定義背景顏色
SVG橢圓形-ellipse
例如：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
-
rx屬性定義水平半徑 -
ry屬性定義垂直半徑
SVG直線-line
例如：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
-
x1與y1定義起始點(diǎn) -
x2與y2定義終點(diǎn)
SVG多邊形-polygon
例如：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
-
points屬性定義多邊形每個(gè)角的坐標(biāo) -
style中的fill-rule屬性用于定義使用哪一種算法去判別某個(gè)點(diǎn)是否在圖形內(nèi)部，共有三個(gè)值（nonzero | evenodd | inherit）
SVG曲線-polyline
例如：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
- 注意：
fill屬性需要設(shè)為none，否則曲線外有部分將被填充顏色
SVG路徑-path
path屬性支持的指令：
- M =
moveto(M X,Y)：將畫(huà)筆移動(dòng)到指定的坐標(biāo)位置 - L =
lineto(L X,Y)：畫(huà)直線到指定的坐標(biāo)位置 - H =
horizontal lineto(H X)：畫(huà)水平線到指定的X坐標(biāo)位置 - V =
vertical lineto(V Y)：畫(huà)垂直線到指定的Y坐標(biāo)位置 - C =
curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次貝賽曲線 - S =
smooth curveto(S X2,Y2,ENDX,ENDY) - Q =
quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次貝賽曲線 - T =
smooth quadratic Belzier curveto(T ENDX,ENDY)：映射 - A =
elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線 - Z =
closepath()：關(guān)閉路徑
例如：
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
- 其中
d屬性實(shí)際上是一個(gè)字符串，包含了一系列路徑描述 - 注意：以上所有命令均允許小寫(xiě)字母。大寫(xiě)表示絕對(duì)定位，小寫(xiě)表示相對(duì)定位。
SVG文字-text
例如：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>
其余常用屬性
-
defs：此元素用于預(yù)定義一個(gè)元素使其能夠在SVG圖像中重復(fù)使用 -
g：該元素用于包圍組織一些SVG元素，使得可以整體一起操作 - 注意：在
defs元素中定義的圖形不會(huì)直接顯示在SVG圖像上。要顯示它們需要使用use元素來(lái)引入它們 -
symbol：該元素兼具g的分組功能和defs初始不可見(jiàn)的特性。symbol能夠創(chuàng)建自己的視窗，所以能夠應(yīng)用viewBox（viewBox="x, y, width, height"// x:左上角橫坐標(biāo)，y:左上角縱坐標(biāo)，width:寬度，height:高度）和preserveAspectRatio屬性
此篇筆記是關(guān)于SVG的形狀初步學(xué)習(xí)，如果之后有需要，我會(huì)繼續(xù)了解然后完善這篇筆記。
