SVG/ Ausschnitt Maskierung und Komposition

SVG:

Ausschnitt, Maskierung und Komposition

In SVG (nicht in den tiny-Versionen) gibt es einige Möglichkeiten, den darzustellenden Ausschnitt festzulegen oder auch zwischen Darstellungen mittels einer teiltransparenten Maske überzublenden. Es entsteht also eine Komposition aus dem maskierten Element und den zuvor dargestellten Elementen.

Der Hauptunterschied zwischen einem Ausschnitt und einer Maske besteht darin, dass der Ausschnitt immer einen harten Übergang zwischen dem Bereich hat, der im Ausschnitt dargestellt wird und den Elementen, die dahinterliegen. Bei Maskierungen ist ein weicherer, teiltransparenter Übergang möglich.

Verfügbar ist in SVG eine sogenannte einfache alpha-Komposition wie folgt:

Seien
Er, Eg, Eb - Elementfarbwerte
Ea - Elementopazitätswert (alpha-Wert)
Cr, Cg, Cb - Farbwert des Hintergrundes (vor der Überblendung)
Ca - Opazitätswert des Hintergrundes (vor der Überblendung)
Cr', Cg', Cb' - Farbwert nach der Überblendung
Ca' - Opazitätswert nach der Überblendung

Dann gilt:
Ca' = 1 - (1 - Ea) * (1 - Ca)
Cr' = (1 - Ea) * Cr + Er
Cg' = (1 - Ea) * Cg + Eg
Cb' = (1 - Ea) * Cb + Eb

Die Eigenschaften color-interpolation und color-rendering bestimmen, in welchem Farbraum die Komposition stattfindet.

Zuständig für Ausschnitte ist zum einen die Eigenschaft clip, zum anderen kann aber mit dem Element clipPath auch ein beliebiger Pfad definiert werden, welcher mit der Eigenschaft clip-path referenziert wird. Analog dazu gibt es das Element mask zur Definition einer Maske und die Eigenschaft mask zur Referenzierung derselben.

Einfacher Ausschnitt, clip


SVG
1.1	falsch	9.0-9.2, ab 9.5 falsch	-	-	-	?	?	?

Jedes Element, welches einen eigenen Anzeigebereich definiert, definiert damit auch einen Ausschnitt. Ob überstehende Inhalte angezeigt werden oder nicht, hängt dann von der Eigenschaft overflow ab.

Zusätzlich kann dann mit der Eigenschaft clip der darzustellende Bereich weiter eingeschränkt werden. Die Eigenschaft wird in CSS2.0 definiert (so wie sie für SVG 1.1 relevant ist, CSS2.1 hat leider eine dazu inkompatible Definition. Da es für CSS-Dokumente ferner keine Möglichkeit gibt anzugeben, welche Version gerade Verwendung findet, ist die CSS-Eigenschaft außerhalb von SVG faktisch unbrauchbar, bezogen auf SVG muss aber auch mit fehlerhaften Implementierungen gerechnet werden).

Mögliche Werte sind:

inherit: geerbt
auto: automatisch festgelegt, stimmt mit dem Anzeigebereich überein
Form: Der Wert sieht so aus: rect ('oben' 'rechts' 'unten' 'links')

'oben', 'rechts', 'unten' und 'links' sind entweder Längen oder jeweils das Schlüsselwort 'auto'. Ausgehend vom Anzeigebereich geben die Werte jeweils den Versatz von der jeweiligen Seite aus an. Der darzustellende Bereich ist also oben um die Länge 'oben' verkleinert, dann rechts um 'rechts', unten um 'unten' und links um 'links'. In den Beispielen in CSS2.0 ist auch eine Notation mit Kommata angegeben, ebenso wie in CSS2.1 (wo die Werte aber eine andere Bedeutung haben; die Komma-Notation zusammen mit der Bedeutung von CSS2.0 funktioniert in Batik 1.7).

Der Anfangswert ist 'auto', die Eigenschaft wird nicht vererbt und ist animierbar.

Aufgrund der CSS-Definitionsprobleme ist eher zu empfehlen, statt dieser Eigenschaft clipPath zu verwenden.

Beispiel clip
clip wird auf ein Symbol angewendet. Selbiges wird rechts ohne clip dargestellt, links mit. Das komplette Symbol ist zudem links blass hinterlegt. Der korrekte Ausschnitt ist rot gerandet dargestellt.

Ausschnitt, clipPath und clip-path und clip-rule


SVG
1.1	1.7	9	3.5	-	-	?	?	?

Die Idee bei der Definition eines Ausschnittes ist, dass die Kindelemente von clipPath eine 1-Bit-Maske definieren. Die Pfade selbst ohne Berücksichtigung von fill, stroke und stroke-width definieren die Silhouette, welche zur Maskierung dient. Diese Maske wird mittels clip-path von dem Element referenziert, auf welches sie angewendet werden soll.

