mode attribute | mode property

Specifies 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 | overlay | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity" ... >

 

JavaScript
normal | multiply | screen | darken | lighten | overlay | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity  = object.mode

 

Property values

Type: SVGAnimatedEnumeration

One of the following image-blending mode values.

ValueCondition
normal

Default value. Specifies no blending. The final color is the source color.

multiply

Multiplies the source and backdrop colors. Multiplying with black results in a black color. Multiplying with white has no change on the original color.

screen

The source color and backdrop colors are inverted, multiplied, and the resulting value is inverted. Multiplying with black has no change on the color. Multiplying with white results in a white final color.

darken

The darker color is selected from the backdrop or source color.

lighten

The lighter color is selected from the backdrop or source color.

overlay

Multiplies or screens the colors. Multiply is used if the backdrop color is darker. Screen is used if the backdrop color is lighter.

color-dodge

The backdrop color is brightened to reflect the source color. A black source color has no change on the final color.

color-burn

The backdrop color is darkened to reflect the source color. A white source color has no change on the final color.

hard-light

Multiplies or screens the colors. Multiply is used if the backdrop color is lighter. Screen is used if the backdrop color is darker. This is similar to shining a harsh spotlight on the backdrop.

soft-light

Similar to hard-light, but softer. Multiplies or screens the colors. Multiply is used if the backdrop color is lighter. Screen is used if the backdrop color is darker. This is similar to shining a diffused spotlight on the backdrop.

difference

Subtracts the darker of the colors from the lighter one. A black layer has no change. A white layer inverts the backdrop color.

exclusion

Similar to difference but lower in contrast. A black layer has no change. A white layer inverts the backdrop color.

hue

The final color has the saturation and luminosity of the backdrop color and the hue of the source color.

saturation

The final color as the hue and luminosity of the backdrop color and the saturation of the source color.

color

The final color has the luminosity of the backdrop color and the hue and saturation of the source color. This preserves the gray levels of the backdrop.

luminosity

The final color has the hue and saturation of the backdrop color and the luminosity of the source color.

 

String format

normal | multiply | screen | darken | lighten | overlay | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

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: