填充(fill),渐变(graidents),图案(patterns)

前端教程SVG

前面的课程中我们使用过 fill 属性填充背景色，但都是简单地设置为 red blue 等基础颜色，本节详细介绍 fill 的各种用法。

fill 基本语法

<xx fill="colorKeyword" />  <!-- 颜色关键字 -->
<xx fill="customColor" />   <!-- 自定义颜色 -->
<xx fill="rgb(r,g,b)" />    <!-- 颜色函数 -->
<xx fill="rgba(r,g,b,a)" /> <!-- 颜色函数 -->
<xx fill="hsl(h,s,l)" />    <!-- 颜色函数 -->
<xx fill="hsla(h,s,l,a)" /> <!-- 颜色函数 -->
<xx fill="var(--some-color)" /> <!-- var 颜色变量 -->
<xx fill="url(#gradientId)" />  <!-- 引用渐变色 --> 
<xx fill="url(#patternId)" />   <!-- 引用图案 --> 
<xx fill="url(#patternId) defaultColor" />  <!-- 回退语法 --> 
<xx fill="child(N)">  <!-- 引用第 N 个子元素作为填充色 --> 
    <linearGradient>
        <stop stop-color="green" offset="0"/>
        <stop stop-color="lightBlue" offset="1"/>
    </linearGradient>
    <radialGradient>
        <stop stop-color="green" offset="0"/>
        <stop stop-color="lightBlue" offset="1"/>
    </raGradient>
</xx>

颜色关键字

已命名颜色(Named Colors)

类似 CSS color 属性，fill 也支持内置的已命名的颜色，如 red blue black white 等。

<xx fill="red" />
<xx fill="blue" />

currentColor 关键字

currentColor 指的是当前元素的 color property 值，如果 当前元素的 color 没有设置，则使用 inherited 值，一般就是父元素的 color property。

transparent 和 none 关键字

transparent 即透明，none 即不填充背景，两者效果相同，区别在于：

• transparent：鼠标可以 hover
• none：鼠标无法 hover

自定义颜色和颜色函数

名称	语法	示例
十六进制代码	#HEX_CODE	#F00 或 #FF0000 #FF000080 备注：大小写不敏感
整数 RGB 函数	rgb(r, g, b) rgba(r, g, b, a)	rgb(255, 0, 0) rgb(255, 0, 0, 0.5)
百分比 RGB 函数	rgb(pr, pg, pb) rgba(pr, pg, pb, pa)	rgb(100%, 0%, 0%) rgb(100%, 0%, 0%, 50%)
HSL 函数	hsl(h, s, l) hsla(h, s, l, a)	hsl(120,100%,50%) hsla(120,100%,50%,0.3)

var 颜色变量

类似 CSS 中 color: var(--some-color, defaultColor)，

SVG fill 也支持这种语法：fill="var(--some-color, currentColor)"

渐变色和图案

关于渐变色和图案，请往下阅读 Paint Servers。

回退语法

当 #patternId 不存在时，则回退使用 defaultColor（可以是自定义颜色、颜色关键字等）。

<xx fill="url(#patternId) defaultColor" />

示例

fill 相关属性

fill-opacity

除了可以在 rgba 函数中设置颜色的透明比例外，SVG 也可以通过 fill-opacity 单独控制透明比例。

<xx fill="red" fill-opacity="0.5" ... />
<xx fill="red" fill-opacity="50%" ... />

• 整数：取值 0~1，0表示完全透明，1表示完全不透明。
• 或者 百分比：取值 0%~100%，0%表示完全透明，100%表示完全不透明。

Paint Servers

