SVG clipPath und CSS clip-path

Ausschneiden und Freistellen

Per Vorgabe ist ein SVG-clipPath eine Schablone bzw. Maske mit einem durchsichtigen Bereich, durch den ein Ausschnitt des Objekts sichtbar ist, während der Rest vollkommen verborgen bleibt. Ein clipPath ist eine Maske mit einer harten Schwarz-Weiß-Kontur ohne weichen Übergang.

clipPath wird innerhalb eines defs-Elements definiert und wird erst sichtbar, wenn die Kontur durch clip-path: url(#id) auf ein Objekt angewendet wird.

In Inkscape liegt der clipPath unter »Objekt – Ausschneidepad«

<svg width="100%" height="100%" viewBox="0 0 115 115" 
	xmlns="http://www.w3.org/2000/svg">
	<clipPath id="cp">
		<path d="M 90.8,57.5 A 33.3,33.3 0 0 1 57.5,90.8 33.3,33.3 0 0 1 24.2,57.5 … Z"/>
	</clipPath>

	<path clip-path="url(#cp)" fill="gold" d="m 95.8,98.2 -30,-20.8 -6.1,36 z"/>
</svg>

SVG clipPath kann ein einfacher Pfad, eine Grundform wie rect, circle, ellipse, polygon oder text sein.

userSpaceOnUse und objectBoundingBox

Position und Abmessungen des clipPath sind entweder absolute oder relative Werte. Absolute Werte beziehen sich auf das gesamte SVG-Elemente, relative Werte beziehen sich auf die Grenzen des freigestellten Elements (objectBoundingBox). Dieses Konzept kennen wir auch von mask, pattern und linearGradient / radialGradient.

clipPathUnits legt das Koordinatensystem des clipPath fest.

userSpaceOnUse

die Koordinaten der SVG-Zeichnung

objectBoundingBox

die Koordinaten eines Objekts

Absolute Werte liegen innerhalb der Werte des aktuellen Koordinatensystems (Default: userSpaceOnUse). Relative Werte liegen zwischen 0 und 1 (objectBoundingBox).

<svg width="100%" height="100%" version="1.1" viewBox="0 0 400 200" >
	<clippath id="ellipse">
		<ellipse cx="120" cy="90" rx="100" ry="72" />
	</clippath>
	<rect width="400" height="200" fill="silver"/>
	<image style="clip-path:url(#ellipse)" x="5" y="5" 
			width="275" height="163" href="…"/>
</svg>

<svg width="100%" height="100%" version="1.1" viewBox="0 0 400 200">
	<clippath id="ellipse" clipPathUnits="objectBoundingBox">
		<ellipse transform="scale(0.00364, 0.00613)" cx="120" cy="90" rx="100" ry="72" />
	</clippath>
	<rect x="0" y="0" width="400" height="200" fill="silver"/>
	<image clip-path="url(#ellipse)" x="5" y="5" 
			width="275" height="163" href="…"/>
</svg>

Die einfachste Methode, einen absoluten Pfad in einen relativen Pfad umzuwandeln, ist das transform-Attribut mit scale(x,y). Wenn der Pfad innerhalb eines Bereichs von 275 x 165 liegt, ist der Skalierfaktor (1/275, 1/163), in diesem Beispiel also transform="scale(0.00364, 0.00613)".

Bitmap-Bilder mit clipPath

clipPath beschneidet Bitmaps (jpg, png, gif) genauso wie grafische Elemente. Damit können wir Motive in Bitmap-Bildern anhand eines Pfades freistellen wie in Photoshop und Text mit Bitmap-Bildern unterlegen.

<defs>
    <clipPath id="toy">
        <path d="m 166,90 1,12 -6.8,-3.38 -5.4, … z"  />
    </clipPath>
</defs>
<image x="0" y="0" width="600" height="400" clip-path="url(#toy)" xlink:href="" />

SVG clipPath auf Text

<svg width="100%" height="100%" viewBox="0 0 720 324">
   <defs>
      <clipPath id="sweetclip">
         <text font-size="203" 
               font-family="pradaregular">
         <tspan x="7" y="150">Sweet </tspan>
         <tspan x="7" y="322">Clips</tspan>
         </text>
      </clipPath>
   </defs>
   <image xlink:href="sweet.jpg" 
          x="0" y="0" 
          width="720" height="308" 
          clip-path="url(#sweetclip)" />
</svg>

SVG mask

SVG bietet zwei Arten von Schablonen oder Masken an:

• clipPath bildet eine Kontur. Innerhalb der Kontur ist der darunter liegende Bereich sichtbar, außerhalb der Kontur vollkommen ausgeblendet. Bei einem clipPath spielt nur die Kontur eine Rolle, fill und stroke werden ignoriert..
• SVG mask baut semitransparente Masken mit einem weichen Übergang zwischen dem sichtbaren und dem ausgeblendeten Bereich. Der offene Bereich der Maske kann mit Farbe, Verläufen oder Bitmaps gefüllt sein. Je dunkler die Füllung, desto stärker deckt sie das das Bild im sichtbare Ausschnitt.

Attribute für clipPath und mask

Sowohl clipPath- als auch mask-Objekte können transformiert (skaliert, bewegt, rotiert) werden. Die Werte für Transformationen sind dieselben wie bei Transformationen von sichtbaren Objekten.