CSS, HTML & Javascript mit {stil}

SVG clipPath und CSS clip-path

SVG clip path: Freistellen oder Beschneiden von SVG-Elementen

SVG realisiert Clipping (Freistellen) mittels clipPath. clipPath verbirgt Teile eines Bildes, einer Zeichnung oder Grafik vollständig ohne Bereiche der Bitmap oder der Grafik zu löschen. Freisteller mit clipPath sind nicht-destruktiv.

23-02-02 SITEMAP

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 1000 367">
    <defs>
        <clipPath id="cp" clipPathUnits="objectBoundingBox">
            <circle cx="0.5" cy="0.5" r="0.35" />
        </clipPath>
    </defs>
    <path style="clip-path: url(#cp)" … />
    oder als SVG-Attribut
    <path clip-path="url(#cp)" … /> 
</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
0,0 height width 0,0 1,1 SVG SVG userSpaceOnuse objectBoundingBox

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

<defs>
    <clipPath id="c1">
        <!-- absolute Werte -->
        <circle cx="210" cy="170" r="100" />
    </clipPath>
    <clipPath id="c2" clipPathUnits="objectBoundingBox">
        <!-- relative Werte -->
        <circle cx=".5" cy=".5" r=".5" />
    </clipPath>
</defs>

<path style="fill:yellow;clip-path:url(#c1)" d="m 94.92, … />
<circle style="fill:gold;clip-path:url(#c1)" cx="220" … />
<rect style="fill:salmon;clip-path:url(#c1)" width="143.4" … />

<g style="clip-path:url(#c2)">
   <path style="fill:yellow" d="M 644.3, … />
   <circle style="fill:gold" cx="720" … />
   <rect style="fill:salmon" width="143.4" …  />
</g>

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 Text mit Bild als Hintergrund Sweet Clips 
<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.

Objekt + clipPath = clipped