SVG是什麼 SVG是什麼 SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義WEB上使用的矢量圖 SVG 使用 XML 格式定義圖形 SVG 圖像在縮放時其圖形質量不會有所損失 SVG 是W3C推薦的 SVG 與諸如 DOM和 XSL 之類的W3C標準 ...
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 表示虛線的起始偏移
