有趣的 SVG filter - feComposite

從一開始接觸濾鏡，我就在想，這些濾鏡都是對整個距形空間做處理，如果我只想針對物件範圍處理，難道只能再套用 mask 做裁切嗎 ? 其實有一個比 feBlend 和 feMerge 更強大的疊圖功能 feComposite feComposite 的參數如下：[參考資料](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComposite) ``` in,in2 兩張圖 operator 疊圖參數 over (預設) in out atop xor lighter arithmetic k1,k2,k3,k4 result = k1*in*in2 + k2*in + k3*in2 + k4 ``` 範例如下 : <font color="#00f" style="font-size:1.3em">*實測結果 firefox 似忽不支援 lighter**</font> ``` $mmcode(r1) ``` <div class="mmresult r1"> <svg width=300 height=360 style="background-color:#ffa"> <defs> <filter id="a121301_f1"> <feImage id="a121301_in1" xlink:href="https://yiharng.github.io/bird.jpg" width=240 height=220 preserveAspectRatio="none" result="a121301_img1" /> <feComposite in="SourceGraphic" in2="a121301_img1" k1=1 k2=0 k3=0 k4=0 operator="over"> <set attributeName="in" to="SourceGraphic" begin="a121301_ins.click"/> <set attributeName="in2" to="a121301_img1" begin="a121301_ins.click"/> <set attributeName="in" to="a121301_img1" begin="a121301_inp.click"/> <set attributeName="in2" to="SourceGraphic" begin="a121301_inp.click"/> <set attributeName="operator" to="over" begin="a121301_over.click"/> <set attributeName="operator" to="in" begin="a121301_in.click"/> <set attributeName="operator" to="out" begin="a121301_out.click"/> <set attributeName="operator" to="atop" begin="a121301_atop.click"/> <set attributeName="operator" to="xor" begin="a121301_xor.click"/> <set attributeName="operator" to="lighter" begin="a121301_lighter.click"/> <set attributeName="operator" to="arithmetic" begin="a121301_arithmetic.click"/> </feComposite> </filter> </defs> <text x=115 y=270 fill="#00f">operator</text> <text id="a121301_ins" x=20 y=20>in=Source</text> <text id="a121301_inp" x=140 y=20>in=Image</text> <g transform="translate(40,10)"> <text id="a121301_over" x=10 y=290>over</text> <text id="a121301_in" x=60 y=290>in</text> <text id="a121301_out" x=110 y=290>out</text> <text id="a121301_atop" x=160 y=290>atop</text> <text id="a121301_xor" x=10 y=320>xor</text> <text id="a121301_lighter" x=60 y=320>lighter</text> <text id="a121301_arithmetic" x=130 y=320>arithmetic</text> </g> <path id="a121301_p1" d="M50,100 a1,1,0,0,1,100,0 a1,1,0,0,1,100,0 c0,60,-50,100,-100,130 c-50,-30,-100,-80,-100,-130Z" fill="#0aa" filter="url(#a121301_f1)"></path> </svg> </div> 熟悉這些變化後，就可以組合各種濾鏡玩效果 ``` $mmcode(r2) ``` <div class="mmresult r2"> <svg width=300 height=300 style="background-color:#ffa"> <defs> <filter id="a121302_f1"> <feImage id="a121302_in1" xlink:href="https://yiharng.github.io/bird.jpg" width=240 height=220 preserveAspectRatio="none" result="a121302_img1" /> <feFlood width="40%" height="100%" flood-color="#fff" result="a121302_fo"/> <feComposite in="SourceGraphic" operator="arithmetic" k1=0 k2=-1 k3=0 k4=1 result="a121302_sss"/> <feComposite in2="a121302_sss" in="a121302_fo" result="a121302_sss1" operator="xor"/> <feComposite in="a121302_sss1" in2="a121302_img1" k1=1 k2=0 k3=0 k4=0 operator="arithmetic"> </feComposite> </filter> </defs> <path id="a121302_p1" d="M50,100 a1,1,0,0,1,100,0 a1,1,0,0,1,100,0 c0,60,-50,100,-100,130 c-50,-30,-100,-80,-100,-130Z" fill="#0aa" filter="url(#a121302_f1)"></path> </svg> </div>