SVG 形狀
SVG 有一些預(yù)定義的形狀元素幔烛，可被開發(fā)者使用和操作：
- 矩形 <rect>
- 圓形 <circle>
- 橢圓 <ellipse>
- 線 <line>
- 折線 <polyline>
- 多邊形 <polygon>
- 路徑 <path>
矩形
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
-
rect元素的width和height屬性可定義矩形的高度和寬度 -
style屬性用來(lái)定義 CSS 屬性 - CSS 的
fill屬性定義矩形的填充顏色（rgb值、顏色名或者十六進(jìn)制值） - CSS 的
stroke-width屬性定義矩形邊框的寬度 - CSS 的
stroke屬性定義矩形邊框的顏色
<rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
-
x屬性定義矩形的左側(cè)位置（例如客们，x="0"定義矩形到瀏覽器窗口左側(cè)的距離是0px） -
y屬性定義矩形的頂端位置（例如，y="0"定義矩形到瀏覽器窗口頂端的距離是0px） - CSS 的
fill-opacity屬性定義填充顏色透明度（合法的范圍是：0 - 1） - CSS 的
stroke-opacity屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1）
<rect x="20" y="20" width="250" height="250"style="fill:blue;stroke:pink;stroke-width:5;opacity:0.9"/>
- CSS 的
opacity屬性定義整個(gè)元素的透明值（合法的范圍是：0 - 1）
<rect x="20" y="20" rx="20" ry="20" width="250"height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
-
rx和ry屬性可使矩形產(chǎn)生圓角江滨。
橢圓
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
-
cx屬性定義圓點(diǎn)的x坐標(biāo) -
cy屬性定義圓點(diǎn)的y坐標(biāo) -
rx屬性定義水平半徑 -
ry屬性定義垂直半徑
線
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
-
x1屬性在x軸定義線條的開始 -
y1屬性在y軸定義線條的開始 -
x2屬性在x軸定義線條的結(jié)束 -
y2屬性在y軸定義線條的結(jié)束
多邊形
<polygon> 標(biāo)簽用來(lái)創(chuàng)建含有不少于三個(gè)邊的圖形。
<polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
-
points屬性定義多邊形每個(gè)角的x和y坐標(biāo)
折線
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
路徑
SVG中的路徑概念可以是一個(gè)形狀的外框聚假，也可以是用來(lái)裁剪的線條碌廓，這個(gè)線條可以被描邊敬锐，封閉時(shí)還可以被填充背传。
路徑和折線或多邊形不同之處在于，路徑可以是直線也可以曲線台夺，因此使用路徑可以構(gòu)造更為復(fù)雜的幾何圖形径玖。
path 標(biāo)簽用來(lái)創(chuàng)建一條路徑，路徑元素的基本屬性是路徑數(shù)據(jù)颤介，用 d='path data'語(yǔ)法來(lái)定義梳星。路徑數(shù)據(jù)中包含了點(diǎn)集和繪制指令。
點(diǎn)集就是一組“x y”格式的坐標(biāo)滚朵，以空格隔開冤灾，以指令字母開頭。指令可以有如下幾種：
M = moveto移動(dòng)到某坐標(biāo)位置
L = lineto直線連線
H = horizontal lineto水平連線
V = vertical lineto垂直連線
C = curveto 曲線連接
S = smooth curveto平滑曲線連接
Q = quadratic Belzier curve二次貝塞爾曲線連接
T = smooth quadratic Belzier curveto平滑二次貝塞爾曲線連接
A = elliptical Arc 橢圓弧連接
Z = closepath關(guān)閉路徑
以上所有命令均允許小寫字母辕近。大寫表示絕對(duì)定位韵吨，小寫表示相對(duì)定位。
<path d="M250 150 L150 350 L350 350 Z" />
定義了一條路徑移宅，它開始于位置 250 150归粉，到達(dá)位置 150 350，然后從那里開始到 350 350漏峰，最后在250 150 關(guān)閉路徑糠悼。
