<clipPath>

Verwendungskontext

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%;
}

<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>

/* 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 Schnittpfad ist konzeptionell äquivalent zu einem benutzerdefinierten Ansichtsfenster für das referenzierende Element. Daher beeinflusst es das Rendering eines Elements, jedoch nicht die inhärente Geometrie des Elements. Der Begrenzungsrahmen eines beschnittenen Elements (d.h. eines Elements, das ein <clipPath> Element über eine clip-path Eigenschaft referenziert, oder ein Kind des referenzierenden Elements) muss gleich bleiben, als ob es nicht beschnitten wäre.

Standardmäßig werden pointer-events nicht auf beschnittene Bereiche verteilt. Zum Beispiel 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 empfangen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <mask>
• Die CSS-Eigenschaft clip-path
• Einführung in CSS-Clipping
• CSS-Masking Modul