fill=url(#paintServerId) 引用另外一个用来描述如何填充形状背景的元素，这个元素被称为 Paint Server，如渐变颜色、图案等。

Gradients 渐变颜色

<linearGradient> 线性渐变

<linearGradient> 是沿着一条渐变线(the gradient vector)的渐变元素。

基本语法：

<svg>
    <defs>
        <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad" href="#templateGradient">
            <stop stop-opacity="1" stop-color="red" offset="0" />
            <stop stop-opacity="1" stop-color="yellow" offset="0.33333" />
            <stop stop-opacity="1" stop-color="green" offset="0.66666" />
            <stop stop-opacity="1" stop-color="blue" offset="1" />
        </linearGradient>
    </defs>
</svg>

• (x1, y1) 为渐变线的起点，(x2, y2) 为渐变线的终点，可以是数字和百分比
• spreadMethod="pad|reflect|repeat"，定义如何填充超过渐变线起始点的区域，默认 pad
• <stop> 控制在渐变线的某个位置使用某个颜色，stop-opacity 指透明度，stop-color 指颜色，offset 指渐变线的位置
  • stop-color="red" offset="0" 在起始位置使用红色
  • stop-color="yellow" offset="0.33333" 从起始位置(红色)渐变到 33.333%(黄色)
  • stop-color="green" offset="0.33333" 从 33.333%(黄色)渐变到 66.666%(绿色)
  • stop-color="blue" offset="1" 从 66.666%(绿色)渐变终点(蓝色)
• href="#templateGradient" 引用另外一个线性渐变作为模板

示例(可拖拽起止点)：

<radialGradient> 径向渐变

<radialGradient> 是从一个起始圆形渐变到终止圆形的渐变元素。

基本语法：

<radialGradient id="myGradient" spreadMethod="pad" fx="50%" fy="50%" fr="0%" cx="50%" cy="50%" r="50%" href="#templateGradient">
  <stop stop-color="red" offset="0" />
  <stop stop-color="yellow" offset="50%" />
  <stop stop-color="blue" offset="100%" />
</radialGradient>

• (fx,fy) 为起始圆形圆心坐标, fr 为其半径；
  • 默认情况下 fx="50%" fy="50%" fr="0%"
• (cx,cy) 为终止圆形圆心坐标，r 为其半径；
  • 默认情况下 cx="50%" cy="50%" r="50%"
• spreadMethod <stop> href 同线性渐变。

示例(可拖拽圆心)：

渐变单位和变换

<linearGradient ... gradientUnits="objectBoundingBox | userSpaceOnUse">
    ...
</linearGradient>
<linearGradient ... gradientTransform="translate(20,20) scale(2) rotate(45)">
    ...
</linearGradient>

• gradientUnits：定义 (x1,y1) (x2,y2) 所使用的坐标系统
  • userSpaceOnUse：相对于 SVG 用户空间坐标。
  • objectBoundingBox(默认)：坐标系统为 1×1 的正方形，映射到引用元素的 BoundingBox，此时 (x1,y1) (x2,y2) 如果是数字的话，取值范围为0~1。
• gradientTransform：定义渐变的矩阵变换

<pattern> 图案

<pattern> 元素定义了一个矩形区域的图案，fill 或 stroke 使用它填充图形背景。

<pattern> 元素内部可以是任意的 SVG 图形：纯色背景形状、渐变色背景形状、纯文本、嵌入的图片、甚至是填充了其他 pattern 的图形。

基本语法

<svg>
    <defs>
        <pattern id="myPattern" 
                patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse"
                perserveheightWidthRatio="xMidYMid" viewBox="0,0,20,20"
                x="0" y="0" width="10%" height="10%"
                href="#templatePattern">
            ......任意 SVG 图形
        </pattern>
    </defs>
</svg>

• patternUnits="objectBoundingBox(默认) | userSpaceOnUse"：定义 x y width height 的坐标系统
• patternContentUnits 取值同上，是 <pattern> 内容元素的坐标系统
• viewBox 用户空间，perserveheightWidthRatio 宽高比例
  • 当设置了 viewBox 后，patternContentUnits 会失效
• x, y：<pattern> 元素左上角的偏移量
• width, height：<pattern> 元素的宽和高，可以是百分比、绝对数值、0~1
• href="#templatePattern" 引用其他图案作为模板使用

示例1

示例2

更多 Paint Servers

<solidcolor> <hatch> <meshgradient> 这些元素还没有被普遍支持，其用法此处不做介绍了。

小结

本节讲解了 fill 的各种用法，包括渐变颜色(Gradients)和图案(Patterns)，下节我们学习 stroke 的各种用法。