SVG 入門

 孫辰威
 MIS Engineer (高級水電工)
 Chenwei791129 [at] livemail.tw
 http://resume.chenwei.idv.tw/

 SVG（Scalable Vector Graphics）為一種用 XML 描述二維向量圖形的標記語
言，由 W3C 所制定的開放標準 (since 2001)
 可用來取代 Flash(仿間有 flash to SVG 的工具)
作者範例
GitHub@TomByrne/Flash2Svgb
 支援 DOM 操作、CSS 樣式
 支援搜尋引擎檢索
 行動裝置支援
 MIME: image/svg+xml

9+ All 3+ 4+ 10.1+3.2+
4.4+ 3.2+
資料來源：https://caniuse.com/#search=svg

10+ All 3+ 8+ 10.1+6+
4.4+ 6.1+

9+! All! 3.5+ 4+! 10.1+4+!
4.4+! 3.2+!

SVG CANVAS
產生方式 XML JavaScript
強調效能物件面積大物件數量多
特性向量成像、CSS、DOM操
作
像素成像
格式可作為獨立檔案瀏覽器專用
搜尋引擎檢索支援不支援

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
</svg>
<svg>
</svg>
 瀏覽器 HTML 標籤中使用
 存成獨立檔案 (*.svg)

polyline {
stroke: black; /* 定義邊框顏色 */
stroke-width:2; /* 定義邊框寬度 */
fill: none; /* 定義填充色 */
}
參數說明：
points: 各點座標<svg>
<polyline points="10,20 60,60 110,0 160,80" />
</svg>

circle {
}
參數說明：
cx: 圓心 x 座標
cy:圓心 y 座標
r: 半徑
<svg>
<circle cx="50" cy="50" r="40" />
</svg>

ellipse {
}
參數說明：
cx: 圓心 x 座標
cy: 圓心 y 座標
rx: 橫軸半徑
ry: 縱軸半徑
<svg>
<ellipse cx="80" cy="60" rx="60" ry="40" />
</svg>

rect {
}
參數說明：
x: 起點 X 座標
y: 起點Y 座標
width: 寬
height: 高
[rx: 圓角 X 半徑]*
[ry: 圓角 Y 半徑]*
*非必要
<svg>
<rect x="0" y="0" rx="10" ry="10" width="80" height="80" />
</svg>

polygon {
}
參數說明：
points: 各點座標
<svg>
<polygon points="100,56 62,107 37,49"/>
</svg>

指令參數 d 說明
M x y 起點 x y 座標
L x y 畫直線到指定的 x y 座標
H x 畫水平直線到指定的 x 座標
V y 畫垂直直線到指定的 y 座標
C x1 y1,x2 y2,x y 從目前點的座標畫條貝茲曲線到指定點的 x y 座標：其中 x1 y1 為第一控制
點(目前點)及 x2 y2 為第二(x y)控制點
S x2 y2 x y 畫反射的貝茲曲線到指定點的 x, y 座標：其中 x2, y2 為反射的控制點
Q x1 y1 x y 畫共用控制點的貝茲曲線到指定點的 x y 座標：其中 x1 y1 為控制點
T x y 畫共用控制點的二次貝茲曲線到指定點的 x y 座標：以前一個座標為反射控制
點
A rx ry x-axis-
rotation large-arc-
flag sweep-flag x y
從目前點畫個橢圓形到指定點的 x y 座標：其中 rx ry 為橢圓形的 x 軸及 y
軸的半徑，x-axis-rotation 是弧線與 x 軸的旋轉角度，large-arc-flag 則
設定 1 為大角度弧線、0 為小角度弧線，sweep-flag 設定 1 為順時針方向、
0 為逆時針方向
Z 將最後一點與起點用直線連起來

M10 10
L50 50
H100"
/>
</svg>

M10 10
L50 50
H100
V80"
/>
</svg>

M10 10
L50 50
H100
V80
C120 50,130 50,150 80"
/>
</svg>

M10 10
L50 50
H100
V80
C120 50,130 50,150 80
S180 110,200 80"
/>
</svg>

(10,10)
(50,50)
(100,50)
(100,80)
(150,80)
(120,50)(130,50)
(200,80)
(170,110)(180,110)

M10 10
L50 50
H100
V80
C120 50,130 50,150 80
S180 110,200 80
Z"
/>
</svg>

變形方法說明
translate(x[,y]) 位移 x y 的距離
scale(x[,y]) x: 水平縮放 x 倍；y: 垂直縮放 y 倍，如果只有 x，則會等比例放
大。(這邊要注意會連同座標一起放大)
rotate(a[,x,y]) a: 旋轉角度，如果>0為順時針，反之為逆時針旋轉，這邊要注意
如果沒設定 x,y ，則旋轉中心點為(0,0)，而不是圖形中心
skewX(a)、skewY(a) 水平/垂直傾斜 a 的角度
Matrix(a,b,c,d,e,f) 矩陣變形，上述所有變形都可以轉成矩陣

可用屬性說明
x、y 定義文字絕對位置，可定義多個值套用到個別文字
dy、dy 定義文字相對位置，可定義多個值套用到個別文字
rotate(a[,a…]) a: 旋轉角度，可定義多個值套用到個別文字
textLength 設定文字長度
lengthAdjust="spacing
|spacingAndGlyphs"
設定文字適應長度的方式，spacing 為拉寬間距、
spacingAndGlyphs為拉寬文字

 要讓文字隨著路徑移動，就要把 <path> 放進
<defs> 裡面，然後在 <text> 放入 <textPath>
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="test" d="M10 100 Q50 0,100,100 T210 100" fill="none" />
</defs>
<text>
<textPath xlink:href="#test">K.NET每周三在裕誠路星巴克都有定期小聚</textPath>
</text>
</svg>

資料來源：https://developer.mozilla.org/en-US/docs/Web/SVG

 D3.js 專注於繪製 SVG 圖表的 JS 框架
 C3.js 基於 D3.js 的簡易圖表 JS 框架
 plotly.js 另一款數據視覺化 JS 框架
 Snap.js 專注於 SVG 動畫的 JS 框架

 http://www.clker.com/inc/svgedit/svg-
editor.html
 https://developer.mozilla.org/en-
US/docs/Web/SVG

SVG 入門

Recommended

Recommended

More Related Content

Featured

Featured (20)

SVG 入門