clip-path
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
Try it
Syntax
/* Keyword values */ clip-path: none; /* values */ clip-path: url(resources.svg#c1); /* 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; /* values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: ellipse(50px 60px at 0 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" ); /* 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;
The clip-path property is specified as one or a combination of the values listed below.
Values
A shape whose size and position is defined by the value. If no geometry box is specified, the border-box will be used as the reference box. One of:
Defines an inset rectangle.
Defines a circle using a radius and a position.
Defines an ellipse using two radii and a position.
Defines a polygon using an SVG filling rule and a set of vertices.
Defines a shape using an optional SVG filling rule and an SVG path definition.
If specified in combination with a , this value defines the reference box for the basic shape. If specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius ), to be the clipping path. The geometry box can be one of the following values:
Uses the margin box as the reference box.
Uses the border box as the reference box.
Uses the padding box as the reference box.
Uses the content box as the reference box.
Uses the object bounding box as the reference box.
Uses the stroke bounding box as the reference box.
Uses the nearest SVG viewport as the reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the size of the reference box is set to the width and height values of the viewBox attribute.
No clipping path is created.
Note: A computed value other than none results in the creation of a new stacking context the same way that CSS opacity does for values other than 1 .
Formal definition
| Initial value | none |
|---|---|
| Applies to | all elements; In SVG, it applies to container elements excluding the element and all graphics elements |
| Inherited | no |
| Percentages | refer to reference box when specified, otherwise border-box |
| Computed value | as specified, but with url() values made absolute |
| Animation type | yes, as specified for , otherwise no |
Formal syntax
clip-path =
|
[ || ] |
none
=
=
|
fill-box |
stroke-box |
view-box
=
url( * ) |
src( * )
=
|
margin-box
=
border-box |
padding-box |
content-box
Examples
Comparison of HTML and SVG
svg class="defs"> defs> clipPath id="myPath" clipPathUnits="objectBoundingBox"> path d="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" /> clipPath> defs> svg> div class="grid"> div class="col"> div class="note">clip-path: nonediv> div class="row"> div class="cell"> span>HTMLspan> div class="container"> p class="none">I LOVEbr />em>clippingem>p> div> div> div class="cell"> span>SVGspan> div class="container view-box"> svg viewBox="0 0 192 192"> g class="none"> rect x="24" y="24" width="144" height="144" /> text x="96" y="91">I LOVEtext> text x="96" y="109" class="em">clippingtext> g> svg> div> div> div> div class="note"> clip-path: url(#myPath)br />br /> Assuming the following clipPath definition: pre> <svg> <clipPath clipPathUnits="objectBoundingBox"> <path d="M0.5,1 C 0.5,1,0,0.7,0,0.3 A 0.25,0.25,1,1,1,0.5,0.3 A 0.25,0.25,1,1,1,1,0.3 C 1,0.7,0.5,1,0.5,1 Z" /> </clipPath> </svg>pre > div> div class="row"> div class="cell"> span>HTMLspan> div class="container"> p class="svg">I LOVEbr />em>clippingem>p> div> div> div class="cell"> span>SVGspan> div class="container view-box"> svg viewBox="0 0 192 192"> g class="svg"> rect x="24" y="24" width="144" height="144" /> text x="96" y="91">I LOVEtext> text x="96" y="109" class="em">clippingtext> g> svg> div> div> div> div class="note"> 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') div> div class="row"> div class="cell"> span>HTMLspan> div class="container"> p class="svg2">I LOVEbr />em>clippingem>p> div> div> div class="cell"> span>SVGspan> div class="container view-box"> svg viewBox="0 0 192 192"> g class="svg2"> rect x="24" y="24" width="144" height="144" /> text x="96" y="91">I LOVEtext> text x="96" y="109" class="em">clippingtext> g> svg> div> div> div> div class="note">clip-path: circle(25%)div> div class="row"> div class="cell"> span>HTMLspan> div class="container"> p class="shape1">I LOVEbr />em>clippingem>p> div> div> div class="cell"> span>SVGspan> div class="container view-box"> svg viewBox="0 0 192 192"> g class="shape1"> rect x="24" y="24" width="144" height="144" /> text x="96" y="91">I LOVEtext> text x="96" y="109" class="em">clippingtext> g> svg> div> div> div> div class="note">clip-path: circle(25% at 25% 25%)div> div class="row"> div class="cell"> span>HTMLspan> div class="container"> p class="shape2">I LOVEbr />em>clippingem>p> div> div> div class="cell"> span>SVGspan> div class="container view-box"> svg viewBox="0 0 192 192"> g class="shape2"> rect x="24" y="24" width="144" height="144" /> text x="96" y="91">I LOVEtext> text x="96" y="109" class="em">clippingtext> g> svg> div> div> div> div class="note">clip-path: fill-box circle(25% at 25% 25%)div> div class="row"> div class="cell"> span>HTMLspan> div class="container"> p class="shape3">I LOVEbr />em>clippingem>p> div> div> div class="cell"> span>SVGspan> div class="container view-box"> svg viewBox="0 0 192 192"> g class="shape3"> rect x="24" y="24" width="144" height="144" /> text x="96" y="91">I LOVEtext> text x="96" y="109" class="em">clippingtext> g> svg> div> div> div> div class="note">clip-path: stroke-box circle(25% at 25% 25%)div> div class="row"> div class="cell"> span>HTMLspan> div class="container"> p class="shape4">I LOVEbr />em>clippingem>p> div> div> div class="cell"> span>SVGspan> div class="container view-box"> svg viewBox="0 0 192 192"> g class="shape4"> rect x="24" y="24" width="144" height="144" /> text x="96" y="91">I LOVEtext> text x="96" y="109" class="em">clippingtext> g> svg> div> div> div> div class="note">clip-path: view-box circle(25% at 25% 25%)div> div class="row"> div class="cell"> span>HTMLspan> div class="container"> p class="shape5">I LOVEbr />em>clippingem>p> div> div> div class="cell"> span>SVGspan> div class="container view-box"> svg viewBox="0 0 192 192"> g class="shape5"> rect x="24" y="24" width="144" height="144" /> text x