一、颜色
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