clipPath erbt keine Ausschnittspfade von Elternelementen. clipPath und die Kindelemente können selbst wiederum Ausschnitte mittels clip-path verwenden. Dabei wird der Ausschnitt zunächst auf das jeweilige Element angewendet. Das Ergebnis davon trägt dann zum übergeordneten Ausschnitt bei. Bei der Anwendung von clip-path auf clipPath wird die Schnittfläche von beidem als Ausschnitt verwendet.

Element clipPath

clipPath ist also ein Gruppierungselement, mit dem Elemente zu einer 1-Bit-Maske zusammengefasst werden. clipPath wird nicht direkt dargestellt, sollte also in der Regel innerhalb vom Element defs notiert werden.

Eigenschaften vererben sich von den Elternelementen in das Element clipPath, nicht vom referenzierenden Element.

Attribut clipPathUnits

Mit dem Attribut clipPathUnits wird festgelegt, welches Koordinatensystem für die 1-Bit-Maske gilt. Mögliche Werte sind 'userSpaceOnUse' und 'objectBoundingBox', ersteres wird angenommen, wenn das Attribut nicht angegeben ist. Das Attribut ist animierbar.

Bei 'userSpaceOnUse' gilt das lokale Koordinatensystem des referenzierenden Elementes, bei 'objectBoundingBox' jenes Koordinatensystem, welches aus der das referenzierende Element umgebenden Box resultiert.

Eigenschaft clip-path

Mit der Eigenschaft clip-path wird ein Element clipPath referenziert, um einen Ausschnitt festzulegen.

Mögliche Werte sind:

