<feComposite>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La primitive de filtre SVG <feComposite> effectue la combinaison de deux images en entrée, pixel par pixel, en utilisant une des opérations de composition de Porter-Duff: over, in, atop, out, xor, et lighter. Il est également possible d'appliquer une opération de type arithmetic (avec un résultat borné entre [0..1]).

L'opération arithmetic est utile pour combiner le résultat de <feDiffuseLighting> et <feSpecularLighting> avec des textures. Si l'opération arithmetic est choisie, chaque pixel est calculé à l'aide de la formule suivante:

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

où

  • i1 et i2 indiquent les valeurs des pixels correspondant aux images en entrée, in et in2 respectivement
  • k1, k2, k3 et k4 indiquent les valeurs des attributs du même nom

Contexte d'utilisation

CatégoriesÉlément de primitive de filtre
Contenu autoriséTout élément de cette liste, quel qu'en soit l'ordre :
<animate>, <set>

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

Cet élément implémente l'interface SVGFECompositeElement.

Exemple

SVG

html
<svg
  width="330"
  height="195"
  viewBox="0 0 1100 650"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Example feComposite - Examples of feComposite operations</title>
  <desc>
    Four rows of six pairs of overlapping triangles depicting the six different
    feComposite operators under different opacity values and different clearing
    of the background.
  </desc>
  <defs>
    <desc>
      Define two sets of six filters for each of the six compositing operators.
      The first set wipes out the background image by flooding with opaque
      white. The second set does not wipe out the background, with the result
      that the background sometimes shines through and is other cases is blended
      into itself (i.e., "double-counting").
    </desc>
    <filter
      id="overFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" />
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="over"
        result="comp" />
      <feMerge>
        <feMergeNode in="flood" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>
    <filter
      id="inFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" />
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="in"
        result="comp" />
      <feMerge>
        <feMergeNode in="flood" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>
    <filter
      id="outFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" />
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="out"
        result="comp" />
      <feMerge>
        <feMergeNode in="flood" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>
    <filter
      id="atopFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" />
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="atop"
        result="comp" />
      <feMerge>
        <feMergeNode in="flood" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>
    <filter
      id="xorFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" />
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="xor"
        result="comp" />
      <feMerge>
        <feMergeNode in="flood" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>
    <filter
      id="arithmeticFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" />
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        result="comp"
        operator="arithmetic"
        k1=".5"
        k2=".5"
        k3=".5"
        k4=".5" />
      <feMerge>
        <feMergeNode in="flood" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>
    <filter
      id="overNoFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="over"
        result="comp" />
    </filter>
    <filter
      id="inNoFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="in"
        result="comp" />
    </filter>
    <filter
      id="outNoFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="out"
        result="comp" />
    </filter>
    <filter
      id="atopNoFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="atop"
        result="comp" />
    </filter>
    <filter
      id="xorNoFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        operator="xor"
        result="comp" />
    </filter>
    <filter
      id="arithmeticNoFlood"
      filterUnits="objectBoundingBox"
      x="-5%"
      y="-5%"
      width="110%"
      height="110%">
      <feComposite
        in="SourceGraphic"
        in2="BackgroundImage"
        result="comp"
        operator="arithmetic"
        k1=".5"
        k2=".5"
        k3=".5"
        k4=".5" />
    </filter>
    <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
    <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
    <path
      id="Blue50"
      d="M 0 125 L 100 125 L 100 225 z"
      fill="#00ffff"
      fill-opacity=".5" />
    <path
      id="Red50"
      d="M 0 125 L 0 225 L 100 125 z"
      fill="#ff00ff"
      fill-opacity=".5" />
    <g id="TwoBlueTriangles">
      <use xlink:href="#Blue100" />
      <use xlink:href="#Blue50" />
    </g>
    <g id="BlueTriangles">
      <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles" />
      <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles" />
      <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles" />
      <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles" />
      <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles" />
      <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles" />
    </g>
  </defs>

  <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648" />
  <g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
    <desc>
      Render the examples using the filters that draw on top of an opaque white
      surface, thus obliterating the background.
    </desc>
    <g enable-background="new">
      <text x="15" y="75">opacity 1.0</text>
      <text x="15" y="115" font-size="27">(with feFlood)</text>
      <text x="15" y="200">opacity 0.5</text>
      <text x="15" y="240" font-size="27">(with feFlood)</text>
      <use xlink:href="#BlueTriangles" />
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overFlood)" />
        <use xlink:href="#Red50" filter="url(#overFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inFlood)" />
        <use xlink:href="#Red50" filter="url(#inFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outFlood)" />
        <use xlink:href="#Red50" filter="url(#outFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopFlood)" />
        <use xlink:href="#Red50" filter="url(#atopFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorFlood)" />
        <use xlink:href="#Red50" filter="url(#xorFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
    <g transform="translate(0,325)" enable-background="new">
      <desc>
        Render the examples using the filters that do not obliterate the
        background, thus sometimes causing the background to continue to appear
        in some cases, and in other cases the background image blends into
        itself ("double-counting").
      </desc>
      <text x="15" y="75">opacity 1.0</text>
      <text x="15" y="115" font-size="27">(without feFlood)</text>
      <text x="15" y="200">opacity 0.5</text>
      <text x="15" y="240" font-size="27">(without feFlood)</text>
      <use xlink:href="#BlueTriangles" />
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overNoFlood)" />
        <use xlink:href="#Red50" filter="url(#overNoFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inNoFlood)" />
        <use xlink:href="#Red50" filter="url(#inNoFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outNoFlood)" />
        <use xlink:href="#Red50" filter="url(#outNoFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
        <use xlink:href="#Red50" filter="url(#atopNoFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorNoFlood)" />
        <use xlink:href="#Red50" filter="url(#xorNoFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
  </g>
</svg>

Résultat

Cette image affine le résultat désiré.

Example feComposite — Examples of feComposite operations

Spécifications

Specification
Filter Effects Module Level 1
# feCompositeElement

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi