andrusieczko / clip-path-polygon Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin that makes using clip-path property easy on whatever tag under different browsers.
License: MIT License
jQuery plugin that makes using clip-path property easy on whatever tag under different browsers.
License: MIT License
If clipPath()
is called on multiple elements with different polygons:
$('#element1').clipPath([[0,1], [0,2], [1,1]]);
$('#element2').clipPath([[0,3], [0,4], [3,3],[3,4]]);
The plugin will only create one svg clipPath containing the second specified path.
The different clip paths appear to still work for Chrome, maybe because Chrome uses the -webkit-clip-path version in addition. although they are shown as overridden in the inspector. On Firefox the elements all use the last specified clip path.
It would be nice if it could create additional clipPath elements for each unique clip path, generating unique ids for them, and returning the ids to allow the user to remove specific paths later.
Hello! Is there any possibility to make some transitions for clip-path-polygon?
I have tried something like that but it does not work:
jQuery(function($) {
var points = [[350, 0], [0, 350], [350, 350]];
$('#mask').clipPath(points);
$(".item-112").mouseover(function() {
points = [[0, 0], [0, 350], [350, 0]];
$('#mask').css('-moz-transition','all 2s ease 0s').clipPath(points);
})
$(".item-112").mouseout(function() {
var points = [[350, 0], [0, 350], [350, 350]];
$('#mask').css('-moz-transition','all 2s ease 0s').clipPath(points);
})
});
Regards
Hi,
it´s great work, but - I have a responsive website, and I want use your jQuery for background. Is there some way to use percentages clip-path, please?
For example:
clip-path: polygon(50% 7%, 100% 0, 100% 93%, 50% 100%, 0 93%, 0 0);
Thanks! :)
I'm using webpack to convert my ES6 JS to "universal" JS code.
window.$ = window.jQuery = require('jquery');
//...
require('clip-path-polygon');
When first requiring jquery and then requiring clip-path-polygon, webpack throws the following error:
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
It looks like the reason is line 11. When removing the require statements, the error vanishes.
var jQuery = jQuery || globalVariable.jQuery || (require && require('jquery'));
BTW: Changing the order of require statements does not change anything.
Not Working on Internet Explorer, It would be great if you could fix this 👍
Hi, thanks for your script it´s cool!
But i have a problem, when i use the script to generate 2 mask in the same page not work!
Any idea or solution for that?
Thanks!
hi my friend, now i use your script to make an editor of pics to decoration, the user enter in a site, select her image and it´s put in a mask an her can see a preview of her pic...
The problem:
When user select a pic, and this is more big than mask, the elements in the page is move to border or image that is the mask, you can try in the next link:
http://curvart.creacionwebprofesional.com/personalizar/curvart-plano/204
Can you help me with that please?
Hi, Mate
I like your plugin, but i have a question. I'm in case with value points, this is my value (0 60px,100% 0,100% 100%,0 100%); i'm use pixel because need accurate size on polygon but i'm use percentage too.
So how to put point in your plugin?
Thanks
In the latest commit,.css('display', 'none')
on the svg elem (clip-path-polygon.js: 100) breaks the clip behaviour (by break, I mean I'm not getting any clip applied).
I'm using FF v46.0.1 on OSX.
If I use opacity: 0
instead - clip works as expected; however I also see that this change was made to eliminate empty space created by the empty elem - which will obviously won't be addressed by opacity..
Can you make the Bower's packgage for this? (Sorry i've added this into a pull request for mistake)
It is great plugin. Working fine in firefox and chrome but why it is not working in safari 5.1 version. Can you please help me how to work for safari 5.1
Thanks in advance
Like this module a lot and would really need it in the IE stack
Syntax of typeof
is wrong here:
https://github.com/andrusieczko/clip-path-polygon/blob/master/js/clip-path-polygon.js#L115-L116
Should be changed to:
this.isForWebkit = (options && typeof options.isForWebkit !== "undefined") ? options.isForWebkit : this.isForWebkit;
this.isForSvg = (options && typeof options.isForSvg !== "undefined") ? options.isForSvg : this.isForSvg;
Chrome 55:
'CSS Clipping Path properties no longer require the webkit prefix.'
=> this means chrome gets the clip-path: url("#clippathid") iso clip-path: polygon(
and it doesn't work (no clip path applied)
For me changing the order in _createClipPath worked: first do the isForSvg and then isForWebkit. Still gives the -webkit- prefix which chrome strips.
Tested in the latest Chrome, FF, Opera, Safari on mac and IE11, Edge and Chrome on windows.
_createClipPath: function(points) {
this._createSvgDefs();
if (this.isForSvg) {
this._createSvgBasedClipPath(points);
}
if (this.isForWebkit) {
this._createWebkitClipPath(points);
}
},
Hi,
The application is configured with waffle windows authentication framework and deployed into Web sphere 8.5 server, its working in an Local machine. but when the same has been moved to an environment where IIS is there interacting with websphere using Websphere plugin causing Authentication issues and displaying a windows authentication pop message, the entered username & password also not accepting.
can you please suggest if any settings need to be verified.?
Regards,
Jagadeesh
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.