operator

feComposite

Für <feComposite> legt operator die auszuführende Kompositionsoperation fest.

over

Dieser Wert gibt an, dass die im Attribut in definierte Quellgrafik über der im Attribut in2 definierten Zielgrafik platziert wird.

in

Dieser Wert gibt an, dass die Teile der im Attribut in definierten Quellgrafik, die sich mit der im Attribut in2 definierten Zielgrafik überlappen, die Zielgrafik ersetzen.

out

Dieser Wert gibt an, dass die Teile der im Attribut in definierten Quellgrafik angezeigt werden, die außerhalb der im Attribut in2 definierten Zielgrafik liegen.

atop

Dieser Wert gibt an, dass die Teile der im Attribut in definierten Quellgrafik, die sich mit der im Attribut in2 definierten Zielgrafik überlappen, die Zielgrafik ersetzen. Die Teile der Zielgrafik, die sich nicht mit der Quellgrafik überlappen, bleiben unverändert.

xor

Dieser Wert gibt an, dass die nicht überlappenden Bereiche der im Attribut in definierten Quellgrafik und der im Attribut in2 definierten Zielgrafik kombiniert werden.

lighter

Dieser Wert gibt an, dass die Summe der im Attribut in definierten Quellgrafik und der im Attribut in2 definierten Zielgrafik angezeigt wird.

arithmetic

Dieser Wert gibt an, dass die im Attribut in definierte Quellgrafik und die im Attribut in2 definierte Zielgrafik anhand der folgenden Formel kombiniert werden:

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

Dabei bezeichnen i1 und i2 die entsprechenden Pixelkanalwerte der Eingabebilder, die in beziehungsweise in2 zugeordnet sind. k1, k2, k3 und k4 bezeichnen die Werte der gleichnamigen Attribute.

feMorphology

Für <feMorphology> legt operator fest, ob die Quellgrafik erodiert (also ausgedünnt) oder dilatiert (also verdickt) wird.

erode

Dieser Wert dünnt die im Attribut in definierte Quellgrafik aus.

dilate

Dieser Wert verdickt die im Attribut in definierte Quellgrafik.

Beispiel

html,
body,
svg {
  height: 100%;
  font:
    20px "Helvetica",
    "Arial",
    sans-serif;
}

<svg viewBox="0 0 120 70" xmlns="http://www.w3.org/2000/svg">
  <filter id="erode">
    <feMorphology operator="erode" radius="0.4" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="0.8" />
  </filter>

  <text x="0" y="15">Normal text</text>
  <text x="0" y="40" filter="url(#erode)">Thin text</text>
  <text x="0" y="65" filter="url(#dilate)">Fat text</text>
</svg>

Spezifikationen