<clipPath>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

Das <clipPath> SVG-Element definiert einen Beschneidungspfad, der von der clip-path-Eigenschaft verwendet wird.

Ein Beschneidungspfad begrenzt den Bereich, auf den Farbe angewendet werden kann. Konzeptionell werden Teile der Zeichnung, die außerhalb des durch den Beschneidungspfad begrenzten Bereichs liegen, nicht gezeichnet.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
    id="heart"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

css

/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

Ein Beschneidungspfad ist konzeptionell äquivalent zu einem benutzerdefinierten Ansichtsfenster für das referenzierte Element. Somit beeinflusst es die Renderung eines Elements, aber nicht die eigene Geometrie des Elements. Die Begrenzungsbox eines beschnittenen Elements (das heißt, ein Element, das auf ein <clipPath>-Element über eine clip-path-Eigenschaft verweist oder ein Kind des referenzierenden Elements) muss gleich bleiben, als wäre es nicht beschnitten.

Standardmäßig werden pointer-events in beschnittenen Regionen nicht abgefangen. Beispielsweise wird ein Kreis mit einem Radius von 10, der auf einen Kreis mit einem Radius von 5 beschnitten ist, keine "Klick"-Ereignisse außerhalb des kleineren Radius erhalten.

Attribute

clipPathUnits: Definiert das Koordinatensystem für den Inhalt des <clipPath>-Elements. Werttyp: userSpaceOnUse | objectBoundingBox; Standardwert: userSpaceOnUse; Animierbar: ja

Nutzungskontext

Kategorien	Keine
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente `<text>`, `<use>`

Spezifikationen

Specification
CSS Masking Module Level 1 # ClipPathElement