jQuery plugin that makes easy to use clip-path on whatever tag under different browsers
This is a jQuery plugin that makes using clip-path property easy on whatever tag under different browsers.
Tested on Chrome and Firefox so far.
What it does?
Let's say that you want to achieve something like this:
So need to have a rectangle (e.g. 300x200) and you have to crop this image like with such coordinates:
(0; 0), (145; 0), (150; 20), (155; 0), (300; 0), (300; 200), (0; 200), (0; 0)
In Webkit all you have to do is to write a css style:
-webkit-clip-path: polygon(0 0, 145px 0, 150px 20px, 155px 0, 300px 0, 300px 200px, 0 200px, 0 0)
In Firefox and in W3C standard what you should do is:
and somewhere in the file:
clip-path-polygon does this job for you!
Install with https://npmjs.org or add it to your
$ npm install clip-path-polygon
Then require it:
If you want to compile the whole package with unit tests, run:
clipPath(points [, options])
You cam call it on a jQuery element:
points is an array of two-elements arrays:
[[x0, y0], [x1, y1], [x2, y2]...] crops the element to this area defined by these points.
There are some options that you can use:
|isForWebkit||*true*||specifies if `-webkit-clip-path` property should be added to element|
|isForSvg||*true*||specifies if `-clip-path` property and `` element should be added|
|svgDefId||*clipPathPolygonGenId*||specifies *id* of SVG clippath definition|
which gives you such an html code (remember that
svg element has to have http://www.w3.org/2000/svg namespace!):