前幾天，嘗試用html+css制作圖像的痛苦歷歷在目，絞盡腦汁的去實(shí)現(xiàn)各種曲線，不斷的調(diào)試逼近，才出現(xiàn)一個(gè)勉強(qiáng)一看的圖形。然后震驚的發(fā)現(xiàn)，原來這些圖像用svg做可以非常容易的解決，所以今天決定對(duì)svg的學(xué)習(xí)做一個(gè)初略的記錄。
基本信息
一個(gè)簡(jiǎn)單的SVG文檔由<svg>根元素和基本的形狀元素構(gòu)成。另外還有一個(gè)g元素，它用來把若干個(gè)基本形狀編成一個(gè)組。SVG可以成為任何復(fù)雜的組合圖形。SVG支持漸變、旋轉(zhuǎn)、濾鏡效果、JavaScript接口等等功能，但都需要在一個(gè)定義好的圖形區(qū)域內(nèi)實(shí)現(xiàn)。
- SVG的元素和屬性必須按標(biāo)準(zhǔn)格式書寫，因?yàn)閄ML是區(qū)分大小寫的（這一點(diǎn)和html不同）
- SVG里的屬性值必須用引號(hào)引起來，就算是數(shù)值也必須這樣做。
網(wǎng)格
svg的坐標(biāo)系統(tǒng)與我們平常的繪圖坐標(biāo)方式是相反的。
這種坐標(biāo)系統(tǒng)是：以頁面的左上角為（0,0）坐標(biāo)點(diǎn)，坐標(biāo)以像素為單位，x軸正方向是向右，y軸正方向是向下。
基本圖形
- 矩形
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
x 矩形左上角的x位置
y 矩形左上角的y位置
width 矩形的寬度
height 矩形的高度
rx 圓角的x方位的半徑
ry 圓角的y方位的半徑
- 圓形
<circle cx="25" cy="75" r="20"/>
r 圓的半徑 （橢圓：cx 橢圓中心的x位置
cy 橢圓中心的y位置 ）
cx 圓心的x位置
cy 圓心的y位置
- 折線
<polyline points="60 110, 65 120, 70 115"/>
points點(diǎn)集數(shù)列。每個(gè)數(shù)字用空白、逗號(hào)、終止命令符或者換行符分隔開。每個(gè)點(diǎn)必須包含2個(gè)數(shù)字，一個(gè)是x坐標(biāo)，一個(gè)是y坐標(biāo)。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。
- 多邊形
<polygon points="50 160, 55 180, 70 180"/>
polygon和折線很像。不同的是，polygon的路徑在最后一個(gè)點(diǎn)處自動(dòng)回到第一個(gè)點(diǎn)。
- 路徑
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
svg中最常見的形狀，也是最強(qiáng)大的功能，可以實(shí)現(xiàn)所有的基本形狀。
路徑
- 直線命令
M x y (or m dx dy) 對(duì)畫筆的絕對(duì)定位
L x y (or l dx dy) 在當(dāng)前位置和新位置之間畫一條線段
H x (or h dx) 繪制平行線
V y (or v dy) 繪制垂直線
Z (or z) 從當(dāng)前點(diǎn)畫一條直線到路徑的起點(diǎn)
- 曲線命令
貝塞爾曲線
我們從稍微復(fù)雜一點(diǎn)的三次貝塞爾曲線C入手，三次貝塞爾曲線需要定義一個(gè)點(diǎn)和兩個(gè)控制點(diǎn)，所以用C命令創(chuàng)建三次貝塞爾曲線，需要設(shè)置三組坐標(biāo)參數(shù)：
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
另一種可用的貝塞爾曲線是二次貝塞爾曲線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)
弧形
基本上，弧形可以視為圓形或橢圓形的一部分。假設(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
...........................................................
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í)針畫弧。
上色
大多數(shù)基本的涂色可以通過在元素上設(shè)置兩個(gè)屬性來搞定：fill屬性和stroke屬性。
fill 屬性設(shè)置對(duì)象內(nèi)部的顏色
stroke屬性設(shè)置繪制對(duì)象的線條的顏色。
此外，在SVG中你可以分別定義填充色和邊框色的不透明度。
fill-opacity屬性 控制填充色的不透明度
stroke-opacity屬性 控制描邊的不透明度。
text
在一個(gè)SVG文檔中，<text>元素內(nèi)部可以放任何的文字。
<text x="10" y="10">Hello World!</text>
