SVG基礎圖形與參數

　　

　　

SVG是什麼

• SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
• SVG 用來定義WEB上使用的矢量圖
• SVG 使用 XML 格式定義圖形
• SVG 圖像在縮放時其圖形質量不會有所損失
• SVG 是W3C推薦的
• SVG 與諸如 DOM和 XSL 之類的W3C標準是一個總體

SVG的優點

• SVG 可被很是多的工具讀取和修改（好比記事本）
• SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可縮放的
• SVG 圖像可在任何的分辨率下被高質量地打印
• SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）
• SVG 是開放的標準
• SVG 文件是純粹的 XML

---

以上摘抄自百度百科。

好了，進入正題。

SVG裏預約義的形狀有如下7種：

• 矩形 <rect>
• 圓形 <circle> 
• 橢圓 <ellipse>
• 直線 <line>
• 折線 <polyline>
• 多邊形 <polygon>
• 路徑 <path>

有共用的屬性，也有特有的屬性，先說特性。

一、矩形 <rect>

　　　　

　　x y 定義座標，相對於svg畫布的左邊和上邊的距離（不帶單位默認爲px，其餘屬性都是這樣子）

　　width height 定義寬高

　　rx ry 定義圓角半徑

　　 

二、圓形 <circle />

　　 　　

　　cx cy r 定義圓心座標半徑

 

三、橢圓  <ellipse />

　　 　　

　　cx cy rx ry 相比圓形，橢圓有兩個半徑（橫向半徑和縱向半徑）

 

四、直線 <line />

　　　　

　　x1 y1 x2 y2 定義起始點和結束點的座標

 

五、折線 <polyline />

　　　　

　　points屬性定義各個點的座標，其中x和y座標之間用逗號分別，多個座標之間用空格分開

 

六、多邊形 <polygon />

　　　　

　　和折線同樣，只是這個會閉合。也是使用points屬性定義各個點的座標，而後會自動閉合。

 

七、路徑 <path />

　　　　

　　路徑有點複雜，一系列的指令，因此要藉助軟件像AI導出SVG文件就行了。

　　下面的命令可用於路徑數據：

• M = moveto
• 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

　　注：以上全部命令均容許小寫字母。大寫表示絕對定位，小寫表示相對定位。

　

共有的一些屬性：

　　fill　　填充顏色

　　stroke 　　定義圖形或文本的邊線顏色

　　stroke-width 　　定義圖形或文本邊線的寬度

　　stroke-linecap　　 定義線條端點的樣子

　　　　butt 啥都沒，老樣子（平底）

　　　　round 圓的

　　　　square 方的，可是這是在原有的平頭基礎上多出了一截長方形

　　stroke-dasharray 　　建立虛線，兩個數字，分別是實線和空白的長度

　　　　也能夠這樣擴展，但數字的個數要爲偶數，表名實線空白相間

　　　　

　　stroke-linejoin　　 描邊轉角的表現方式

　　　　miter 直角

　　　　round 圓角

　　　　bevel 平角

　　stroke-dashoffset  表示虛線的起始偏移