有趣的 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>

從一開始接觸濾鏡，我就在想，這些濾鏡都是對整個距形空間做處理，如果我只想針對物件範圍處理，難道只能再套用 mask 做裁切嗎 ? 其實有一個比 feBlend 和 feMerge 更強大的疊圖功能 feComposite

feComposite 的參數如下：參考資料

  in,in2        兩張圖
  operator      疊圖參數 
                over (預設)
                in
                out
                atop
                xor
                lighter
                arithmetic
  k1,k2,k3,k4   result = k1*in*in2 + k2*in + k3*in2 + k4

範例如下 :

實測結果 firefox 似忽不支援 lighter*

<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"></feImage>
    <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>
      <set attributeName="in2" to="a121301_img1" begin="a121301_ins.click"></set>
      <set attributeName="in" to="a121301_img1" begin="a121301_inp.click"></set>
      <set attributeName="in2" to="SourceGraphic" begin="a121301_inp.click"></set>
      <set attributeName="operator" to="over" begin="a121301_over.click"></set>
      <set attributeName="operator" to="in" begin="a121301_in.click"></set>
      <set attributeName="operator" to="out" begin="a121301_out.click"></set>
      <set attributeName="operator" to="atop" begin="a121301_atop.click"></set>
      <set attributeName="operator" to="xor" begin="a121301_xor.click"></set>
      <set attributeName="operator" to="lighter" begin="a121301_lighter.click"></set>
      <set attributeName="operator" to="arithmetic" begin="a121301_arithmetic.click"></set>
    </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>

熟悉這些變化後，就可以組合各種濾鏡玩效果

<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"></feImage>
    <feFlood width="40%" height="100%" flood-color="#fff" result="a121302_fo"></feFlood>
    <feComposite in="SourceGraphic" operator="arithmetic" k1="0" k2="-1" k3="0" k4="1" result="a121302_sss"></feComposite>
    <feComposite in2="a121302_sss" in="a121302_fo" result="a121302_sss1" operator="xor"></feComposite>
    <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>