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中应用颜色

<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标签来定的

<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表示焦点位置

<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，内部元素的单位都是基于绘制图形的包围盒的百分比

<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>

根据慕课网课程整理