This topic has not yet been rated - Rate this topic

# values property

Numeric values for the feColorMatrix transformation matrix.The contents of `values` depends on the value of the type.

## Syntax

JavaScript
```list = object.values
```

## Property values

Type: SVGAnimatedNumberList

A list of numeric values that depend on the value of type, and which populate the associated `feColorMatrix` matrix.

## Remarks

The contents of `values` depends on the value of attribute type, as indicated in the following:

For `type="matrix"`, `values` is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma. For example, the identity matrix could be expressed as:

```
type="matrix"
values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"

```

For `type="saturate"`, `values` is a single real number value (0 to 1). A saturate operation is equivalent to the following matrix operation:

```
| R' |     |0.213+0.787s  0.715-0.715s  0.072-0.072s 0  0 |   | R |
| G' |     |0.213-0.213s  0.715+0.285s  0.072-0.072s 0  0 |   | G |
| B' |  =  |0.213-0.213s  0.715-0.715s  0.072+0.928s 0  0 | * | B |
| A' |     |           0            0             0  1  0 |   | A |
| 1  |     |           0            0             0  0  1 |   | 1 |

```

For `type="hueRotate"`, `values` is a single real number value (degrees). A hueRotate operation is equivalent to the following matrix operation:

```
| R' |     | a00  a01  a02  0  0 |   | R |
| G' |     | a10  a11  a12  0  0 |   | G |
| B' |  =  | a20  a21  a22  0  0 | * | B |
| A' |     | 0    0    0    1  0 |   | A |
| 1  |     | 0    0    0    0  1 |   | 1 |

```

where the terms a00, a01, ..., a22 are calculated as follows:

```
| a00 a01 a02 |    [+0.213 +0.715 +0.072]
| a10 a11 a12 | =  [+0.213 +0.715 +0.072] +
| a20 a21 a22 |    [+0.213 +0.715 +0.072]
[+0.787 -0.715 -0.072]
cos(hueRotate value) *  [-0.213 +0.285 -0.072] +
[-0.213 -0.715 +0.928]
[-0.213 -0.715+0.928]
sin(hueRotate value) *  [+0.143 +0.140-0.283]
[-0.787 +0.715+0.072]

```

Thus, the upper-left term of the hue matrix turns out to be:

```
.213 + cos(hueRotate value)*.787 - sin(hueRotate value)*.213

```

For `type="luminanceToAlpha"`, `values` is not applicable. A luminanceToAlpha operation is equivalent to the following matrix operation:

```
| R' |     |      0        0        0  0  0 |   | R |
| G' |     |      0        0        0  0  0 |   | G |
| B' |  =  |      0        0        0  0  0 | * | B |
| A' |     | 0.2125   0.7154   0.0721  0  0 |   | A |
| 1  |     |      0        0        0  0  1 |   | 1 |

```

If the `values` attribute is not specified, then the default behavior depends on the value of attribute type. If `type="matrix"`, then this attribute defaults to the identity matrix. If `type="saturate"`, then this attribute defaults to the value 1, which results in the identity matrix. If `type="hueRotate"`, then this attribute defaults to the value 0, which results in the identity matrix.

## Examples

The following W3CfeColorMatrix markup shows examples of the four types of feColorMatrix operations:

```
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="5cm" viewBox="0 0 800 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example feColorMatrix - Examples of feColorMatrix operations</title>
<desc>Five text strings showing the effects of feColorMatrix:
an unfiltered text string acting as a reference,
use of the feColorMatrix matrix option to convert to grayscale,
use of the feColorMatrix saturate option,
use of the feColorMatrix hueRotate option,
and use of the feColorMatrix luminanceToAlpha option.</desc>
<defs>
x1="100" y1="0" x2="500" y2="0">
<stop offset="0" stop-color="#ff00ff" />
<stop offset=".33" stop-color="#88ff88" />
<stop offset=".67" stop-color="#2020ff" />
<stop offset="1" stop-color="#d00000" />
<filter id="Matrix" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="matrix" in="SourceGraphic"
values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0"/>
</filter>
<filter id="Saturate40" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/>
</filter>
<filter id="HueRotate90" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
</filter>
<filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
<feComposite in="SourceGraphic" in2="a" operator="in" />
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="498"/>
<g font-family="Verdana" font-size="75"
<rect x="100" y="0" width="500" height="20" />
<text x="100" y="90">Unfiltered</text>
<text x="100" y="190" filter="url(#Matrix)" >Matrix</text>
<text x="100" y="290" filter="url(#Saturate40)" >Saturate</text>
<text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text>
<text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text>
</g>
</svg>

```