Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  

15 Masken

15.1 Clipping - das clipPath-Element
15.2 Masking - das mask-Element

Mit Clipping und Masking bezeichnet man die Möglichkeit, eine Schablone mit transparenten (oder halbtransparenten) Aussparungen zu erzeugen, die dann auf ein SVG Objekt gelegt werden kann. Daraus resultierend werden nur die Bereiche des SVG Objekts angezeigt, die unter den transparenten (oder halbtransprarenten) Bereichen der Schablone liegen.

SVG unterstützt folgende Clipping/Masking Eigenschaften:

  • clipping paths - Clip-Pfade verwenden eine beliebige Kombination aus Pfaden, Texten oder geometrischen Grundformen um eine transparente Region innerhalb eines rechteckigen Canvas zu bestimmen (die Schablone).
    Wenn ein solcher Clip-Pfad von einem Objekt referenziert wird, dann wird nur der Bereich des Objekts dargestellt, der unter der transparenten Region des Clip-Pfades liegt.
  • masks - Masken sind Clip-Pfaden sehr ähnlich. Der Unterschied besteht darin, dass in Masken auch halbtransparente Elemente innerhalb der Kombination (der Schablone) verwendet werden können.
    Wenn eine solche Maske von einem Objekt referenziert wird, dann wird der Bereich der Objekts dargestellt, der unter den transparenten und halbtransparenten Pixeln der Maske liegt.

Der grundlegende Unterschied zwischen Clipping und Masking besteht also darin, dass die Kombination beim Clipping nur aus transparenten Pixeln und/oder nicht transparenten Pixeln besteht, wohingegen beim Masking die Kombination als Bild angesehen wird, bei der jedes Pixel einen eigenen Transparenzwert besitzt. Dabei kann dieser Transparenzwert alle Werte von durchsichtig bis undurchsichtig (von 0 bis 1) erhalten.




index  |  14.22  <<  |  Kapitel 15  |  >>  15.1   Clipping - das clipPath-Element