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]

举例：

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

线性渐变 和 径向渐变

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

• 线性渐变

  
  线性渐变

<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="50" width="200" height="150" fill="url(#grad1)" stroke="none"/>
    </svg>

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

• 径向渐变

  
  径向渐变

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
        <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="#1497FC"/>
                <stop offset="0.5" stop-color="#A469BE"/>
                <stop offset="1" stop-color="#FF8C00"/>
            </radialGradient>
        </defs>

        <rect x="100" y="100" width="500" height="150" fill="url(#grad2)"/>
    </svg>

笔刷的使用

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

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
        <defs>
            <pattern id="p1" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox">
                <circle r="5" cx="10" cy="10" fill="red"></circle>
                <polygon points="30 10 60 50 0 50" fill="green"></polygon>
            </pattern>
        </defs>
        <rect x="100" y="100" width="800" height="300" fill="url(#p1)" stroke="blue"></rect>
    </svg>

patternUnits

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