svg渐变

linearGradient 线性渐变
radialGradient 放射渐变

颜色

• rgb
• rgba
• hsl ```html

![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618534687668-e7309d78-3577-4649-b7e4-def04be56ab2.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=174&id=uc2324c80&margin=%5Bobject%20Object%5D&originHeight=348&originWidth=984&originalType=binary&ratio=1&rotation=0&showTitle=false&size=210237&status=done&style=none&taskId=u8641b7a5-a177-45c9-a349-1602fb1d8cb&title=&width=492)<br />![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618534703752-f43468e2-22ef-452f-ab45-171873eb7efd.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=84&id=u006da100&margin=%5Bobject%20Object%5D&originHeight=168&originWidth=1008&originalType=binary&ratio=1&rotation=0&showTitle=false&size=66723&status=done&style=none&taskId=u952feeef-9f61-4160-b433-3738529547f&title=&width=504)
<a name="YW3Ae"></a>
### hsl
hsl在线配色 [https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF](https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF)<br />![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618534804711-502fbeaa-40ca-4c5d-910e-fa9446097ae5.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=94&id=voXmq&margin=%5Bobject%20Object%5D&originHeight=188&originWidth=1076&originalType=binary&ratio=1&rotation=0&showTitle=false&size=75685&status=done&style=none&taskId=u949467dc-4f39-498c-af09-80796be2534&title=&width=538)<br />![](https://cdn.nlark.com/yuque/0/2021/jpeg/112859/1618548194517-3fe03192-c395-4022-b4cd-ae7d4b6031fe.jpeg#clientId=ud3fecc70-4aef-4&crop=0&crop=0&crop=1&crop=1&from=drop&id=u9b293837&margin=%5Bobject%20Object%5D&originHeight=558&originWidth=1036&originalType=binary&ratio=1&rotation=0&showTitle=false&size=128870&status=done&style=none&taskId=u24e87770-c8f8-427a-8b02-76cc105a62a&title=)
<a name="N7TCp"></a>
### 透明度
![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618534881300-5cd127a8-d12a-420f-9690-429310b3cac1.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=221&id=u54c1c284&margin=%5Bobject%20Object%5D&originHeight=442&originWidth=894&originalType=binary&ratio=1&rotation=0&showTitle=false&size=96629&status=done&style=none&taskId=uef1d8278-f510-485e-a9ad-66d9d5836f0&title=&width=447)
<a name="ewrnj"></a>
## 渐变
- 线性渐变
- 径向渐变
<a name="tedr0"></a>
### 线性渐变
linearGradient<br />![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618535039146-c236e657-3da7-4176-9006-045dbee23853.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=173&id=u258f4ecb&margin=%5Bobject%20Object%5D&originHeight=346&originWidth=950&originalType=binary&ratio=1&rotation=0&showTitle=false&size=161768&status=done&style=none&taskId=u621f4aaf-09c2-41c0-aafb-cb198e0b7d8&title=&width=475)<br />![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618535893153-fbcf9534-7a82-4112-af97-1fd396d46073.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=68&id=u18817e06&margin=%5Bobject%20Object%5D&originHeight=136&originWidth=184&originalType=binary&ratio=1&rotation=0&showTitle=false&size=39974&status=done&style=none&taskId=u4b9acb62-8fd8-404c-b35d-a664d51e78e&title=&width=92)<br />![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618535756615-91b2fb1b-ea8e-4d66-aae7-753f77ef10f9.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=173&id=uda15e0b8&margin=%5Bobject%20Object%5D&originHeight=346&originWidth=1116&originalType=binary&ratio=1&rotation=0&showTitle=false&size=375334&status=done&style=none&taskId=u7bbcfec9-0ffb-4ace-952f-a8b226c23f6&title=&width=558)
![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618535858037-9d1d6769-f519-4032-a4cf-5ab8797fa03c.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=68&id=u2b709fe4&margin=%5Bobject%20Object%5D&originHeight=136&originWidth=184&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13938&status=done&style=none&taskId=u7e388754-a4a5-4cbc-a275-de691747e06&title=&width=92)<br />![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618535826326-0bd33338-de1a-4740-b389-b0a4746263b6.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=169&id=uab6f42ef&margin=%5Bobject%20Object%5D&originHeight=338&originWidth=1102&originalType=binary&ratio=1&rotation=0&showTitle=false&size=382745&status=done&style=none&taskId=u0e390057-4ce4-45a1-8787-eaa624fa8be&title=&width=551)
<a name="La2oe"></a>
### 径向渐变
有中线点，向四周扩散<br />svg 放射性渐变<br />![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618535958989-ac4d6c01-4b47-4237-bdda-d6591e93c0af.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=145&id=uced23a57&margin=%5Bobject%20Object%5D&originHeight=290&originWidth=1004&originalType=binary&ratio=1&rotation=0&showTitle=false&size=158698&status=done&style=none&taskId=uee2e4c18-744b-494b-90fc-d6ec5556c68&title=&width=502)<br />![](https://cdn.nlark.com/yuque/0/2021/png/112859/1618535985152-220f88b6-c545-4416-ae3f-667a88c8c7fc.png#clientId=u1766cba9-68f6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=183&id=uad370e4a&margin=%5Bobject%20Object%5D&originHeight=366&originWidth=1108&originalType=binary&ratio=1&rotation=0&showTitle=false&size=386686&status=done&style=none&taskId=u5144276a-20f1-4b42-bf7b-60c932ac319&title=&width=554)
<a name="E7hsy"></a>
## 笔刷
<pattern><br />绘制纹理
- patternUnits
- patternContentUnits
```html
<pattern
    patternUnits="objectBoundingBox"
         patternContentUnits="objectBoundingBox"
>
</pattern>