CSS, HTML und Javascript mit {stil}

SVG clipPath und CSS clip-path

CSS clip-path, SVG clipPathclipPathclip-path

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 – Masken mit clipPath sind nicht-destruktiv.

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.

Objekt + clipPath = clipped

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="cp2" clipPathUnits="objectBoundingBox">
            <circle cx="0.5" cy="0.5" r="0.35" />
        </clipPath>
    </defs>
    <path style="clip-path: url(#cp2)" … />
    oder als SVG-Attribut
    <path clip-path="url(#cp2)" … /> 
</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,0heightwidth0,01,1SVGSVGuserSpaceOnuseobjectBoundingBox

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=".48" cy=".58" r=".36" />
    </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="" />
Sweet Clips
<svg width="100%" height="100%" viewBox="0 0 720 324">
   <defs>
      <clipPath id="sweetclip">
         <text x="7" y="150" font-size="203" 
               transform="scale(1.126,0.8881)" 
               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. Die Maske hat eine harte Kante.
  • 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.

SVG mask funktioniert wie ein Alphakanal in Photoshop, clipPath wie der Beschneidungspfad mit der Photoshop-Feder.

In Inkscape liegt SVG mask unter »Objekt Maskierung«.

<svg width="100%" height="100%" viewBox="0 0 720 308">
   <defs id="defs3">
      <filter x="0" y="-0.13" width="1.1" height="1.25" 
              color-interpolation-filters="sRGB" id="blur">
              <feGaussianBlur stdDeviation="11" />
      </filter>
      <mask id="mask">
         <path d="m 690,168 a 313,123 …" 
              fill="silver" <!-- Maske mit Farbe -->
              filter="url(#blur)" /> <!-- Weiche Kontur -->
      </mask>
   </defs>
   <image xlink:href="sweet.jpg" width="720" height="308" 
         mask="url(#mask)" />
</svg>
<path d="m 690,168 …" fill="white" filter="url(#blur)" />

Je dunkler die Füllfarbe der Maske, desto matter wird das darunter liegende Bild angezeigt.

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.