Export (0) Print
Expand All
a
b
c
cx
cy
d
dx
dy
e
f
fx
fy
id
in1
in2
k1
k2
k3
k4
r1
r2
x
x1
x2
y
y1
y2
z
Expand Minimize

mode attribute | mode property

Gets a value that indicates one of the image-blending modes.

This property is read-only.

Scalable Vector Graphics: Filter Effects, Section 15.25.3Internet Explorer 10

Syntax

HTML
<element mode="normal | multiply | screen | darken | lighten" ... >
JavaScript
normal | multiply | screen | darken | lighten = object.mode

Property values

Type: SVGAnimatedEnumeration

One of the following image-blending mode values.

The image-blending modes are defined by formulas that use the following shorthand values:

  • cr = Result color (RGB) - premultiplied
  • qa = Opacity value at a given pixel for image A
  • qb = Opacity value at a given pixel for image B
  • ca = Color (RGB) at a given pixel for image A - premultiplied
  • cb = Color (RGB) at a given pixel for image B - premultiplied
ValueCondition
normal
normal

Indicates the following formula is used for computing result color:

cr = (1 - qa) * cb + ca

The normal blend mode is equivalent to operator="over" on the feComposite filter primitive, matches the blending method used by the feMerge filter, and matches the simple alpha compositing technique used in SVG for all compositing outside of filter effects.

multiply
multiply

Indicates the following formula is used for computing result color:

cr = (1-qa)*cb + (1-qb)*ca + ca*cb

screen
screen

Indicates the following formula is used for computing result color:

cr = cb + ca - ca * cb

darken
darken

Indicates the following formula is used for computing result color:

cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

lighten
lighten

Indicates the following formula is used for computing result color:

cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

 

String format

normal | multiply | screen | darken | lighten

Standards information

Remarks

If the mode attribute is not specified, then the effect is as if a value of normal were specified.

See also

SVGFEBlendElement

 

 

Show:
© 2014 Microsoft