Clipping in CSS and SVG — The clip-path Property and <clipPath> Element

CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started.

Please note that the demos in this article may not work in your browser. You should check this compatibility table out for more information. You don't need to view the live demos to follow up with the article. Not all clipping features are implemented and some features may be buggy. The purpose of this article is to go over how clipping works in CSS and SVG, and serves as a reference for when these features are fully implemented. I'm also not including any vendor prefixes in the code samples here, but they are included in the live demos.

What is clipping?

Clipping is a graphical operation that allows you to fully or partially hide portions of an element. The clipped element can be any container or graphics element. The portions of the element that are shown or hidden are determined by a clipping path.

A clipping path defines a region where everything on the “inside” of this region is allowed to show through but everything on the outside is “clipped out” and does not appear on the canvas. This region is known as the clipping region. Any parts of the element that lie outside of a clipping region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants.

The clipped element can be any container or graphics element.

A clipping path is conceptually equivalent to a custom viewport for the element it applies to. It influences what parts of the element are rendered on the screen, but it does not affect the element’s inherent geometry—the element will affect the flow around it as it normally would, and every other element on the page will still see and treat the element as if it were still rectangular, even if it’s clipped to a non-rectangular shape. If you want to change the way the content around the element flows and have it respond to the defined shape of the clip path, you can use the CSS Shapes properties. If you want to learn more about how to do that, you can check the articles I wrote about this topic.

Clipping in CSS – The clip-path Property

The clip-path property is part of the CSS Masking Module. The clipping operation has been a part of SVG since 2000, and has moved into the CSS Masking module so that it now allows clipping HTML elements as well as SVG elements.

The clip-path property is used to specify a clipping path that is to be applied to an element. Using clip-path, you can apply an SVG <clipPath> to an element by referencing that path in the property value. You can also define a clipping path using one of the basic shapes defined in the CSS Shapes module. These shapes can be created using shape functions. The shape functions available are polygon(), circle(), inset() (used to define inset rectangles), and ellipse().

Applying a clipping path to an element using the clip-path property is very simple and straightforward:

