Beschneiden mit clipPath, Ausblenden mit mask

Teil 3: Grafische Effekte · Kapitel 8 von 12 · Aktualisiert am 10. Oktober 2026 · 3 Minuten Lesezeit

Beide Techniken zeigen nur einen Teil einer Grafik. Der Unterschied liegt in der Kante: Ein Clip-Pfad schneidet hart wie eine Schere, eine Maske kann weich ausblenden.

clipPath: die Schere

Ein <clipPath> enthält eine oder mehrere Formen. Alles, was innerhalb dieser Formen liegt, bleibt sichtbar, alles andere wird weggeschnitten. Farben und Strichstärken der Clip-Formen spielen keine Rolle, nur ihre Geometrie zählt. Angewendet wird der Clip-Pfad über das Attribut clip-path="url(#id)" an dem Element, das beschnitten werden soll.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 140" width="320" height="140">
  <defs>
    <clipPath id="cl-form">
      <circle cx="100" cy="70" r="55"/>
      <rect x="160" y="25" width="120" height="90" rx="10"/>
    </clipPath>
  </defs>
  <g clip-path="url(#cl-form)">
    <rect width="320" height="140" fill="#cfdcf7"/>
    <path d="M0 10 H320 M0 30 H320 M0 50 H320 M0 70 H320 M0 90 H320 M0 110 H320 M0 130 H320" stroke="#1f5fd1" stroke-width="9"/>
  </g>
  <circle cx="100" cy="70" r="55" fill="none" stroke="#c2410c" stroke-dasharray="4 4"/>
  <rect x="160" y="25" width="120" height="90" rx="10" fill="none" stroke="#c2410c" stroke-dasharray="4 4"/>
</svg>

Mehrere Formen im Clip-Pfad ergeben zusammen eine Fläche, sie werden also vereinigt. Auch Text kann als Clip dienen. Dann scheint das Bild oder Muster dahinter nur durch die Buchstaben hindurch, ein Effekt, der sich für Überschriften auf Plakaten anbietet.

Wie bei Verläufen gibt es eine Wahl des Bezugssystems: Mit clipPathUnits="objectBoundingBox" gelten Werte von 0 bis 1 relativ zur beschnittenen Form. Dann passt ein einmal definierter Clip auf Elemente jeder Größe.

mask: der Dimmer

Eine <mask> arbeitet nicht mit Geometrie, sondern mit Helligkeit. Was in der Maske weiß ist, bleibt voll sichtbar. Was schwarz ist, verschwindet. Grautöne dazwischen machen das Element teilweise durchsichtig. Deshalb lassen sich mit Masken weiche Übergänge bauen, etwa eine Grafik, die nach unten ausläuft.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 140" width="320" height="140">
  <defs>
    <linearGradient id="ms-verlauf" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0.15" stop-color="#fff"/>
      <stop offset="1" stop-color="#000"/>
    </linearGradient>
    <mask id="ms-weich">
      <rect width="320" height="140" fill="url(#ms-verlauf)"/>
    </mask>
  </defs>
  <g mask="url(#ms-weich)">
    <rect width="320" height="140" fill="#1f5fd1"/>
    <path d="M10 0 V140 M40 0 V140 M70 0 V140 M100 0 V140 M130 0 V140 M160 0 V140 M190 0 V140 M220 0 V140 M250 0 V140 M280 0 V140 M310 0 V140" stroke="#ffe3d3" stroke-width="8"/>
  </g>
</svg>

Das funktioniert, weil Masken standardmäßig die Luminanz auswerten, also die wahrgenommene Helligkeit jeder Farbe. SVG 2 und CSS kennen zusätzlich den Modus mask-type: alpha, bei dem nur die Deckkraft zählt und die Farbe egal ist.

Masken für Löcher

Ein häufiger Anwendungsfall ist eine Form mit Aussparung. Du legst in die Maske ein weißes Rechteck über die ganze Fläche und zeichnest darauf schwarz die Bereiche, die durchsichtig werden sollen. Im Beispiel entsteht so ein Ring mit einem ausgesparten Schlitz, und dahinter liegende Elemente bleiben an diesen Stellen sichtbar.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 140" width="220" height="154">
  <defs>
    <mask id="ms-loch">
      <rect width="200" height="140" fill="#fff"/>
      <circle cx="100" cy="70" r="30" fill="#000"/>
      <rect x="92" y="0" width="16" height="70" fill="#000"/>
    </mask>
  </defs>
  <circle cx="100" cy="70" r="60" fill="#c2410c" mask="url(#ms-loch)"/>
</svg>

Was wann passt

Für einfache Ausschnitte, etwa ein rundes Profilbild, ist der Clip-Pfad die bessere Wahl. Masken lohnen sich, sobald Übergänge weich sein sollen oder ein Bild selbst als Maske dienen soll.

Noch weiter gehen Filter: Sie verändern nicht nur die Sichtbarkeit, sondern die Pixel selbst, mit Unschärfe, Verzerrung oder Licht.