<feblend>
<fecolormatrix>
<fecomponenttransfer>
<fecomposite>
<feconvolvematrix>
<fediffuselighting>
<fedisplacementmap>
<feflood>
<fefunca>
<fefuncb>
<fefuncg>
<fefuncr>
<fegaussianblur>
<feimage>
<femerge>
<femergenode>
<femorphology>
<feoffset>
<fepointlight>
<fespecularlighting>
<fespotlight>
<fetile>
<feturbulence>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
The
<feComponentTransfer>
SVG
filter primitive performs color-component-wise remapping of data for each pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.
The calculations are performed on non-premultiplied color values. The colors are modified by changing each channel (R, G, B, and A) to the result of what the children
<feFuncR>
,
<feFuncB>
,
<feFuncG>
，和
<feFuncA>
return.
| 类别 | Filter primitive element |
|---|---|
| 准许内容 |
Any number of the following elements, in any order:
<feFuncA>
,
<feFuncR>
,
<feFuncB>
,
<feFuncG>
|
This element implements the
SVGFEComponentTransferElement
接口。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
<
defs
>
<
linearGradient
id
=
"
rainbow
"
gradientUnits
=
"
userSpaceOnUse
"
x1
=
"
0
"
y1
=
"
0
"
x2
=
"
100%
"
y2
=
"
0
"
>
<
stop
offset
=
"
0
"
stop-color
=
"
#ff0000
"
>
</
stop
>
<
stop
offset
=
"
0.2
"
stop-color
=
"
#ffff00
"
>
</
stop
>
<
stop
offset
=
"
0.4
"
stop-color
=
"
#00ff00
"
>
</
stop
>
<
stop
offset
=
"
0.6
"
stop-color
=
"
#00ffff
"
>
</
stop
>
<
stop
offset
=
"
0.8
"
stop-color
=
"
#0000ff
"
>
</
stop
>
<
stop
offset
=
"
1
"
stop-color
=
"
#800080
"
>
</
stop
>
</
linearGradient
>
<
filter
id
=
"
identity
"
x
=
"
0
"
y
=
"
0
"
width
=
"
100%
"
height
=
"
100%
"
>
<
feComponentTransfer
>
<
feFuncR
type
=
"
identity
"
>
</
feFuncR
>
<
feFuncG
type
=
"
identity
"
>
</
feFuncG
>
<
feFuncB
type
=
"
identity
"
>
</
feFuncB
>
<
feFuncA
type
=
"
identity
"
>
</
feFuncA
>
</
feComponentTransfer
>
</
filter
>
<
filter
id
=
"
table
"
x
=
"
0
"
y
=
"
0
"
width
=
"
100%
"
height
=
"
100%
"
>
<
feComponentTransfer
>
<
feFuncR
type
=
"
table
"
tableValues
=
"
0 0 1 1
"
>
</
feFuncR
>
<
feFuncG
type
=
"
table
"
tableValues
=
"
1 1 0 0
"
>
</
feFuncG
>
<
feFuncB
type
=
"
table
"
tableValues
=
"
0 1 1 0
"
>
</
feFuncB
>
</
feComponentTransfer
>
</
filter
>
<
filter
id
=
"
discrete
"
x
=
"
0
"
y
=
"
0
"
width
=
"
100%
"
height
=
"
100%
"
>
<
feComponentTransfer
>
<
feFuncR
type
=
"
discrete
"
tableValues
=
"
0 0 1 1
"
>
</
feFuncR
>
<
feFuncG
type
=
"
discrete
"
tableValues
=
"
1 1 0 0
"
>
</
feFuncG
>
<
feFuncB
type
=
"
discrete
"
tableValues
=
"
0 1 1 0
"
>
</
feFuncB
>
</
feComponentTransfer
>
</
filter
>
<
filter
id
=
"
linear
"
x
=
"
0
"
y
=
"
0
"
width
=
"
100%
"
height
=
"
100%
"
>
<
feComponentTransfer
>
<
feFuncR
type
=
"
linear
"
slope
=
"
0.5
"
intercept
=
"
0
"
>
</
feFuncR
>
<
feFuncG
type
=
"
linear
"
slope
=
"
0.5
"
intercept
=
"
0.25
"
>
</
feFuncG
>
<
feFuncB
type
=
"
linear
"
slope
=
"
0.5
"
intercept
=
"
0.5
"
>
</
feFuncB
>
</
feComponentTransfer
>
</
filter
>
<
filter
id
=
"
gamma
"
x
=
"
0
"
y
=
"
0
"
width
=
"
100%
"
height
=
"
100%
"
>
<
feComponentTransfer
>
<
feFuncR
type
=
"
gamma
"
amplitude
=
"
4
"
exponent
=
"
7
"
offset
=
"
0
"
>
</
feFuncR
>
<
feFuncG
type
=
"
gamma
"
amplitude
=
"
4
"
exponent
=
"
4
"
offset
=
"
0
"
>
</
feFuncG
>
<
feFuncB
type
=
"
gamma
"
amplitude
=
"
4
"
exponent
=
"
1
"
offset
=
"
0
"
>
</
feFuncB
>
</
feComponentTransfer
>
</
filter
>
</
defs
>
<
g
font-weight
=
"
bold
"
>
<
text
x
=
"
0
"
y
=
"
20
"
>
默认
</
text
>
<
rect
x
=
"
0
"
y
=
"
30
"
width
=
"
100%
"
height
=
"
20
"
>
</
rect
>
<
text
x
=
"
0
"
y
=
"
70
"
>
标识
</
text
>
<
rect
x
=
"
0
"
y
=
"
80
"
width
=
"
100%
"
height
=
"
20
"
style
=
"
filter
:
url
(
#identity
)
"
>
</
rect
>
<
text
x
=
"
0
"
y
=
"
120
"
>
Table lookup
</
text
>
<
rect
x
=
"
0
"
y
=
"
130
"
width
=
"
100%
"
height
=
"
20
"
style
=
"
filter
:
url
(
#table
)
"
>
</
rect
>
<
text
x
=
"
0
"
y
=
"
170
"
>
Discrete table lookup
</
text
>
<
rect
x
=
"
0
"
y
=
"
180
"
width
=
"
100%
"
height
=
"
20
"
style
=
"
filter
:
url
(
#discrete
)
"
>
</
rect
>
<
text
x
=
"
0
"
y
=
"
220
"
>
Linear function
</
text
>
<
rect
x
=
"
0
"
y
=
"
230
"
width
=
"
100%
"
height
=
"
20
"
style
=
"
filter
:
url
(
#linear
)
"
>
</
rect
>
<
text
x
=
"
0
"
y
=
"
270
"
>
伽玛函数
</
text
>
<
rect
x
=
"
0
"
y
=
"
280
"
width
=
"
100%
"
height
=
"
20
"
style
=
"
filter
:
url
(
#gamma
)
"
>
</
rect
>
</
g
>
</
svg
>
rect {
fill: url(#rainbow);
}
| 规范 |
|---|
|
Filter Effects Module Level 2
(Filter Effects 2)
# feComponentTransferElement |
BCD tables only load in the browser
<filter>
<feBlend>
<feColorMatrix>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
最后修改： , 由 MDN 贡献者