Simple Path Clipping Plugin with jQuery - Clip Path Polygon

Clip Path Polygon is a lightweight jQuery plugin which uses CSS clip-path property to clip / crop any DOM elements.

Install & Download:

# NPM
$ npm install clip-path-polygon --save

Basic usage:

1. Load the jQuery Clip Path Polygon plugin after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="clip-path-polygon.min.js"></script>

2. The JavaScript to specify a specific region of a given element to display.

var points1 = [[0, 0], [145, 0], [150, 20], [155, 0], [300, 0], [300, 200], [0, 200], [0, 0]];
$('#el').clipPath(points1);

3. The JavaScript to clip an html element that uses relative unit - percents for responsive web design.

var points2 = [[0, 0], [49, 0], [50, 10], [51, 0], [100, 0], [100, 100], [0, 100], [0, 0]];
$('#el').clipPath(points2, {
  isPercentage: true
});

4. Full plugin options.

$('#el').clipPath({

  // specifies whether you want to use absolute numbers (pixels) or relative unit 
  isPercentage: false,

  // specifies if '-webkit-clip-path' property should be added to element
  isForWebkit: true,

  // specifies if '-clip-path` property and '' element should be added
  isForSvg: true, 

  // specifies *id* of SVG clippath definition
  svgDefId: 'clipPathPolygonGenId'
  
});

Changelog:

v0.1.15 (2020-06-24)

• [UPDATE] Bump jQuery version to 3.5.0

v0.1.14 (2019-11-17)

• [UPDATE] Bump jQuery version to 3.4.1

v0.1.13 (2018-05-12)

• [FIX] Fix jQuery vulnerability issue by bumping the version to 3.x; update a few other dev deps

v0.1.12 (2017-03-24)

• [BUGFIX] Webpack issue "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"

v0.1.11 (2016-12-20)

• [BUGFIX] Chrome 55+ hot fix: render SVG first, then add clip-path property

v0.1.10 (2016-05-06)

• [BUGFIX] add window.jQuery as an option of loading jQuery

v0.1.9 (2016-05-06)

• [BUGFIX] add window.jQuery as an option of loading jQuery
• [BUGFIX] hide created svg elements so that they do not appear on the bottom of the page

v0.1.8 (2016-02-26)

• [BUGFIX] parameters isForWebkit, isForSvg were set to false when empty map was passed options

---

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