有趣的 SVG filter - feComponentTransfer

SVG 的 feComponentTransfer 濾鏡相當有用，可以用來調整顏色和亮度，一開始在測試時覺得很奇怪，好像和預想的不同，查了查資料才發現這個濾鏡預設的是 LinearRGB ，必須加上 **color-interpolation-filters="sRGB"** 才會變成習慣的 sRGB 。 # 濾鏡功能 參考資料：[這裡](https://drafts.fxtf.org/filter-effects/#feComponentTransferElement) 還有 [這裡](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer) 使用方式：在裡面包著 feFuncR,feFuncG,feFuncB,feFuncA 可以單獨針對每一個通道做設定，type 分類有 identity , table , discrete , linear , gamma 這幾種 ``` <feComponentTransfer> <feFuncR type="功能函式"></feFuncR> <feFuncG type="功能函式"></feFuncG> <feFuncB type="功能函式"></feFuncB> <feFuncA type="功能函式"></feFuncA> </feComponentTransfer> ``` ## identity out=in 表示原功能不變 ``` <feFuncR type="identity"></feFuncR> ``` ## table 這裡使用一個參數 tableValues 從 0 到 1 設定每一個區間的值，中間會根據設定的值做漸層 ``` <feFuncR type="table" tableValues="0 1 0 1"></feFuncR> ``` ## discrete 一樣有個 tableValues ，而中間的值不會做漸層，而會直接跳到最近的設定 ``` <feFuncR type="discrete" tableValues="0 1 0 1"></feFuncR> ``` ## linear out = slope * in + intercept 用一個線性斜率來計算顏色分布 ``` <feFuncR type="linear" slope="1" intercept="0"></feFuncR> ``` ## gamma out = amplitude * pow(in, exponent) + offset ``` <feFuncR type="gamma" amplitude="1" exponent="0.455" offset="0"></feFuncR> ``` 範例： ``` $mmcode(r1) ``` <div class="mmresult r1"> identity<br> <svg width=300 height=20> <defs> <linearGradient id="a121701_d1" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#000"></stop> <stop offset="100%" stop-color="#fff"></stop> </linearGradient> <filter id="a121701_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> </defs> <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_identity)"/> </svg><br> table LinearRGB<br> <svg width=300 height=20> <defs> <filter id="a121701_table" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="0 1 0 1"></feFuncR> <feFuncG type="table" tableValues="0 0 0 0"></feFuncG> <feFuncB type="table" tableValues="0 0 0 0"></feFuncB> </feComponentTransfer> </filter> </defs> <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_table)"/> </svg><br> table sRGB<br> <svg width=300 height=20> <defs> <filter id="a121701_table1" x="0" y="0" width="100%" height="100%"> <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="table" tableValues="0 1 0 1"></feFuncR> <feFuncG type="table" tableValues="0 0 0 0"></feFuncG> <feFuncB type="table" tableValues="0 0 0 0"></feFuncB> </feComponentTransfer> </filter> </defs> <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_table1)"/> </svg><br> discrete LinearRGB<br> <svg width=300 height=20> <defs> <filter id="a121701_discrete" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 1 0 1"></feFuncR> <feFuncG type="discrete" tableValues="0 0 0 0"></feFuncG> <feFuncB type="discrete" tableValues="0 0 0 0"></feFuncB> </feComponentTransfer> </filter> </defs> <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_discrete)"/> </svg><br> discrete sRGB<br> <svg width=300 height=20> <defs> <filter id="a121701_discrete1" x="0" y="0" width="100%" height="100%"> <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="discrete" tableValues="0 1 0 1"></feFuncR> <feFuncG type="discrete" tableValues="0 0 0 0"></feFuncG> <feFuncB type="discrete" tableValues="0 0 0 0"></feFuncB> </feComponentTransfer> </filter> </defs> <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_discrete1)"/> </svg><br> linear LinearRGB<br> <svg width=300 height=20> <defs> <filter id="a121701_linear" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="linear" slope="1" intercept="0"></feFuncR> <feFuncG type="linear" slope="-1" intercept="1"></feFuncG> <feFuncB type="linear" slope="0" intercept="0"></feFuncB> </feComponentTransfer> </filter> </defs> <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_linear)"/> </svg><br> linear sRGB<br> <svg width=300 height=20> <defs> <filter id="a121701_linear1" x="0" y="0" width="100%" height="100%"> <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="linear" slope="1" intercept="0"></feFuncR> <feFuncG type="linear" slope="-1" intercept="1"></feFuncG> <feFuncB type="linear" slope="0" intercept="0"></feFuncB> </feComponentTransfer> </filter> </defs> <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_linear1)"/> </svg><br> gamma LinearRGB<br> <svg width=300 height=20> <defs> <filter id="a121701_gamma" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="gamma" amplitude="1" exponent="0.455" offset="0"></feFuncR> <feFuncG type="gamma" amplitude="1" exponent="0.455" offset="0"></feFuncG> <feFuncB type="gamma" amplitude="1" exponent="0.455" offset="0"></feFuncB> </feComponentTransfer> </filter> </defs> <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_gamma)"/> </svg><br> gamma sRGB<br> <svg width=300 height=20> <defs> <filter id="a121701_gamma1" x="0" y="0" width="100%" height="100%"> <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="gamma" amplitude="1" exponent="0.455" offset="0"></feFuncR> <feFuncG type="gamma" amplitude="1" exponent="0.455" offset="0"></feFuncG> <feFuncB type="gamma" amplitude="1" exponent="0.455" offset="0"></feFuncB> </feComponentTransfer> </filter> </defs> <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_gamma1)"/> </svg><br> </div>