<clipPath>

Baseline Widely available

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

Das <clipPath> SVG-Element definiert einen Clipping-Pfad, der durch das clip-path-Attribut verwendet wird.

Ein Clipping-Pfad beschränkt das Gebiet, auf das Farbe angewendet werden kann. Teile der Zeichnung, die außerhalb des vom Clipping-Pfad begrenzten Bereichs liegen, werden konzeptionell nicht gezeichnet.

Verwendungskontext

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

Attribute

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

DOM-Schnittstelle

Dieses Element implementiert die SVGClipPathElement-Schnittstelle.

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 Clipping-Pfad ist konzeptionell gleichbedeutend mit einem benutzerdefinierten Ansichtsfenster für das referenzierende Element. Daher beeinflusst es das Rendering eines Elements, aber nicht die inhärente Geometrie des Elements. Der Begrenzungsrahmen eines geklippten Elements (d.h. ein Element, das auf ein <clipPath>-Element über das clip-path-Attribut verweist, oder ein Kind des referenzierenden Elements) muss gleich bleiben, als ob es nicht geklippt wäre.

Standardmäßig werden pointer-events nicht auf geklippte Bereiche gesendet. Zum Beispiel wird ein Kreis mit einem Radius von 10, der auf einen Kreis mit einem Radius von 5 geklippt ist, keine "Klick"-Ereignisse außerhalb des kleineren Radius erhalten.

Spezifikationen

Specification
CSS Masking Module Level 1 # ClipPathElement