/* Referencing an SVG clipPath */
.element {
	clip-path: url(#svgClipPathID);
}

/* Using a CSS basic shape function */
.element {
	clip-path: polygon(...); /* or one of the other shape functions */
}

For example, if we were to define a polygonal clipping path using the polygon() function, and then apply it to an image, the code would look like the following:

img {
	clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
}

The result of applying the above line of CSS to an image would look like the following:

View Live Demo

The basic shape functions allow us to create a limited number of shapes; the most complex of these shapes is a polygon. If you want to use a more complex shape that looks like more than just a group of connected straight lines, you can use the SVG <clipPath> element. As the name <clipPath> implies, you can clip to any arbitrary path. This means that you can use the <path> element to create any arbitrary path and use that as a clipping path.

In our second example, we’re going to define and use an SVG clipPath. The code for the clip path looks like the following:

<svg height="0" width="0">
	<defs>
		<clipPath id="svgPath">
			<path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
		</clipPath>
	</defs>
</svg>

And this is how the clipping path looks like; it is just a simple path with no fill and a black stroke.

We’ll be talking more about SVG <clipPath> in the next section. But for now, we’re just going to reference it and apply it to the image we have.

img {
	clip-path: url(#svgPath);
}

And the result would look like the following:

View Live Demo

Indeed, the <clipPath> element can contain any number of basic shapes (<rect>, <circle>, etc.), <path> elements, or even <text> elements.

If you specify a piece of <text> inside a <clipPath>, that text will be used as a clipping path. Whatever’s under the text will be visible “through” it, and anything outside the text area will not be rendered.

Note here that you can clip anything to the text. This opens a door for a lot of possibilities and effects. You can use animated images (such as GIFs) or even videos, and then clip them to some text of your choice. The sky is the limit here.

The following is an example of a piece of text used as a clipping path.

```

The cool thing about SVG `` is that it can be displayed using a custom font, just like HTML text can. In this example I'm using the [Vollkorn font](http://www.google.com/fonts/specimen/Vollkorn) from Google Web Fonts. I've set the width of the text to be the same as the width of the image, using the `textLength` attribute, and positioned the text using the `x` and `y` coordinates. Note here that the `x` and `y` coordinates determine the position of the bottom left corner of the text (where the bottom stands for the baseline of the text).

The result of applying the above text clip path to the image looks like so:


	


View Live Demo

And as we mentioned, you can also use multiple basic shapes inside ``. We'll dig into `` and its contents in the next section, so, for now, we'll keep it simple. In this example I'm using multiple ``s, each with a different size and position.


```

The image will show through these circles combined, but will not be rendered outside them.


	


View Live Demo

As we mentioned at the beginning of this article, you can apply clip paths using the `clip-path` property to SVG elements too. In all of the above examples, the clipping paths were applied to an HTML ``. In the following example, a clipping path is applied to the root `

```

Using `clip-path`, we're going to apply the `clipPath` to the `


View Live Demo

More examples applying a clipping path to an SVG element in the `` section below.

A Clipping Path's Reference Box

In addition to the clipping path itself, you can define a reference box in the `clip-path` property when the clipping path applied is a ``; that is, a clipping path created using one of the basic shape functions. The reference box is hence only specified for CSS shapes used as clip paths, not for SVG ``s. For an SVG ``, the reference box is the border box of an HTML element.

So a reference box is specified for a `` clip path. If the element being clipped is an HTML element, the reference box can be one of the four basic box model boxes: `margin-box`, `border-box`, `padding-box`, or `content-box`. Each of these is self-explanatory.

If the `` clip path is applied to an SVG element, the reference box can be set to one of three keyword values:

- fill-box – uses the object bounding box as the reference.
- stroke-box – uses the stroke bounding box as the reference.
- view-box – uses the uses the nearest SVG viewport as the reference box if no `viewBox` is specified. If a `viewBox` is indeed specified, then the coordinate system is established by the origin and dimensions specified by the `viewBox`.

If you set any of the CSS box model boxes as a reference box for an SVG element, the `fill-box` will be used. And if you use one of the SVG reference boxes on an HTML element, the `border-box` will be used.

```css 
.element {
    clip-path: polygon(...) padding-box;
}
```

If *only* a reference box is specified in the `clip-path` property—that is, no basic shape is defined—the browser uses the edges of the specified box, including any corner shaping (e.g. defined by the `border-radius` property), as clipping path.

For example, using the following snippet, the element will be clipped to the rounded corners specified by `border-radius`:

```css 
.el {
    clip-path: border-box;
    border-radius: 25%;
}
```

Note that at the time of writing of this article, specifying a reference box in the `clip-path` property doesn't work in Webkit because it's not yet implemented.

clip-path Notes: Stacking Contexts, Pointer Events and Animations

It is important to know that any value other than the default `none` for the `clip-path` property results in the creation of a stacking context on the element the same way the `opacity` property does.


    Any value other than the default `none` for the `clip-path` property results in the creation of a stacking context on the element.


Furthermore, according to the Masking specification, pointer events must not be dispatched on the clipped-out (non-visible) regions of a shape. This means that the element should not respond to pointer events outside the remaining visible area.

A clipping path can also be animated. If the clipping path used is an SVG ``, it can be animated by including an animation inside it (See next section for details). If the cipping path is a basic shape created using a basic shape function, it can be animated using CSS animations and transitions. For details on how to animate a shape created using a shape function, check out the [Animating CSS Shapes with CSS Animations and Transitions](http://sarasoueidan.com/blog/animating-css-shapes) article I wrote a while back.

Clipping in SVG – The  Element

In SVG, the `clipPath` element is used to define a clipping path to clip elements. If you don't want to use CSS to apply the clipping path to an element, you can do it in SVG using the `clip-path` presentation attribute.


Have you seen/read my "Styling and Animating Scalable Vector Graphics with CSS" slides? If not, you may want to have a look at them for more information about SVG presentation attributes and CSS properties used to style SVG elements. You can check them out here.



```

Contents Of a 

We mentioned earlier that an SVG `clipPath` can contain any number of basic shapes, arbitrary ``s, and/or `` elements. It can even contain more than that, and this is where it can get interesting.

The `` content can be descriptive (`