1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
title: feComponentTransfer
slug: Web/SVG/Element/feComponentTransfer
tags:
- SVG
- SVG滤镜
- 元素
- 需要兼容性表
- 需要示例
translation_of: Web/SVG/Element/feComponentTransfer
---
<div>{{SVGRef}}</div>
<p><strong><code><feComponentTransfer></code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>滤镜基元对每个像素执行颜色分量的数据重映射.它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作.</p>
<p>计算是使用非预乘色值进行执行的.(译者:什么是非预乘数据:非预乘数据可以理解为例如rgba(180,160,130,0.8))中的180,160,130,它们没有被除以255以及乘以透明度0.8而转化为0~1范围的值,当被除以255并且乘以0.8而转化为0~1范围中的值的预处理被称为premultiplied color value(预乘数据)).颜色值在每一个通道(R,G,B,A)中被分别修改然后输出,这些通道分别是 {{SVGElement("feFuncR")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, and {{SVGElement("feFuncA")}}.</p>
<h2 id="用法">用法</h2>
<p>{{svginfo}}</p>
<h2 id="示例">示例</h2>
<h2 id="属性">属性</h2>
<h3 id="全局属性">全局属性</h3>
<ul>
<li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li>
<li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li>
<li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li>
<li>{{ SVGAttr("class") }}</li>
<li>{{ SVGAttr("style") }}</li>
</ul>
<h3 id="专有属性">专有属性</h3>
<ul>
<li>{{ SVGAttr("in") }}</li>
</ul>
<h2 id="DOM_接口">DOM 接口</h2>
<p>该元素实现了<code><a href="/en/DOM/SVGFEComponentTransferElement" title="en/DOM/SVGFEComponentTransferElement">SVGFEComponentTransferElement</a></code>接口。</p>
<h2 id="示例_2">示例</h2>
<h3 id="SVG">SVG</h3>
<pre><code><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="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="5%">Default</text>
<rect x="0" y="8%" width="100%" height="20"></rect>
<text x="0" y="26%">Identity</text>
<rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect>
<text x="0" y="47%">Table lookup</text>
<rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect>
<text x="0" y="68%">Linear function</text>
<rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect>
<text x="0" y="89%">Gamma function</text>
<rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect>
</g>
</svg></code></pre>
<h3 id="CSS">CSS</h3>
<pre><code>rect {
fill: url(#rainbow);
}</code></pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("Example", "100%", 340)}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{ SVGElement("filter") }}</li>
<li>{{ SVGElement("feBlend") }}</li>
<li>{{ SVGElement("feColorMatrix") }}</li>
<li>{{ SVGElement("feComposite") }}</li>
<li>{{ SVGElement("feConvolveMatrix") }}</li>
<li>{{ SVGElement("feDiffuseLighting") }}</li>
<li>{{ SVGElement("feDisplacementMap") }}</li>
<li>{{ SVGElement("feFlood") }}</li>
<li>{{ SVGElement("feFuncA") }}</li>
<li>{{ SVGElement("feFuncB") }}</li>
<li>{{ SVGElement("feFuncG") }}</li>
<li>{{ SVGElement("feFuncR") }}</li>
<li>{{ SVGElement("feGaussianBlur") }}</li>
<li>{{ SVGElement("feImage") }}</li>
<li>{{ SVGElement("feMerge") }}</li>
<li>{{ SVGElement("feMorphology") }}</li>
<li>{{ SVGElement("feOffset") }}</li>
<li>{{ SVGElement("feSpecularLighting") }}</li>
<li>{{ SVGElement("feTile") }}</li>
<li>{{ SVGElement("feTurbulence") }}</li>
<li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li>
</ul>
|
