ClipPath

Cross-browser clip-path polyfill.

NOTE: currently only supports polygon values.

Installing

with npm:

$ npm install clip-path --save

with yarn:

$ yarn add clip-path

Usage

Vanilla javascript:

ClipPath('.target', '5% 5%, 100% 0%, 100% 75%');

with jQuery:

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

NOTE: for backward compatibility reasons, jquery implementation also accepts an object as an argument. In this case, a path property is expected. This alternative should be avoided since it is deprecated. (See also #4)

// Using object instead string
// @deprecated 
$('.image').ClipPath({path: '5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%'});

Or can use html element’s attribute to set clip points:

<!-- In the html -->
<img id='clipped' data-clip="5% 5%, 100% 0%, 100% 75%" src="https://unsplash.it/100/100/?random" />

// In the javascript
ClipPath('#clipped');

See example folder to view more usage cases.

API

ClipPath(query_selector, polygon_value)

query_selector: string with css query selector. e.g.:#image img.test-class

polygon_value: string with polygon points in the format 'x y, x y, xy ...'.
e.g.:

ClipPath('.target', '10px 10px, 15px 10px, 15px 15px, 10px 15px');

Test and Build

Clone the project and install dependencies:

$ git clone git@github.com:AlfonsoFilho/ClipPath.git
$ cd ClipPath && npm install

To test:

$ npm test

To test and watch file changes

$ npm run test:watch

To Build:

$ npm start

$ npm run build

To Do

Add support for circle, ellipse and inset;