SVG学习(3)

颜色、渐变和画刷

认识RGB和HSL

都是css3支持的颜色表示方法
互相转换的原理

RGB

  • 红色、绿色、蓝色三个分量
  • 表示方式:rgb(r,g,b)或#rrggbb
  • 每个分量取值范围:[0,255]
  • 优势:显示器容易解析
  • 劣势:不符合人类描述颜色的习惯

R(255,0,0) red
G(0,255,0) green
B(0,0,255) blue

rgb(214,32,0)–亮一点–>rgb(255,103,77)–淡一点–>rgb(234,118,97)–偏黄一点–>rgb(234,157,97)
使用rgb修改颜色很困难,很难把直观的修改变成三个分量的修改,这种情况建议使用HSL表示颜色

HSL

  • 三个分量分别表示颜色、饱和度和亮度
  • 格式:hsl(h,s%,l%)
  • 取值范围
    h:[0,359]
    s,l:[0,100]
  • 优势:符合人类描述颜色的习惯
    H:表示颜色在色环上的度数
    S:表示色彩饱和度,100%的时候完全饱和,此时颜色最鲜艳,0%的时候完全不饱和,此时颜色是灰度的
    L:表示亮度,即明暗程度,0%的时候是暗的,此时为黑色,100%的时候是亮的,此时为白色

hsl(9,100%,42%)–亮一点–>hsl(9,100%,65%)–淡一点–>hsl(9,77%,65%)–偏黄一点–>hsl(26,77%,65%)
对于需要调色的场景,每次只需要修改一个分量

应用示例:http://paletton.com/

透明度

  • rgba(r,g,b,a)和hsla(h,s%,l%,a)表示带透明度的颜色
  • opacity属性表示元素的透明度
  • a和opacity的取值范围:[0,1]

在SVG中应用颜色

1
2
<rect fill="rgb(255,0,0)" opacity="0.5" />
<rect stroke="hsla(0,50%,60%,0.5)" />

线性渐变和径向渐变

渐变

  • 让图形更丰满
  • 线性渐变和径向渐变

线性渐变

  • <linearGradient><stop>
  • 定义方向
  • 关键点位置及颜色
  • grandientUnits
    objectBoundingBox 默认值,是以图形的包围的盒子描述的两个端点的坐标
    userSpaceOnUse 使用世界坐标系

线性渐变使用linearGradient标签来定义,渐变的方向由两个坐标的点来决定,这两个点所用的坐标系是由grandientUnits来选择的,默认情况下是基于图形的百分比来决定的坐标系,渐变上每个位置的颜色由stop标签来定的

1
2
3
4
5
6
7
8
9
10
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#1497FC" />
<stop offset="0.5" stop-color="#A469BE" />
<stop offset="1" stop-color="#FF8C00" />
</linearGradient>
</defs>
<rect x="100" y="100" fill="url(#grad1)" width="200" height="150"></rect>
</svg>

径向渐变

  • <radialGraeient><stop>
  • 定义方向
  • 关键点位置及颜色
  • gradientUnits
  • 焦点位置
    需要多定义参数r,fx,fy
    fx,fy表示焦点位置
1
2
3
4
5
6
7
8
9
10
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad2" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5" fx="0.6" fy="0.3">
<stop offset="0" stop-color="rgb(20,151,252)" />
<stop offset="0.5" stop-color="rgb(164,105,190)" />
<stop offset="1" stop-color="rgh(255,140,0)" />
</radialGradient>
</defs>
<rect x="100" y="100" width="200" height="150" fill="url(#grad2)"></rect>
</svg>

使用笔刷

  • 绘制纹理
  • <pattern>标签
  • patternUnits和patternContentUnits
    patternUnits:objectBoundingBox 默认,基于绘制图形的包围盒的百分比
    patternUnits:userSpaceOnUse 世界坐标系
    patternContentUnits:userSpaceOnUse 默认,世界坐标系
    patternContentUnits:objectBoundingBox,内部元素的单位都是基于绘制图形的包围盒的百分比
1
2
3
4
5
6
7
8
9
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="p1" x="0" y="0" width="0.2" height="0.2">
<circle cx="10" cy="10" r="5" fill="red"></circle>
<polygen points="30 10 60 50 0 50" fill="green"></polygen>
</pattern>
</defs>
<rect x="100" y="100" width="800" height="300" fill="url(#p1)" stroke="blue"></rect>
</svg>

根据慕课网课程整理