<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 beschränkt den Bereich, auf den Farbe angewendet werden kann. Konzeptuell werden Teile der Zeichnung, die außerhalb des Bereichs liegen, der durch den Beschneidungspfad begrenzt ist, nicht gezeichnet.

Beispiel

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 konzeptuell äquivalent zu einem benutzerdefinierten Viewport für das referenzierende Element. Daher beeinflusst er das Rendering eines Elements, aber nicht die eigene Geometrie des Elements. Der Begrenzungsrahmen eines beschnittenen Elements (das heißt, eines Elements, das ein <clipPath> Element über eine clip-path Eigenschaft referenziert, oder ein Kind des referenzierenden Elements) muss derselbe bleiben, als ob es nicht beschnitten wäre.

Standardmäßig werden keine pointer-events auf beschnittene Bereiche übertragen. Beispielsweise erhält ein Kreis mit einem Radius von 10, der auf einen Kreis mit einem Radius von 5 zugeschnitten ist, keine "Klick"-Ereignisse außerhalb des kleineren Radius.

Attribute

clipPathUnits

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

Nutzungskontext

KategorienKeine
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente
Formelemente
<text>, <use>

Spezifikationen

Specification
CSS Masking Module Level 1
# ClipPathElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
clipPath
clipPathUnits
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Verwandte Themen