<feComponentTransfer>
<feComponentTransfer> SVG 濾鏡基元會對每個畫素的資料執行分量重對映。它可以實現亮度調整、對比度調整、色彩平衡或閾值處理等操作。
計算是在非預乘顏色值上進行的。顏色透過將每個通道（R、G、B 和 A）更改為子元素 <feFuncR>、<feFuncB>、<feFuncG> 和 <feFuncA> 返回的結果來修改。如果提供了多個相同的元素，則使用最後一個指定的元素；如果未提供任何元素來修改某個通道，則效果與為該通道提供了一個恆等變換相同。
與其它濾鏡圖元一樣，它預設在 linearRGB 顏色空間中處理顏色分量。您可以使用 color-interpolation-filters 屬性改為使用 sRGB。
使用語境
屬性
DOM 介面
此元素實現了 SVGFEComponentTransferElement 介面。
示例
SVG
html
<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="red"></stop>
<stop offset="0.2" stop-color="yellow"></stop>
<stop offset="0.4" stop-color="lime"></stop>
<stop offset="0.6" stop-color="cyan"></stop>
<stop offset="0.8" stop-color="blue"></stop>
<stop offset="1" stop-color="purple"></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">Default</text>
<rect x="0" y="30" width="100%" height="20"></rect>
<text x="0" y="70">Identity</text>
<rect x="0" y="80" width="100%" height="20" filter="url(#identity)"></rect>
<text x="0" y="120">Table lookup</text>
<rect x="0" y="130" width="100%" height="20" filter="url(#table)"></rect>
<text x="0" y="170">Discrete table lookup</text>
<rect x="0" y="180" width="100%" height="20" filter="url(#discrete)"></rect>
<text x="0" y="220">Linear function</text>
<rect x="0" y="230" width="100%" height="20" filter="url(#linear)"></rect>
<text x="0" y="270">Gamma function</text>
<rect x="0" y="280" width="100%" height="20" filter="url(#gamma)"></rect>
</g>
</svg>
CSS
css
rect {
fill: url("#rainbow");
}
結果
規範
| 規範 |
|---|
| 濾鏡效果模組第 1 級 # feComponentTransferElement |
瀏覽器相容性
載入中…