远走高飞

暗黑模式

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

前端教程SVG

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

fill 基本语法 ​

html
<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 等。

html
<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（可以是自定义颜色、颜色关键字等）。

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

示例 ​

fill 相关属性 ​

fill-opacity ​

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

html
<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)的渐变元素。

基本语法：
html
<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> 是从一个起始圆形渐变到终止圆形的渐变元素。

基本语法：
html
<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 同线性渐变。
示例(可拖拽圆心)：

渐变单位和变换 ​

html
<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 的图形。

基本语法 ​

html
<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 的各种用法。

显示/隐藏评论(推荐使用 GitHub 登录)
What do you think?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
0  Words
Comments
  • Latest
  • Oldest
  • Hottest
Powered by Waline v3.5.7