CODEWITHSUNDEEP
htmlcssimagesvgclip
Jacob
Jacob

Reputation: 192

Full width SVG clip

I'm currently working on a clipping path for a onepage site: http://grafomantestsite3.be/

As you can see, this works for chrome, but not for firefox, opera, etc.

I made a codepen to illustrate my problem: http://codepen.io/anon/pen/EPKvXV

Code:

#slide1 {
  height: 500px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 0px !important;
  /*Firefox*/
  clip-path: url("#clipPolygon");
  background-color: black;
  clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
}
<div id="slide1">
  <div class="ccm-image-slider-container">
    <div class="ccm-custom-style-slide1">
      <!-- here you have the slider -->
    </div>
  </div>
</div>


<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="0 500,960 450,960 0,0 0">
    </polygon>
  </clipPath>
</svg>

So my problem: i can't seem to get the SVG clip to work full screen (width = 100%). Any solutions?

Extra note: i work in concrete5 (CMS) which means i can't control the image shown within the clip. As a bonus, i want to use this in an image slider (which already works in chrome).

Any solutions will be greatly appreciated.

Thanks in Advance.

Upvotes: 1

Views: 2037

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

You need to define the clip path so it is relative to the bounding box of the object it will be attached to. You do that by specifying clipPathUnits="objectBoundingBox". Then you define your clip path in object bounding box coordinates: (0,0) is top left, (1,1) is bottom right.

#slide1 {
  height: 500px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 0px !important;
  /*Firefox*/
  clip-path: url("#clipPolygon");
  background-color: black;
  clip-path: polygon(0px 500px,100% 450px,100% 0px,0px 0px);
    -webkit-clip-path: polygon(0px 500px,100% 450px,100% 0px,0px 0px);
}
<div id="slide1">
  <div class="ccm-image-slider-container">
    <div class="ccm-custom-style-slide1">
      <!-- here you have the slider -->
    </div>
  </div>
</div>


<svg width="0" height="0" >
  <clipPath id="clipPolygon" clipPathUnits="objectBoundingBox">
    <polygon points="0 1,1 0.9,1 0,0 0">
    </polygon>
  </clipPath>
</svg>

Upvotes: 1

Related Questions