Surgeons Advisor
Surgeon's Advisor
Medical Marketing Strategies
  • Why Choose Us
  • Services
    • Digital Marketing
    • SEO
    • Website Design
    • Reputation Management
    • Social Media
  • Case Studies
  • 305.763.8011
  • GET STARTED FOR FREE
Surgeon's Advisor
Surgeon's Advisor
Medical Marketing Strategies
  • Why Choose Us
  • Services
    • Digital Marketing
    • SEO
    • Website Design
    • Reputation Management
    • Social Media
  • Case Studies
  • 305.763.8011
  • GET STARTED FOR FREE
CALL
EMAIL

Clipping with Clippath and SVG

September 28, 2016 by Surgeon's Advisor

Clipping in CSS and SVG

What it is Clippath

The Clippath is a CSS property to allow specific a region of an element to show or hide other parts. The portions of the element that are shown or hidden are determined by a clipping path.

It works with any element, like a divs, images or even texts.

Sintaxis

The variety of shapes to create is infinite, we can do circles, rectangles, or polygon areas.

.clip-path-element {
clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)
}
.clip-path-element {
clip-path: inset(from top, from right, from bottom, from left, rounded-x, rounded-y)
}
.clip-path-element {
clip-path: polygon(a, bunch, of, points)
}
.clip-path-element {
clip-path: circle(radius at x, y)
}
.clip-path-element {
clip-path: ellipse(radius-x, radius-y at x, y)
}

Compatibility

The clippath property don’t work on all browsers, below we can see the complete list of compatible browsers or visit this link: http://caniuse.com/#feat=css-clip-path

compatility

In our experience, thats works perfectly with Chrome, to make work in Firefox, additional steps are needed.

Editors

Some editors can help us to acelerate the process to calculate the correct values, here some online editors:

Bennettfeely.com

http://bennettfeely.com/clippy/
Clippath Editor

Cssplant.com

http://cssplant.com/clip-path-generator
Clippath Editor

How work with Firefox

The compatibility with Firefox is not perfect, we need the support from a external SVG file. The first step is add the following line on the CSS class, under the clippath like this:

.clip-path-element{
width: 370px;
height: 397px;
-moz-clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);
clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);
-webkit-clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);
clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);
}

Firefox code

-moz-clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);
clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);

Chrome code

-webkit-clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);
clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);

We need both codes at the same time.

Creation of SVG with Illustrator

A quick way to create a SVG is with the help of Illustrator. The process is simple, only is needed draw the same shape done with the editors and obtain the code with the export options and choose SVG file, after we can see a button with the SVG code.

Illiustrator SVG

As a result is a code like this:

SVG Code

We should save the code on a file. Take care about the ID, the clippath ID (absolute_path on this case) should be the same that named on CSS clip-path property.

Let’s Connect. We’re excited to help you exceed your goals.

Get in touch today for your free, online marketing evaluation.

  • By submitting this form you agree to our privacy policy and terms of use.

  • This field is for validation purposes and should be left unchanged.

Quick Menu

  • Home
  • Why Choose Us
  • Case Studies
  • Get Started
  • Testimonials

Services

  • Digital Marketing
  • SEO
  • Website Design
  • PPC
  • Social Media
  • Reputation Management

Contact

Address
690 Lincoln Road, Suite 204,
Miami Beach FL 33139 - USA

Phone
305.763.8011

Working hours
Monday - Friday 9am - 6pm EST

Contact us now!

Terms and conditions Privacy policy Contact

690 Lincoln Road, Suite 204, Miami Beach FL 33139 | 305.763.8011
© 2021. Surgeon's Advisor. All Rights Reserved. Medical Marketing Strategies

Google Partner