Clipping with Clippath and SVG

What it is Clippath

The Clippath is a CSS property to allow specific a region of an element to show or hide other parts. The portions of the element that are shown or hidden are determined by a clipping path.

It works with any element, like a divs, images or even texts.

Sintaxis

The variety of shapes to create is infinite, we can do circles, rectangles, or polygon areas.

.clip-path-element {
clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)
}
.clip-path-element {
clip-path: inset(from top, from right, from bottom, from left, rounded-x, rounded-y)
}
.clip-path-element {
clip-path: polygon(a, bunch, of, points)
}
.clip-path-element {
clip-path: circle(radius at x, y)
}
.clip-path-element {
clip-path: ellipse(radius-x, radius-y at x, y)
}

Compatibility

The clippath property don’t work on all browsers, below we can see the complete list of compatible browsers or visit this link: http://caniuse.com/#feat=css-clip-path

In our experience, thats works perfectly with Chrome, to make work in Firefox, additional steps are needed.

Editors

Some editors can help us to acelerate the process to calculate the correct values, here some online editors:

Bennettfeely.com

http://bennettfeely.com/clippy/

Cssplant.com

http://cssplant.com/clip-path-generator

How work with Firefox

The compatibility with Firefox is not perfect, we need the support from a external SVG file. The first step is add the following line on the CSS class, under the clippath like this:

.clip-path-element{
width: 370px;
height: 397px;
-moz-clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);
clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);
-webkit-clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);
clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);
}

Firefox code

-moz-clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);
clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);

Chrome code

-webkit-clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);
clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);

We need both codes at the same time.

Creation of SVG with Illustrator

A quick way to create a SVG is with the help of Illustrator. The process is simple, only is needed draw the same shape done with the editors and obtain the code with the export options and choose SVG file, after we can see a button with the SVG code.

As a result is a code like this:

We should save the code on a file. Take care about the ID, the clippath ID (absolute_path on this case) should be the same that named on CSS clip-path property.