Attributes
Vachmi
The <feComposite> SVG 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, and lighter.
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
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 in and in2 respectively
• k1, k2, k3 and k4 indicate the values of the attributes with the same name
Attribute
Description
in
Identifies the input for the compositing operation
in2
The second input image to the compositing operation. This attribute can take on the same values as the ‘in’ attribute.
operator
The compositing operation that is to be performed.
Possible values are over | in | out | atop | xor | arithmetic
Possible values are over | in | out | atop | xor | arithmetic
Here is the SVG code to draw this filter.
<svg id='path1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'>
<defs>
<g id="shape">
<path id="regpath1" d="M 15,25 a 15,15 1 0,0 0,30 h 50 a 15,15 1 0,0 0,-30 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z" fill="lightgray" fill-opacity="0.5"/>
<path id="regpath2" d="M 35,50 a 15,15 1 0,0 0,30 h 50 a 15,15 1 0,0 0,-30 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z" fill="ghostwhite" fill-opacity="0.5"/>
<path id="regpath3" d="M 75,40 a 15,15 1 0,0 0,30 h 50 a 15,15 1 0,0 0,-30 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z" fill="lightsteelblue" />
</g>
<filter id="composite" x="0" y="0">
<feImage xlink:href="#regpath1" result="S1" />
<feImage xlink:href="#regpath2" result="S2" />
<feImage xlink:href="#regpath3" result="S3" />
<feComposite operator="over" in="S1" in2="S2" result="inter1"/>
<feComposite operator="over" in="inter1" in2="S3" result="inter2"/>
</filter>
</defs>
<use xlink:href="#shape" x="0" y="0" filter="url(#composite)" />
</svg>
<defs>
<g id="shape">
<path id="regpath1" d="M 15,25 a 15,15 1 0,0 0,30 h 50 a 15,15 1 0,0 0,-30 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z" fill="lightgray" fill-opacity="0.5"/>
<path id="regpath2" d="M 35,50 a 15,15 1 0,0 0,30 h 50 a 15,15 1 0,0 0,-30 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z" fill="ghostwhite" fill-opacity="0.5"/>
<path id="regpath3" d="M 75,40 a 15,15 1 0,0 0,30 h 50 a 15,15 1 0,0 0,-30 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z" fill="lightsteelblue" />
</g>
<filter id="composite" x="0" y="0">
<feImage xlink:href="#regpath1" result="S1" />
<feImage xlink:href="#regpath2" result="S2" />
<feImage xlink:href="#regpath3" result="S3" />
<feComposite operator="over" in="S1" in2="S2" result="inter1"/>
<feComposite operator="over" in="inter1" in2="S3" result="inter2"/>
</filter>
</defs>
<use xlink:href="#shape" x="0" y="0" filter="url(#composite)" />
</svg>