Cross-browser CSS3 Clip-path Polyfill - jQuery ClipPath

The ClipPath jQuery plugin generates a SVG fallback for CSS3 clip-path property to make it works on different browsers (Chrome, Firefox, Safari and Opera). The plugin currently supports clipping an element to a polygon shape.

See also:

• Simple Path Clipping Plugin with jQuery - Clip Path Polygon

Install it via package managers:

# Yarn
$ yarn add clip-path

# NPM
$ npm install clip-path

How to use it:

1. Download and put the ClipPath plugin's script after jQuery library.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/clippath.min.js"></script>

2. Call the function on the target element and specify the clipping region that defines what part of your element should be displayed.

$('.element').ClipPath('5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%');

3. You can also specify the clipping region in the 'data-clip' attribute as these:

<div class="element" data-clip="5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%">
</div>

$('.element').ClipPath();

4. If you want to implement the clip-path polyfill in pure JavaScript.

// ClipPath(selector, polygon_value)
ClipPath('.element', '5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%')

Change log:

2017-10-30

• Fix for the case where many elements are used. Before the fix, one and the same mask was applied to all elements in [NodeList]. For the example - '.block img[data-clip]'

---

This awesome jQuery plugin is developed by AlfonsoFilho. For more Advanced Usages, please check the demo page or visit the official website.