clip-path

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 AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
clip-pathChrome Vollständige Unterstützung 55
Vollständige Unterstützung 55
Vollständige Unterstützung 23
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Hinweise
Vollständige Unterstützung 12
Hinweise
Hinweise Edge only supports clip paths defined by url().
Firefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung 10
Hinweise
Vollständige Unterstützung 10
Hinweise
Hinweise Internet Explorer only supports clip paths defined by url().
Opera Vollständige Unterstützung 42
Vollständige Unterstützung 42
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Vollständige Unterstützung 9.1
Vollständige Unterstützung 9.1
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 55
Vollständige Unterstützung 55
Vollständige Unterstützung ≤37
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 55
Vollständige Unterstützung 55
Vollständige Unterstützung 25
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 42
Vollständige Unterstützung 42
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari iOS Vollständige Unterstützung 9.3
Vollständige Unterstützung 9.3
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 6.0
Vollständige Unterstützung 6.0
Vollständige Unterstützung 1.5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
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 55Firefox 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
<basic-shape>Chrome Vollständige Unterstützung 23Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 54
Vollständige Unterstützung 54
Keine Unterstützung 47 — 54
Deaktiviert
Deaktiviert From version 47 until version 54 (exclusive): 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 15Safari Vollständige Unterstützung 6.1WebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 25Firefox Android Vollständige Unterstützung 54
Vollständige Unterstützung 54
Keine Unterstützung 47 — 54
Deaktiviert
Deaktiviert From version 47 until version 54 (exclusive): 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 14Safari iOS Vollständige Unterstützung 6.1Samsung Internet Android Vollständige Unterstützung 1.5
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 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 Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
On HTML elementsChrome Vollständige Unterstützung 23Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 3.5IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6.1WebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 25Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 6.1Samsung Internet Android Vollständige Unterstützung 1.5
path()Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 71
Vollständige Unterstützung 71
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 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
On SVG elementsChrome Vollständige Unterstützung 23Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 52IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6.1WebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 25Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 6.1Samsung Internet Android Vollständige Unterstützung 1.5

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
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