Upload
jocelyn-hsu
View
164
Download
4
Embed Size (px)
Citation preview
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio
基本屬性介紹
參考範例: http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio
基本屬性介紹
參考範例: http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100
基本屬性介紹
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio
none
"對齊位置 尺寸"
"對齊位置 尺寸"
對齊位置
xMin / xMid / xMax
YMin / YMid / YMax
尺寸
meet / slice
參考範例: http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100
基本屬性介紹
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio
none
"對齊位置 尺寸"
路徑與圖形
<path d="…"></path> Mx y 開始處
Lx y 直線
Hx ⽔水平線
Vy 垂直線
Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
Z end & closepath
路徑與圖形
<path d="…"></path> Mx y 開始處
Lx y 直線
Hx ⽔水平線
Vy 垂直線
Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
Z end & closepath
路徑與圖形
<path d="…"></path> Mx y 開始處
Lx y 直線
Hx ⽔水平線
Vy 垂直線
Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
Z end & closepath
1
2
3
1 2 3
文字
x & y
dx & dy
textPath
參考範例:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
參考範例:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
文字
x & y
dx & dy
textPath
參考範例: http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html
圖形以外的都會被剪裁
定義 <clipPath>
設定 clip-path 屬性
截圖與遮色片
參考範例: http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html
圖形以外的都會被剪裁
定義 <clipPath>
設定 clip-path 屬性
截圖與遮色片
參考範例: http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html
灰階分佈:越黑越透明,越白越不透明
定義 <mask>
設定 mask 屬性
截圖與遮色片
參考範例: http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html
灰階分佈:越黑越透明,越白越不透明
定義 <mask>
設定 mask 屬性
截圖與遮色片
截圖與遮色片
參考範例:http://codepen.io/fixcl/pen/CHgrn?editors=1100
截圖與遮色片
細節在這:https://codepen.io/rulinshyu/details/vKJNVO/ 請不吝批評與指教 m(_ _)m
references
You, Me & SVG | codeschool
SVG 完整教學 31 天 | oxxostudio
SVG Tutorial | MDN
http://commons.oreilly.com/wiki/index.php/SVG_Essentials
https://sarasoueidan.com/tags/svg/index.html
http://tutorials.jenkov.com/svg/index.html
http://jonibologna.com/svg-viewbox-and-viewport/