clip-path

Experimental

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 (en-US) Elements und allen Grafikelementen
VererbtNein
Prozentwerterefer to reference box when specified, otherwise border-box
Berechneter Wertwie angegeben, aber mit absoluten url Werten
Animationstypja, wie angegeben f├╝r basic-shape, ansonsten nein

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 (en-US) 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()> | <path()>
<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> ]# )
<path()> = path( [ <fill-rule>, ]? <string> )
<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

BCD tables only load in the browser

Siehe auch