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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende Unterstützung
Experimentell
Chrome Vollständige Unterstützung 55
Vollständige Unterstützung 55
Vollständige Unterstützung 24
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 3.5IE Keine Unterstützung NeinOpera Vollständige Unterstützung 42Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 55Chrome Android Vollständige Unterstützung 55
Vollständige Unterstützung 55
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 42Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 6.0
Vollständige Unterstützung 6.0
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
On SVG elementsChrome Vollständige Unterstützung 55Edge Vollständige Unterstützung 15
Hinweise
Vollständige Unterstützung 15
Hinweise
Hinweise Edge only supports clip paths defined by url().
Firefox Vollständige Unterstützung 52IE Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Internet Explorer only supports clip paths defined by url().
Opera Vollständige Unterstützung 42Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 55Chrome Android Vollständige Unterstützung 55Edge Mobile Vollständige Unterstützung 12
Hinweise
Vollständige Unterstützung 12
Hinweise
Hinweise Edge only supports clip paths defined by url().
Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 42Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 6.0
<basic-shape>Chrome Vollständige Unterstützung 55Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 54
Vollständige Unterstützung 54
Keine Unterstützung 47 — ?
Deaktiviert
Deaktiviert From version 47: this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 42Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 55Chrome Android Vollständige Unterstützung 55Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 54
Vollständige Unterstützung 54
Keine Unterstützung 47 — ?
Deaktiviert
Deaktiviert From version 47: this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 42Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 6.0
path()Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 63
Deaktiviert
Vollständige Unterstützung 63
Deaktiviert
Deaktiviert From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 63
Deaktiviert
Vollständige Unterstützung 63
Deaktiviert
Deaktiviert From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
AnimationsChrome Vollständige Unterstützung 55Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 49IE Keine Unterstützung NeinOpera Vollständige Unterstützung 42Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 55Chrome Android Vollständige Unterstützung 55Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 49Opera Android Vollständige Unterstützung 42Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 6.0
fill-box and stroke-boxChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 51
Hinweise
Vollständige Unterstützung 51
Hinweise
Hinweise This value was supported before Firefox 51, but as an alias to border-box.
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 51
Hinweise
Vollständige Unterstützung 51
Hinweise
Hinweise This value was supported before Firefox 51, but as an alias to border-box.
Opera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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