feComposite filter primitive


  • operator: arithmetic over in out atop xor
  • k1 k2 k3 k4 positives values for arithmetic mode
  • in: first picture
  • in2: second picture
  • Example of code:

       <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
          <feImage xlink:href='bateau.jpg' result='pict1'/>
          <feImage xlink:href='fondu3.jpg' result='pict2'/>
          <feComposite in='pict1' in2='pict2' operator="arithmetic" k1="0.4" k2="0.4" k3="1" k4="0"/>
    <use filter="url(#MyFilter)" x='0' y='0'/>

    Figure 1: different mode values, for red strips and SVG picture
    See these examples as SVG

    Tools: change parameters to compose two pictures
             change parameters to compose picture with rectangle colored ( feFlood )
             change parameters to compose picture with feTurbulence filter filled rectangle
    Using feGaussianBlur, feOffset, feSpecularLighting and feComposite to create 3D effect lighting

    FrontPage  feColorMatrix  feComponentTransfer  feSpecularLightning feDiffuseLightning  feSpotLight  feDistantLight  fePointLight  feFlood  feImage   feTurbulence   feTile  feMerge  feBlend  feComposite feGaussianBlur  feMorphology  feConvolveMatrix  feDisplacementMap  feOffset

    Valid XHTML 1.0!