SVG/Attribut/values

Das values-Attribut enthält eine Liste von Werten abhängig vom Wert des type-Transfer-Funktionsattributs. In SMIL kann es dem Animationselement mehrere Werte zur Verfügung stellen.

Erlaubte Werte

Standardwert

anwendbar auf

animate, feColorMatrix

Präsentationsattribut

nein

mit CSS animierbar

ja

Beispiel

<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>

Für type="matrix", ist values eine Liste von 20 Matrix-Werten values (a00 a01 a02 a03 a04 a10 a11 ... a34), getrennt durch Leerzeichen oder Komma, z.B.:

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

Für type="saturate", ist values ein einzelner reeller Zahlwert (0 to 1). Eine Sättigungsoperation entspricht folgender Matrix:

| 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 |

Für type="hueRotate", ist values ein einzelner reeller Zahlwert (Grad). Eine hueRotate Operation entspricht folgender Matrix:

| 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 |

wo die Terme a00, a01, etc. wie folgt berechnet werden:

    | 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]

Folglich wird der obere linke Term der hue-Matrix zu:

.213 + cos(hueRotate Wert)*.787 - sin(hueRotate wert)*.213

Für type="luminanceToAlpha", ist values nicht anwendbar.Eine luminanceToAlpha Operation entspricht folgender 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 |

Siehe auch

• SMIL#values
• SVG/Tutorials/Filter/Licht und Schatten

Weblinks

Spezifikation (W3C): values