clip-path
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.
Die clip-path
CSS Eigenschaft erstellt eine Clipping-Region, die festlegt, welcher Teil eines Elements angezeigt werden soll. Teile, die sich innerhalb der Region befinden, werden angezeigt, während die außerhalb verborgen bleiben.
Probieren Sie es aus
Syntax
/* Keyword values */
clip-path: none;
/* <clip-source> values */
clip-path: url(resources.svg#c1);
/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
"M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);
clip-path: rect(5px 5px 160px 145px round 20%);
clip-path: xywh(0 5px 100% 75% round 15% 0);
/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;
Die clip-path
Eigenschaft wird als ein oder eine Kombination der unten aufgeführten Werte angegeben.
Werte
<clip-source>
-
Ein
<url>
, das auf ein SVG<clipPath>
Element verweist. <basic-shape>
-
Eine Form, deren Größe und Position durch den
<geometry-box>
Wert definiert wird. Wenn keine Geometrie-Box angegeben ist, wird dieborder-box
als Referenzbox verwendet. Eine der folgenden Optionen:inset()
-
Definiert ein eingesetztes Rechteck.
circle()
-
Definiert einen Kreis unter Verwendung eines Radius und einer Position.
ellipse()
-
Definiert eine Ellipse unter Verwendung von zwei Radien und einer Position.
polygon()
-
Definiert ein Polygon unter Verwendung einer SVG-Füllregel und einer Reihe von Eckpunkten.
path()
-
Definiert eine Form unter Verwendung einer optionalen SVG-Füllregel und einer SVG-Pfaddefinition.
rect()
-
Definiert ein Rechteck, indem die angegebenen Abstände von den Rändern der Referenzbox verwendet werden.
shape()
-
Definiert eine Form unter Verwendung einer optionalen SVG-Füllregel und von Formbefehlen für Linien, Kurven und Bögen.
xywh()
-
Definiert ein Rechteck, indem die angegebenen Abstände von der Oberkante und der linken Kante der Referenzbox sowie die angegebene Breite und Höhe des Rechtecks verwendet werden.
<geometry-box>
-
Wenn in Kombination mit einer
<basic-shape>
angegeben, definiert dieser Wert die Referenzbox für die Grundform. Wenn er allein angegeben wird, verursacht er, dass die Kanten der angegebenen Box, einschließlich jeder Eckformgebung (wie z.B.border-radius
), der Clipping-Pfad werden. Die Geometrie-Box kann einen der folgenden Werte haben:margin-box
-
Verwendet die margin box als Referenzbox.
border-box
-
Verwendet die border box als Referenzbox.
padding-box
-
Verwendet die padding box als Referenzbox.
content-box
-
Verwendet die content box als Referenzbox.
fill-box
-
Verwendet die Objektbegrenzungsbox als Referenzbox.
stroke-box
-
Verwendet die Begrenzungsbox des Strichs als Referenzbox.
view-box
-
Verwendet den nächsten SVG-Ansichtsfenster als Referenzbox. Wenn ein
viewBox
Attribut für das Element, das den SVG-Ansichtsfenster erstellt, angegeben ist, wird die Referenzbox am Ursprung des vomviewBox
Attribut festgelegten Koordinatensystems positioniert und die Dimension der Größe der Referenzbox wird auf die Breite und Höhe desviewBox
Attributs eingestellt.
none
-
Es wird kein Clipping-Pfad erstellt.
Hinweis: Ein berechneter Wert, der nicht none
ist, führt zur Erstellung eines neuen stapelnden Kontexts, ebenso wie CSS opacity
für Werte außer 1
.
Formale Definition
Initialer Wert | none |
---|---|
Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen |
Vererbt | Nein |
Prozentwerte | refer to reference box when specified, otherwise border-box |
Berechneter Wert | wie angegeben, aber mit absoluten url Werten |
Animationstyp | ja, wie angegeben für basic-shape , ansonsten nein |
Formale Syntax
clip-path =
<clip-source> |
[ <basic-shape> || <geometry-box> ] |
none
<clip-source> =
<url>
<geometry-box> =
<shape-box> |
fill-box |
stroke-box |
view-box
<url> =
<url()> |
<src()>
<shape-box> =
<visual-box> |
margin-box
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
<visual-box> =
content-box |
padding-box |
border-box
Beispiele
Vergleich von HTML und SVG
html,
body {
height: 100%;
box-sizing: border-box;
background: #eee;
}
.grid {
width: 100%;
height: 100%;
display: flex;
font: 1em monospace;
}
.row {
display: flex;
flex: 1 auto;
flex-direction: row;
flex-wrap: wrap;
}
.col {
flex: 1 auto;
}
.cell {
margin: 0.5em;
padding: 0.5em;
background-color: #fff;
overflow: hidden;
text-align: center;
flex: 1;
}
.note {
background: #fff3d4;
padding: 1em;
margin: 0.5em 0.5em 0;
font: 0.8em sans-serif;
text-align: left;
white-space: nowrap;
}
.note + .row .cell {
margin-top: 0;
}
.container {
display: inline-block;
border: 1px dotted grey;
position: relative;
}
.container::before {
content: "margin";
position: absolute;
top: 2px;
left: 2px;
font: italic 0.6em sans-serif;
}
.view-box {
box-shadow:
1rem 1rem 0 #efefef inset,
-1rem -1rem 0 #efefef inset;
}
.container.view-box::after {
content: "view-box";
position: absolute;
left: 1.1rem;
top: 1.1rem;
font: italic 0.6em sans-serif;
}
.cell span {
display: block;
margin-bottom: 0.5em;
}
p {
font-family: sans-serif;
background: #000;
color: pink;
margin: 2em;
padding: 3em 1em;
border: 1em solid pink;
width: 6em;
}
.none {
clip-path: none;
}
.svg {
clip-path: url(#myPath);
}
.svg2 {
clip-path: path(
"M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z"
);
}
.shape1 {
clip-path: circle(25%);
}
.shape2 {
clip-path: circle(25% at 25% 25%);
}
.shape3 {
clip-path: fill-box circle(25% at 25% 25%);
}
.shape4 {
clip-path: stroke-box circle(25% at 25% 25%);
}
.shape5 {
clip-path: view-box circle(25% at 25% 25%);
}
.shape6 {
clip-path: margin-box circle(25% at 25% 25%);
}
.shape7 {
clip-path: border-box circle(25% at 25% 25%);
}
.shape8 {
clip-path: padding-box circle(25% at 25% 25%);
}
.shape9 {
clip-path: content-box circle(25% at 25% 25%);
}
.defs {
width: 0;
height: 0;
margin: 0;
}
pre {
margin-bottom: 0;
}
svg {
margin: 1em;
font-family: sans-serif;
width: 192px;
height: 192px;
}
svg rect {
stroke: pink;
stroke-width: 16px;
}
svg text {
fill: pink;
text-anchor: middle;
}
svg text.em {
font-style: italic;
}
Vollständiges Beispiel
HTML
<img id="clipped" src="mdn.svg" alt="MDN logo" />
<svg height="0" width="0">
<defs>
<clipPath id="cross">
<rect y="110" x="137" width="90" height="90" />
<rect x="0" y="110" width="90" height="90" />
<rect x="137" y="0" width="90" height="90" />
<rect x="0" y="0" width="90" height="90" />
</clipPath>
</defs>
</svg>
<select id="clipPath">
<option value="none">none</option>
<option value="circle(100px at 110px 100px)">circle</option>
<option value="url(#cross)" selected>cross</option>
<option value="inset(20px round 20px)">inset</option>
<option value="rect(10px 10px 180px 220px round 20px)">rect</option>
<option value="xywh(0 20% 90% 67% round 0 0 5% 5px)">xywh</option>
<option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
path
</option>
</select>
CSS
#clipped {
margin-bottom: 20px;
clip-path: url(#cross);
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Masking Module Level 1 # the-clip-path |
CSS Shapes Module Level 1 # supported-basic-shapes |
Browser-Kompatibilität
BCD tables only load in the browser