SVG筆記紀錄(一)

最近覺得前端計術還滿重要的
趁著動畫課程還沒開始
把一些基本功學一學

主要參考這篇教學
[SVG 完整教學 31 天 ](http://www.oxxostudio.tw/articles/201410/svg-tutorial.html

目前看到Day4 SVG Path 基礎篇
在這篇簡單記錄看Day1~Day4筆記

Day2 SVG Layer介紹，一般在向量軟體都是最上層圖層在上面
但換在Code裡面，SVG最下面才是最上層

SVG 研究之路 (3) - 基本形狀

矩形 rect
圓角矩形 rect rx ry
圓形circle cx cy r
橢圓ellipse cx cy rx ry
多邊形polygon points

SVG 研究之路 (4) - Path 基礎篇
這篇感覺就還滿難的，貝茲曲線不知道麼畫
看懂在寫…

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

參考來源：
SVG
https://www.w3schools.com/graphics/svg_path.asp

SVG 超硬派了解 line, polygon, polyline, path (手工繪製)
https://wcc723.github.io/d3js/2014/10/02/Ironman-30-days-03/

四個 SVG 動畫應用範例 － Firefox 十週年活動網站技術解密
http://tech.mozilla.com.tw/posts/5660/%E5%9B%9B%E5%80%8B-svg-%E5%8B%95%E7%95%AB%E6%87%89%E7%94%A8%E7%AF%84%E4%BE%8B-%EF%BC%8D-firefox-%E5%8D%81%E9%80%B1%E5%B9%B4%E6%B4%BB%E5%8B%95%E7%B6%B2%E7%AB%99%E6%8A%80%E8%A1%93%E8%A7%A3%E5%AF%86

cubic-bezier
http://cubic-bezier.com/

練習畫向量圖
http://bezier.method.ac/