Simple Path Clipping Plugin with jQuery - Clip Path Polygon

Simple Path Clipping Plugin with jQuery - Clip Path Polygon
File Size: 16 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

Basic usage:

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

<script src="//code.jquery.com/jquery-1.11.3.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.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.