clip-path-polygon

jQuery plugin that makes easy to use clip-path on whatever tag under different browsers

npm install clip-path-polygon
20 downloads in the last month

clip-path-polygon

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: clip-path: url(#my-definition)

and somewhere in the file:

<svg>
    <defs>
        <clippath id="my-definition">
            <polygon points="0 0, 145 0, 150 20, 155 0, 300 0, 300 200, 0 200, 0 0"></polygon>
        </clippath>
    </defs>
</svg>

clip-path-polygon does this job for you!

Installation

Node

Install with https://npmjs.org or add it to your package.json:

$ npm install clip-path-polygon

Then require it:

require('clip-path-polygon');

and use:

$myElement.clipPath();

Browser

Download clip-path-polygon.min.js (minified) or clip-path-polygon.js (dev) and add it to you HTML file:

<script src="clip-path-polygon.min.js"></script>

Compilation

If you want to compile the whole package with unit tests, run: npm install

I use mocha, sinonjs and expect.js for testing.

API

Definition: clipPath(points [, options])

You cam call it on a jQuery element:

$('#my-element').clipPath(points);

where 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:

Option Default Description
isForWebkit true specifies if -webkit-clip-path property should be added to element
isForSvg true specifies if -clip-path property and <svg> element should be added
svgDefId clipPathPolygonGenId specifies id of SVG clippath definition

Example

<html>
  <head>
    <script src="jquery.min.js"></script>
    <script src="clip-path-polygon.min.js"></script>
    <script>
      $(function() {
        var points = [[0, 0], [145, 0], [150, 20], [155, 0], [300, 0], [300, 200], [0, 200], [0, 0]];
        $('#test').clipPath(points);
      });
    </script>
  </head>
  <body>
    <div style="width: 300px; height: 200px">
      <div id="test" style="width: 100%; height: 100%; background-color: green"></div>
    </div>
  </body>
</html>

which gives you such an html code (remember that svg element has to have http://www.w3.org/2000/svg namespace!):

<div style="width: 300px; height: 200px">
  <div id="test" style="width: 100%; height: 100%; background-color: green;
    -webkit-clip-path: polygon(0 0, 145px 0, 150px 20px, 155px 0, 300px 0, 300px 200px, 0 200px, 0 0);
    clip-path: url(#clipPathPolygonGenId)"></div>
</div>

<svg>
  <defs>
    <clippath id="clipPathPolygonGenId">
      <polygon points="0 0, 145 0, 150 20, 155 0, 300 0, 300 200, 0 200, 0 0"></polygon>
    </clippath>
  </defs>
</svg>
npm loves you