一、顏色
IMG_2020.PNG
1.1 RGB：
可見我們想要改變一個顏色，調整RGB是比較困難的
IMG_2021.PNG
1.2 HSL:
顏色、飽和度、亮度
IMG_2022.PNG
可見變亮一點、變淡一點、偏黃一點這樣的操作，HSL會比較得心應手
IMG_2023.PNG
應用示例：http://paletton.com
這個網頁配色方案，總是那么搭，fashion！
IMG_2024.PNG
1.3 透明度
可以用：rgba、hsla
也可以直接使用 opacity，設置元素透明度
IMG_2025.PNG
例：再SVG中應用顏色
IMG_2026.PNG
二、漸變色：
2.1 線性漸變
用 linearGradient 定義
stop 為每個顏色值所處點
IMG_2028.PNG
2.2 鏡像漸變
用 radialGradient 定義，cx,cy是圓心，r是半徑
IMG_2031.PNG
效果：
IMG_2032.PNG
fx,fy：中心點的偏移位置
IMG_2035.PNG
效果：
IMG_2036.PNG
三、筆刷
3.1
用 pattern 定義筆刷
width=0.2, height=0.2，橫豎各能放五個
pattern 標簽內部定義筆刷形狀
IMG_2038.PNG
效果：
IMG_2039.PNG
3.2
patternUnits=userSpaceOnUse，筆刷尺寸是以用戶坐標系為基準
IMG_2041.PNG
效果：
IMG_2042.PNG
3.3
patternUnits控制的是：pattern的尺寸
patternContentUnits控制的是：筆刷內部的元素尺寸
IMG_2097.PNG
所以導致效果如下：
IMG_2098.PNG
3.4 都用objectBoundingBox
IMG_2099.PNG
效果如下：
IMG_2100.PNG
