坐标偏移滤镜

前端教程SVG

<feOffset> 坐标偏移滤镜对输入图形进行偏移。

基本语法

<filter id="offset" width="180" height="180">
  <feOffset dx="60" dy="60" />
</filter>

• dx``dy 输入图形左上角坐标的偏移量

示例

通过下面的 codepen 来感受一下：

• 注意：因为设置 primitiveUnits="objectBoundingBox"，所以 dx`` dy 格式是分数或百分比，例如：
  • dx=0.1 表示 0.1* 引用元素的width
  • dy=10% 表示 10% * 引用元素的height

新窗口打开

<feColorMatrix> 颜色矩阵滤镜通过把每一个像素的颜色值 [red, green, blue, alpha] 都乘以一个变换矩阵来修改图层。

原理解释

| R' |     | r1 r2 r3 r4 r5 |   | R |
| G' |     | g1 g2 g3 g4 g5 |   | G |
| B' |  =  | b1 b2 b3 b4 b5 | × | B |
| A' |     | a1 a2 a3 a4 a5 |   | A |
| 1  |     | 0  0  0  0  1  |   | 1 |

即：
R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
B' = b1*R + b2*G + b3*B + b4*A + b5
A' = a1*R + a2*G + a3*B + a4*A + a5

如以上变换公式：

• 假设输入图片中某个像素值为 [R, G, B, A]，
• 给定的矩阵为 [r1，r2，......，a5]，
• 则变换后的像素值为 [R'，G'，B'，A']

基本语法

<filter id="myFilter">
  <feColorMatrix id="feColorMatrix" type="matrix" values="..."/>
</filter>

• type="matrix(默认) | saturate | hueRotate | luminanceToAlpha"
  • matrix 通过变换矩阵来修改像素的颜色，矩阵在 values里定义；
  • saturate 色彩饱和度
  • hueRotate 色调旋转角度
  • luminanceToAlpha 把色彩强度转换为透明程度
• values 根据 type 的不同，取值和意义不同
  • 当 type="matrix" 时，values 默认值为单位矩阵（identity matrix，即没有变化），格式为 r1 r2 r3 r4 r5 g1 g2 g3 ...... a4 a5 这 20 个数值
  • 当 type=saturate 时，values 默认值为 1(没有变化)，取值 0~正实数
  • 当 type="hueRotate 时，values 默认值为 0(没有变化)，取值 0~360
  • 当 type="luminanceToAlpha" 时，values 无效。