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:
;
with jQuery:
;
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 ;
Or can use html element's attribute to set clip points:
<!-- In the html -->
// In the javascript;
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.:
;
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
or
$ npm run build
To Do
- Add support for circle, ellipse and inset;