inherit: geerbt
none: Kein Ausschnit
Funktionale URI: Referenzierung eines Elementes clipPath im gleichen Dokument in der Form url(#Ausschnitt), wobei 'Ausschnitt der Wert des Attributes id des zu referenzierden Elements clipPath ist. Wird etwas anderes referenziert, ist dies ein Fehler und führt zum Abbruch der Darstellung.

Der Initialwert ist 'none', die Eigenschaft wird nicht vererbt und ist animierbar.

Eigenschaft clip-rule

Analog zur Eigenschaft fill-rule wird mit clip-rule festgelegt, wie Innen und Außen für den Ausschnitt festgelegt wird, was also dargestellt wird (Innen) und was weggelassen wird (Außen).

Mögliche Werte sind die gleichen mit gleicher Bedeutung wie für fill-rule:

inherit: geerbt
nonzero: Festlegung nach der Regel 'nonzero'
evenodd: Festlegung nach der Regel 'evenodd'

Initialwert ist 'nonzero', die Eigenschaft wird vererbt und ist animierbar.

Beispiele - Ausschnitt

Einige einfache Beispiele zum Ausschnitt:

Sinngemäß wird der gewünschte Ausschnittspfad im Element clipPath notiert und dies wird mit der Eigenschaft clip-path beim gewünschen Element notiert:

<defs>
<clipPath id="clip0">
<circle cx="300" cy="300" r="150" />
</clipPath>
</defs>
<rect x="100" y="100" width="300" height="300" 
      fill="#00a" clip-path="url(#clip0)" />

**clipPath** mit *clipPathUnits* 'userSpaceOnUse'

**clipPath** mit *clipPathUnits* 'objectBoundingBox'

Gruppen, **clipPath** mit *clipPathUnits* 'objectBoundingBox'

Verschiedene kompliziertere Variationen zu clipPath

clipPath mit clipPathUnits 'userSpaceOnUse'
Verschiedene Variationen, clipPath mit implizierten clipPathUnits 'userSpaceOnUse' zu verwenden.

Das komplette Symbol ist zudem blass hinterlegt. Der korrekte Ausschnitt ist rot gerandet dargestellt und rechts daneben als schwarze Silhouette.

clipPath mit clipPathUnits 'objectBoundingBox'
Verschiedene Variationen, clipPath mit clipPathUnits 'objectBoundingBox'.

Das komplette Symbol ist zudem blass hinterlegt. Der korrekte Ausschnitt ist rot gerandet dargestellt und rechts daneben als schwarze Silhouette.

Gruppen, clipPath mit clipPathUnits 'objectBoundingBox'
Sofern der Ausschnitt auf ein Gruppierungselement wie g angewendet wird, wird aus den Kindelementen eine objectBoundingBox berechnet, so dass diese alle Kindelemente umschließt. Offenbar ist dies auch möglich, wenn die Kindelemente selbst gar keine eigene objectBoundingBox haben oder die Gruppe per use referenziert wird.

Verschiedene kompliziertere Variationen zu clipPath.
Links ist der Inhalt von clipPath ein use-Element, welches eine Gruppe mit zwei Kreisen referenziert.

Rechts wird clip-path="inherit" getestet, unten drunter sind die geerbten ausgeschnittenen Inhalte nebeneinander zum Vergleich angegeben.

Links unten wird innerhalb von clipPath ein weiterer clipPath referenziert, die Schnittfläche wird also als Ausschnitt verwendet.

Verschiedene offene Pfade und clipPath.
Nur wenn ein Pfad eine Fläche aufspannt, kann diese auch einen sichtbaren Ausschnitt definieren. Links sind zwei Beispiele zu sehen, die Flächen aufspannen, rechts zwei, bei denen keine Fläche aufgespannt wird. Folglich wird rechts nach der Maskierung nichts angezeigt (nur die teiltransparent angedeutete nicht maskierte Form).

Animierter Ausschnitt
Ein animierter clipPath in Form eines Kreises, dessen Position und Radius sich ändert, wird verwendet, um einen Ausschnitt auf eine Gruppe mit siebenzähliger Drehsymmetrie, aber ohne Spiegelachse anzuwenden.

Ein rot gerandeter Kreis gibt die Position des Ausschnittes an.

Als etwas umfangreicheres Beispiel ist rechts die Erstellung einer Vorlage für einen amerikanisch-patriotischen Aufkleber zu sehen:

Die Flagge der Vereinigten Staaten von Amerika wird als Vorlage verwendet, von der ein Ausschnitt darzustellen ist...

Die geographischen Umrisse der USA werden als Ausschnittspfad verwendet....

Beides zusammengenommen, innerhalb eines Elementes clipPath mit der Hilfe des Elementes use den Umriss referenziert und den Ausschneidepfad mit der Hilfe der Eigenschaft clip-path für die Gruppierung mit der Flagge angewendet, ergibt eine Vorlage für einen Aufkleber, zum Beispiel für ein amerikanisch-patriotisches Motorrad.

Mit clipPath lassen sich auch komplexe Überlagerungen erzeugen:

<?xml version="1.0" ?>
<svg viewBox="0,0 1,1"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  version="1.1" width="1000" height="1000">
<defs>
<g id="pentagram">
<g id="cone">
  <polyline id="triangle" 
    points="0,0 0,1 .5,1" 
    transform="translate(0,-1) 
    rotate(18)"/>
  <use xlink:href="#triangle" 
   transform="scale(-1,1)"/>
</g>
<use xlink:href="#cone" 
  transform="rotate(72)"/>
<use xlink:href="#cone" 
  transform="rotate(-72)"/>
<use xlink:href="#cone" 
  transform="rotate(144)"/>
<use xlink:href="#cone" 
  transform="rotate(-144)"/>
</g>
<clipPath id="starfoo">
  <use xlink:href="#pentagram" />
</clipPath>
</defs>

<g transform="translate(0.5,0.5)" 
  clip-path="url(#starfoo)" >
<circle r="1" fill="red"/>
<circle r="1" clip-path="url(#starfoo)" 
  fill="green" 
  transform="rotate(36)"/>
</g>
</svg>

W3C clipPath Referenz

Maskierung, mask und mask


SVG
1.1	1.7 (falscher Farbraum)	9	3.5 (falscher Farbraum)	3.2 (falscher Farbraum)	stark variierende Fehler in verschiedenen Versionen	7	?	?

Der resultierende alpha-Kanal (die Opazität) der Kindelemente des Elementes mask definiert eine Maske, welche angewendet wird auf jenes Element, welches die Maske mit der Eigenschaft mask referenziert.

Element mask

Der Inhalt von mask sind Gruppierungselemente oder graphische Elemente. Die Maskierung funktioniert so, dass diese Element in einem gedachten, nicht direkt dargestellten Bereich mit schwarz-transparentem Hintergrund gemalt werden. Die so gemalten Elemente stellen also die Bereiche dar, die ganz oder teilweise maskiert werden. Der RGBA-Wert wird nach einer Formel für den Filter feColorMatrix für 'luminance-to-alpha' in einen Grauwert konvertiert. Der Grauwert weiß entspricht komplett undurchsichtig und schwarz komplett durchsichtig.

mask wird nicht direkt dargestellt, sollte also in der Regel innerhalb vom Element defs notiert werden.

Eigenschaften vererben sich von den Elternelementen in das Element mask, nicht vom referenzierenden Element.

Attribut maskContentUnits

Mit dem Attribut maskContentUnits wird festgelegt, welches Koordinatensystem für den Maskeninhalt gilt. Mögliche Werte sind 'userSpaceOnUse' und 'objectBoundingBox', ersteres wird angenommen, wenn das Attribut nicht angegeben ist. Das Attribut ist animierbar.

Bei 'userSpaceOnUse' gilt das lokale Koordinatensystem des referenzierenden Elementes, bei 'objectBoundingBox' jenes Koordinatensystem, welches aus der das referenzierende Element umgebenden Box resultiert.

Attribut maskUnits

Mittels maskUnits wird festgelegt, welches Koordinatensystem für die folgenden Attribute x, y, width, height gilt. Mögliche Werte sind 'userSpaceOnUse' und 'objectBoundingBox', letzteres wird angenommen, wenn das Attribut nicht angegeben ist. Das Attribut ist animierbar.

Bei 'userSpaceOnUse' gilt das lokale Koordinatensystem des referenzierenden Elementes, bei 'objectBoundingBox' jenes Koordinatensystem, welches aus der das referenzierende Element umgebenden Box resultiert.

Attribute x und y und den Längen width und height

Mit den Attributen x und y und den Längen width und height werden Position (links oben) und Größe (Höhe und Breite) des Puffers der Maske angegeben. Alle Attribute sind animierbar. Nur was innerhalb des Puffers liegt, beziehungsweise in der Schniffläche mit einem möglichen Ausschnitt durch clip-path, dient auch als Maske.

Ist ein Attribut nicht angegeben, wird für das fehlende eine Voreinstellung angnommen, für x und y '-10%' und für width und height '120%'. Ein negativer Wert für width oder height ist ein Fehler und führt zum Abbruch der Darstellung.

Eigenschaft mask

Mit der Eigenschaft mask wird ein Element mask referenziert, um einen Ausschnitt festzulegen.

Mögliche Werte sind:

inherit: geerbt
none: Kein Ausschnit
Funktionale URI: Referenzierung eines Elementes mask in der Form url(#Ausschnitt), wobei 'Ausschnitt der Wert des Attributes id des zu referenzierden Elements mask ist. Wird etwas anderes referenziert, ist dies ein Fehler und führt zum Abbruch der Darstellung.

Der Initialwert ist 'none', die Eigenschaft wird nicht vererbt und ist animierbar.

Maskierung - Beispiele

Vorlage mit patriotischem Aufkleber mit Maske

Rechts ist ein Beispiel einer Vorlage zum patriotischen Aufkleber entsprechend dem Beispiel zu clipPath zu sehen. Es wird ein Farbverlauf als Maske verwendet, letztlich mit dem Ergebnis einer teilweisen Abschattung der Kombination von Karte und Flagge.

Nach Umwandlung der graphischen Objekte in Grauwerte einer Maske, gilt grob, je heller der Grauwert, desto mehr ist vom Objekt zu sehen, je dunkler, desto mehr vom Hintergrund.
Veranschaulichung der Maskierung
Hintergrund, Objekt, Maske und das Ergebnis der Maskierung werden übereinander getrennt dargestellt, um den Effekt der Maskierung verständlicher zu machen. Zum Vergleich ist ferner ein für dieses einfache Beispiel äquivalenter Farbverlauf angegeben.

Veranschaulichung der Maskierung (2)
Gut zu sehen ist auch eine Möglichkeit, mit einer geeigneten Maske ein Objekt aus dem Hintergrund teilweise oder auch ganz in den Vordergrund zu holen. Dies kombiniert mit Animationen ist eine Möglichkeit, scheinbar die Zeichenreihenfolge zu ändern.

Verwendung von maskUnits und maskContentUnits
Beispiele zu Verwendung von maskUnits 'userSpaceOnUse' (oben) und 'objectBoundingBox' (unten).

In beiden Fällen werden maskContentUnits 'userSpaceOnUse' verwendet und die Masken sind so gewählt, dass jeweils das gleiche Ergebnis erzielt wird.

Die Maske ist rechts dargestellt, das Objekt, auf welche sie angewendet wird, in der Mitte und das Ergebnis links.

Verwendung von maskUnits und maskContentUnits (2)
Beispiele zu Verwendung von maskUnits 'userSpaceOnUse' (oben) und 'objectBoundingBox' (unten).

In beiden Fällen werden maskContentUnits 'objectBoundingBox' verwendet und die Masken sind so gewählt, dass jeweils das gleiche Ergebnis erzielt wird.

Die Maske ist rechts dargestellt, das Objekt, auf welche sie angewendet wird, in der Mitte und das Ergebnis links.

Animierte Maske
Eine animierte Maske mit radialen Farbverlauf, dessen Position und Radius sich ändert, wird verwendet, um einen Ausschnitt auf eine Gruppe mit siebenzähliger Drehsymmetrie, aber ohne Spiegelachse anzuwenden.

W3C Mask Referenz

SVG: