SVG Chapter 3

资料来源 imooc 慕课网

SVG中的颜色： RGB和HSL

• 两种颜色表示方法都被CSS3 支持
• 互相转换的原理

RGB: 调整颜色时很麻烦，通常需要对3个参数都进行修改

RGB

RGB的使用

HSL

HSL

HSL的使用

推荐网站：http://paletton.com/

透明度
在SVG中，有两种方法改变透明度

• 直接在颜色中定义rgba(r, g, b, a)和
  hsla(h, s%, l%, a) 中的a => 取值范围为[0, 1]
• 用 opacity属性对透明度进行定义 => 取值范围为[0, 1]

举例：

线性渐变 和 径向渐变

渐变让图像更丰满，SVG中有两种渐变方式：线性渐变和径向渐变

• 线性渐变

  
  
  

  线性渐变

gradientUnits：objectBoundingBox | userSpaceOnUse
objectBoundingBox以实际使用该gradient的形状作为单位1，用0-1选取百分比
userSpaceOnUse 世界坐标系

• 径向渐变

  
  
  

  径向渐变

笔刷的使用

笔刷用于绘制纹理，相当于一个容器。纹理会被重复的填充到目标图形上。

patternUnits

• patternUnits="objectBoundingBox" 情况下： 通过调节 rect 的 width 发现，显示的pattern数量是不变的，改变的只有间距
• patternUnits="userSpaceOnUse" 情况下： 通过调节 rect 的 width 发现，显示的pattern数量会随容器大小改变
  patternContentUnits
  pattern本身相对/绝对的比例或宽高