Simple Path Clipping Plugin with jQuery - Clip Path Polygon

File Size: 34.7 KB
Views Total: 3642
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.