三、SVG颜色、笔刷

一、颜色

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