Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<clipPath>

Baseline Widely available

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

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

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

Verwendungskontext

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

Attribute

clipPathUnits

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

DOM-Schnittstelle

Dieses Element implementiert die SVGClipPathElement Schnittstelle.

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

Standardmäßig werden pointer-events nicht in geschnittenen Bereichen ausgelöst. Zum Beispiel wird ein Kreis mit einem Radius von 10, der auf einen Kreis mit einem Radius von 5 geschnitten wird, keine "Klick"-Ereignisse außerhalb des kleineren Radius empfangen.

Spezifikationen

Specification
CSS Masking Module Level 1
# ClipPathElement

Browser-Kompatibilität

Siehe auch