Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Übersicht

Die clip-path CSS Eigenschaft verhindert, dass ein Teil eines Elements angezeigt wird, indem es einen Schnittbereich definiert, der angezeigt werden soll, d. h. nur ein bestimmter Bereich des Elements wird angezeigt.

Der Schnittbereich ist ein Pfad, der als URL, die eine Inline- oder externe SVG-Grafik oder eine Formfunktion wie circle() definiert wird. Die clip-path Eigenschaft ersetzt die nun als veraltet geltende clip Eigenschaft.

Initialwertnone
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen
VererbtNein
Prozentwerterefer to reference box when specified, otherwise border-box
Medienvisuell
Berechneter Wertwie angegeben, aber mit absoluten url Werten
Animationstypja, wie angegeben für basic-shape, ansonsten nein
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
clip-path: none;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* Bildwerte */
clip-path: url(resources.svg#c1);
clip-path: linear-gradient(blue, transparent);

/* Geometriewerte */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Globale Werte */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

Werte

<clip-source>
Repräsentiert eine URL, die ein Schnittpfad Element referenziert.
<basic-shape>
Eine Grundform Funktion, wie sie in der CSS Shapes Specifikation definiert wird. Eine Grundform macht Gebrauch von der angegebenen Referenzbox, um die Grundform zu skalieren und positionieren. Falls keine Referenzbox angegeben wurde, wird border-box als Referenzbox verwendet.
<geometry-box>

Falls in Kombination mit <basic-shape> angegeben, gibt dieser Wert die Referenzbox für die Grundform an. Falls alleine angegeben, werden die Ränder der angegebenen Box inklusive etwaiger Randformen (z. B. definiert durch border-radius) als Schnittpfad verwendet.

fill-box

Verwendet den Objektrahmen als Referenzbox.

stroke-box

Verwendet die Strichrahmenbox als Referenzbox.

view-box

Verwendet den nähesten SVG-Viewport als Referenzbox. Falls ein viewBox Attribut für das den SVG-Viewport erstellende Element angegeben wurde, wird die Referenzbox am Ursprung des Koordinatensystems positioniert, das durch das viewBox Attribut erzeugt wird und die Ausmaße der Referenzbox werden auf die Breite und Höhe des viewBox Attributs gesetzt.

none
Es wird kein Schnittpfad erzeugt.

Formale Syntax

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

wobei
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

wobei
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

wobei
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Beispiele

/* Inline-SVG  */
.target {
  clip-path: url(#c1);
}

/* externes SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* Kreis */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

Spezifikationen

Spezifikation Status Kommentar
CSS Masking Module Level 1
Die Definition von 'clip-path' in dieser Spezifikation.
Anwärter Empfehlung Erweitert die Anwendung auf HTML Elemente
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Die Definition von 'clip-path' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition (gilt nur für SVG Elemente)

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung ? ? ? ? ?
HTML Elemente 24 with prefix 3.5 (1.9.1) (nur URL Werte) ? ? ?
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung ? ? ? ? ?
HTML Elemente ? 1.0 (1.9.1) ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sebastianz
Zuletzt aktualisiert von: Sebastianz,