有趣的 SVG filter - feColorMatrix

之前寫了一篇 CSS 的濾鏡 [CSS 的 filter](https://yhtpnotes.blogspot.com/2020/06/css-filter.html) ，裡頭有一些設定，例如飽合度(saturate) 和色相旋轉(hue-rotate) 等，在 SVG 的濾鏡中也可以做到，而且還有一個更強大的 Matrix 轉換 參考資料：[這裡](https://drafts.fxtf.org/filter-effects/#feColorMatrixElement) 還有 [這裡](https://webplatform.github.io/docs/svg/elements/feColorMatrix/) 首先先說明一下 feColorMatrix 的參數 ``` type matrix , saturate , hueRotate , luminanceToAlpha values 設定的值 ``` # matrix 先從最複雜的 matrix 說明 <p> matrix 的定義如下，從 `a_00` 到 `a_34` 就是 values 要填的值 </p> <div style="transform: scale(0.8) translate(-40px,0);"> <p> `[[R_(out)],[G_(out)],[B_(out)],[A_(out)],[1]] = [[a_00,a_01,a_02,a_03,a_04] ,[a_10,a_11,a_12,a_13,a_14] ,[a_20,a_21,a_22,a_23,a_24] ,[a_30,a_31,a_32,a_33,a_34] ,[0 ,0 ,0 ,0 ,1 ]] * [[R],[G],[B],[A],[1]]` </p> </div> 先來一個簡單的範例, 這個範例中把 R,G,B 的值都乘以2，可以增加亮度 ``` $mmcode(r1) ``` <div class="mmresult r1"> <svg width="300" height="400"> <defs> <filter id="a121721_f1"> <feColorMatrix in="SourceGraphic" type="matrix" values= "2 0 0 0 0 0 2 0 0 0 0 0 2 0 0 0 0 0 1 0"/> </filter> </defs> <text x=80 y=20>原圖</text> <image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/> <text x=80 y=220>濾鏡</text> <image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f1)"/> </svg> </div> 經由這個矩陣，把 r,g,b 都乘以2，即可增加亮度 <p> `[[2 ,0 ,0 ,0 ,0 ] , [0 ,2 ,0 ,0 ,0 ] , [0 ,0 ,2 ,0 ,0 ] , [0 ,0 ,0 ,1 ,0 ] , [0 ,0 ,0 ,0 ,1 ]]` </p> # saturate 要增加飽合度的話，只要 type 設為 saturate , 然後修改 values 即可, 如果想手動設定陣列來達到效果，公式如下： <div style="transform: scale(0.8) translate(-40px,0);"> <p> `[[0.213+0.787s,0.715-0.715s,0.072-0.072s,0 ,0 ] , [0.213-0.213s,0.715+0.285s,0.072-0.072s,0 ,0 ] , [0.213-0.213s,0.715-0.715s,0.072+0.928s,0 ,0 ] , [0 ,0 ,0 ,1 ,0 ] , [0 ,0 ,0 ,0 ,1 ]]` </p> </div> ``` $mmcode(r2) ``` <div class="mmresult r2"> <svg width="300" height="400"> <defs> <filter id="a121721_f2"> <feColorMatrix in="SourceGraphic" type="saturate" values="2"/> </filter> </defs> <text x=80 y=20>原圖</text> <image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/> <text x=80 y=220>濾鏡</text> <image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f2)"/> </svg> </div> # hueRotate hueRotate 公式 <div style="transform: scale(0.8) translate(-40px,0);"> <p> `[[a_00,a_01,a_02] ,[a_10,a_11,a_12] ,[a_20,a_21,a_22]] = [ [0.213,0.715,0.072] , [0.213,0.715,0.072] , [0.213,0.715,0.072]] + cos(hue\ deg)` </p> <p style="padding:10px 10px 10px 50px"> `*[ [+0.787,-0.715,-0.072] , [-0.213,+0.285,-0.072] , [-0.213,-0.715,+0.928]] + sin(hue\ deg)` </p> <p style="padding:10px 10px 10px 100px"> `*[ [-0.213,-0.715,+0.928] , [+0.143,+0.140,-0.283] , [-0.787,+0.715,+0.072]]` </p> </div> ``` $mmcode(r3) ``` <div class="mmresult r3"> <svg width="300" height="400"> <defs> <filter id="a121721_f3"> <feColorMatrix in="SourceGraphic" type="hueRotate" values="180"/> </filter> </defs> <text x=80 y=20>原圖</text> <image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/> <text x=80 y=220>濾鏡</text> <image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f3)"/> </svg> </div> # luminanceToAlpha luminanceToAlpha 公式 <p> `[[0 ,0 ,0 ,0 ,0 ] , [0 ,0 ,0 ,0 ,0 ] , [0 ,0 ,0 ,0 ,0 ] , [0.2126,0.7152,0.0722,0 ,0 ] , [0 ,0 ,0 ,0 ,1 ]]` </p> ``` $mmcode(r4) ``` <div class="mmresult r4"> <svg width="300" height="400"> <defs> <filter id="a121721_f4"> <feColorMatrix in="SourceGraphic" type="luminanceToAlpha"/> </filter> </defs> <text x=80 y=20>原圖</text> <image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/> <text x=80 y=220>濾鏡</text> <image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f4)"/> </svg> </div> <hr> 最後寫了一個自己設定矩陣參數的程式，做為這一篇的結束。 <div id="a121721_s5"> <style> #a121721_set input { width:3.5em; } #a121721_s5 button { font-size:1em; } #a121721_bb button { width:3em; } #a121721_bb div { display:inline-block; width:6em; } </style> <svg width="260" height="200"> <defs> <filter id="a121721_f5"> <feColorMatrix id="a121721_m5" in="SourceGraphic" type="matrix" values= "2 0 0 0 0 0 2 0 0 0 0 0 2 0 0 0 0 0 1 0"/> </filter> </defs> <image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=260 height=200 filter="url(#a121721_f5)"/> </svg> <br> <div id="a121721_set" style="width:30em;"> <input type="text"/> </div> <br> <div> <button id="a121721_ini">init</button> <button id="a121721_ini_contrast">contrast</button> <button id="a121721_ini_grey">grey</button> <button id="a121721_ini_sepia">sepia</button> <button id="a121721_ini_invert">invert</button> </div><br> <div> <div id="a121721_bb"> <div>brightness</div> <button id="a121721_badd">+</button> <button id="a121721_bsub">-</button><br> <div>m</div> <button id="a121721_madd">+</button> <button id="a121721_msub">-</button><br> <div>n</div> <button id="a121721_nadd">+</button> <button id="a121721_nsub">-</button><br> </div> </div> </div> <script> $(()=> { let ii='<input type="text"/>'; let i; let hh=""; let init=[1,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0]; let contrast=[2.0 ,0 ,0 ,0 ,-0.2, 0 ,2.0 ,0 ,0 ,-0.2, 0 ,0 ,2.0 ,0 ,-0.2, 0 ,0 ,0 ,1 ,0 ]; let grey =[.33 ,.33 ,.33 ,0 ,0, .33 ,.33 ,.33 ,0 ,0, .33 ,.33 ,.33 ,0 ,0, 0 ,0 ,0 ,1 ,0 ]; let sepia =[.35 ,.35 ,.35 ,0 ,0, .25 ,.25 ,.25 ,0 ,0, .15 ,.15 ,.15 ,0 ,0, 0 ,0 ,0 ,1 ,0 ]; let invert =[-1 ,0 ,0 ,0 ,.5, 0 ,-1 ,0 ,0 ,.5, 0 ,0 ,-1 ,0 ,.5, 0 ,0 ,0 ,1 ,0 ]; for (i=0;i<20;i++) { hh+=ii; if((i+1)%5==0) hh+="<br>"; } function putv(m) { let s=$("#a121721_set input"); for (i=0;i<s.length;i++) { s[i].value=m[i].toFixed(3); } } function getv() { let s=$("#a121721_set input"); let r=[]; for (i=0;i<s.length;i++) { let j=parseFloat(s[i].value); j=((j)?(j):(0)); r.push(j); } return r; } function run() { let s=$("#a121721_set input"); hh=""; for (i=0;i<s.length;i++) { let j=parseFloat(s[i].value); hh+=((j)?(j):(0))+" "; } $("#a121721_m5").attr("values",hh); } $("#a121721_set").html(hh); putv(init); run(); $("#a121721_set input").on("input",run); $("#a121721_ini").on("click",function() { putv(init); run(); }) $("#a121721_ini_contrast").on("click",function() { putv(contrast); run(); }) $("#a121721_ini_grey").on("click",function() { putv(grey); run(); }) $("#a121721_ini_sepia").on("click",function() { putv(sepia); run(); }) $("#a121721_ini_invert").on("click",function() { putv(invert); run(); }) $("#a121721_badd").on("click",function() { let m=getv(); m[0]+=0.2; m[6]+=0.2; m[12]+=0.2; putv(m); run(); }) $("#a121721_bsub").on("click",function() { let m=getv(); m[0]-=0.2; m[6]-=0.2; m[12]-=0.2; putv(m); run(); }) $("#a121721_madd").on("click",function() { let m=getv(); m[4]+=0.1; m[9]+=0.1; m[14]+=0.1; putv(m); run(); }) $("#a121721_msub").on("click",function() { let m=getv(); m[4]-=0.1; m[9]-=0.1; m[14]-=0.1; putv(m); run(); }) $("#a121721_nadd").on("click",function() { let m=getv(); let n=[1,2,5,7,10,11]; for (i in n) { m[n[i]]+=0.1; } putv(m); run(); }) $("#a121721_nsub").on("click",function() { let m=getv(); let n=[1,2,5,7,10,11]; for (i in n) { m[n[i]]-=0.1; } putv(m); run(); }) MathJax.typeset(); }); </script>