Revision 427579 of feComposite

  • Revision slug: Web/SVG/Element/feComposite
  • Revision title: feComposite
  • Revision id: 427579
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment SVG/Element/feComposite Web/SVG/Element/feComposite

Revision Content

{{ SVGRefElem() }}

This filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor. Additionally, a component-wise arithmetic operation (with the result clamped between [0..1]) can be applied.

The arithmetic operation is useful for combining the output from the {{SVGElement("feDiffuseLighting")}} and {{SVGElement("feSpecularLighting")}} filters with texture data. If the arithmetic operation is chosen, each result pixel is computed using the following formula:

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

where:

  • i1 and i2 indicate the corresponding pixel channel values of the input image, which map to {{SVGAttr("in")}} and {{SVGAttr("in2")}} respectively
  • k1, k2, k3 and k4 indicate the values of the attributes with the same name

Usage context

Categories Filter primitive element
Permitted content Any number of the following elements, in any order:
{{ SVGElement("animate") }}, {{ SVGElement("set") }}
Normative document SVG 1.1 (2nd Edition)

Example

Attributes

Global attributes

Specific attributes

  • {{ SVGAttr("in") }}
  • {{ SVGAttr("in2") }}
  • {{ SVGAttr("operator") }}
  • {{ SVGAttr("k1") }}
  • {{ SVGAttr("k2") }}
  • {{ SVGAttr("k3") }}
  • {{ SVGAttr("k4") }}

DOM Interface

This element implements the SVGFECompositeElement interface.

See also

  • {{ SVGElement("filter") }}
  • {{ SVGElement("animate") }}
  • {{ SVGElement("set") }}
  • {{ SVGElement("feBlend") }}
  • {{ SVGElement("feColorMatrix") }}
  • {{ SVGElement("feComponentTransfer") }}
  • {{ SVGElement("feConvolveMatrix") }}
  • {{ SVGElement("feDiffuseLighting") }}
  • {{ SVGElement("feDisplacementMap") }}
  • {{ SVGElement("feFlood") }}
  • {{ SVGElement("feGaussianBlur") }}
  • {{ SVGElement("feImage") }}
  • {{ SVGElement("feMerge") }}
  • {{ SVGElement("feMorphology") }}
  • {{ SVGElement("feOffset") }}
  • {{ SVGElement("feSpecularLighting") }}
  • {{ SVGElement("feTile") }}
  • {{ SVGElement("feTurbulence") }}
  • SVG tutorial: Filter effects

Revision Source

<p>{{ SVGRefElem() }}</p>
<p>This filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: <code>over</code><em>, </em><code>in</code><em>, </em><code>atop</code><em>, </em><code>out</code><em>, </em><code>xor</code>. Additionally, a component-wise <code>arithmetic</code> operation (with the result clamped between [0..1]) can be applied.</p>
<p>The <code>arithmetic</code> operation is useful for combining the output from the {{SVGElement("feDiffuseLighting")}} and {{SVGElement("feSpecularLighting")}} filters with texture data. If the <code>arithmetic</code> operation is chosen, each result pixel is computed using the following formula:</p>
<pre>
result = k1*i1*i2 + k2*i1 + k3*i2 + k4
</pre>
<p>where:</p>
<ul>
  <li><code>i1</code> and <code>i2</code> indicate the corresponding pixel channel values of the input image, which map to {{SVGAttr("in")}} and {{SVGAttr("in2")}} respectively</li>
  <li><code>k1, k2, k3</code> and <code>k4</code> indicate the values of the attributes with the same name</li>
</ul>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>Filter primitive element</td>
    </tr>
    <tr>
      <th scope="row">Permitted content</th>
      <td>Any number of the following elements, in any order:<br />
        {{ SVGElement("animate") }}, {{ SVGElement("set") }}</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG/filters.html#feCompositeElement" title="http://www.w3.org/TR/SVG/filters.html#feCompositeElement">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<h2 id="Attributes">Attributes</h2>
<h3 id="Global_attributes">Global attributes</h3>
<ul>
  <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a>&nbsp;»</li>
  <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a>&nbsp;»</li>
  <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">Filter primitive attributes</a>&nbsp;»</li>
  <li>{{ SVGAttr("class") }}</li>
  <li>{{ SVGAttr("style") }}</li>
</ul>
<h3 id="Specific_attributes">Specific attributes</h3>
<ul>
  <li>{{ SVGAttr("in") }}</li>
  <li>{{ SVGAttr("in2") }}</li>
  <li>{{ SVGAttr("operator") }}</li>
  <li>{{ SVGAttr("k1") }}</li>
  <li>{{ SVGAttr("k2") }}</li>
  <li>{{ SVGAttr("k3") }}</li>
  <li>{{ SVGAttr("k4") }}</li>
</ul>
<h2 id="DOM.C2.A0Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en/DOM/SVGFECompositeElement" title="en/DOM/SVGFECompositeElement">SVGFECompositeElement</a></code> interface.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ SVGElement("filter") }}</li>
  <li>{{ SVGElement("animate") }}</li>
  <li>{{ SVGElement("set") }}</li>
  <li>{{ SVGElement("feBlend") }}</li>
  <li>{{ SVGElement("feColorMatrix") }}</li>
  <li>{{ SVGElement("feComponentTransfer") }}</li>
  <li>{{ SVGElement("feConvolveMatrix") }}</li>
  <li>{{ SVGElement("feDiffuseLighting") }}</li>
  <li>{{ SVGElement("feDisplacementMap") }}</li>
  <li>{{ SVGElement("feFlood") }}</li>
  <li>{{ SVGElement("feGaussianBlur") }}</li>
  <li>{{ SVGElement("feImage") }}</li>
  <li>{{ SVGElement("feMerge") }}</li>
  <li>{{ SVGElement("feMorphology") }}</li>
  <li>{{ SVGElement("feOffset") }}</li>
  <li>{{ SVGElement("feSpecularLighting") }}</li>
  <li>{{ SVGElement("feTile") }}</li>
  <li>{{ SVGElement("feTurbulence") }}</li>
  <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li>
</ul>
Revert to this revision