feComposite

The feComposite SVG element specifies the combination of the two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, lighter.

Syntax

Attributes

in

Specifies the input for the filter primitive.

If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.

Value
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
Default
SourceGraphic (or result)

in2

Specifies the second input image to the compositing operation.

If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.

Value
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
Default
SourceGraphic (or result)

k1

Specifies the first k value of the formula when the operator attribute is arithmetic.

result = k1*in*in2 + k2*in + k3*in2 + k4

Value
<number>
Default
0

k2

Specifies the second k value of the formula when the operator attribute is arithmetic.

result = k1*in*in2 + k2*in + k3*in2 + k4

Value
<number>
Default
0

k3

Specifies the third k value of the formula when the operator attribute is arithmetic.

result = k1*in*in2 + k2*in + k3*in2 + k4

Value
<number>
Default
0

k4

Specifies the fourth k value of the formula when the operator attribute is arithmetic.

result = k1*in*in2 + k2*in + k3*in2 + k4

Value
<number>
Default
0

operator

Specifies the compositing operation that is to be performed.

Value
over | in | out | atop | xor | lighter | arithmetic
Default
over

Examples

in

BackgroundAlpha

BackgroundImage

FillPaint

<filter-primitive-reference>

SourceAlpha

SourceGraphic

StrokePaint

in2

BackgroundAlpha

BackgroundImage

FillPaint

<filter-primitive-reference>

SourceAlpha

SourceGraphic

StrokePaint

k1

<number>

k2

<number>

k3

<number>

k4

<number>

operator

arithmetic

atop

in

lighter

out

over

xor

Internal

feBlend

feColorMatrix

feComponentTransfer

feConvolveMatrix

feDiffuseLighting

feDisplacementMap

feDistantLight

feDropShadow

feFlood

feFuncA

feFuncB

feFuncG

feFuncR

feGaussianBlur

feImage

feMerge

feMergeMode

feMorphology

feOffset

fePointLight

feSpecularLighting

feSpotLight

feTile

feTurbulence

filter

External

World Wide Web Consortium (W3C)

Home Menu