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>

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

1、矩形 <rect>

　　　　

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

　　width height 定義寬高

　　rx ry 定義圓角半徑

　　 

2、圓形 <circle />

　　 　　

　　cx cy r 定義圓心座標半徑

 

3、橢圓  <ellipse />

　　 　　

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

 

4、直線 <line />

　　　　

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

 

5、折線 <polyline />

　　　　

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

 

6、多邊形 <polygon />

　　　　

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

 

7、路徑 <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  表示虛線的起始位移

 

 

SVG基礎圖形與參數