CODEWITHSUNDEEP
htmlcssfirefoxsvgclip-path
h4m3d99
h4m3d99

Reputation: 65

CSS SVG clip-path url doesn't work in firefox

I followed from jsfiddle and put codes in my project. Everything is good but in the Firefox everything is wrong and clip doesn't work.

<svg class="clip-svg">
  <defs>
    <clipPath id="test-clip" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 0.73 0, 1 0.59, 0.48 1, 0 075" />
    </clipPath>
  </defs>
</svg>
<figure class="clip-block">
  <div class="clip-each clip-solid my-clip-path">
    <div class="clip-entry">
      <figcaption>
      Test Clip
      </figcaption>
        </div>
    </div>
</figure>

html, body, .clip-block {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.clip-svg {
  width: 0;
  height: 0;
}
.clip-each {
  display: block;
  position: absolute;
  margin: 0 auto;
  -webkit-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.clip-solid {
  width: 300px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #FF4081;
  cursor: pointer;
  overflow: hidden;
}
.my-clip-path {
  width: 38.5%;
  height: 74.5%;
  background-image: url('http://placehold.it/500x500');
  background-color: #31686e;
  -webkit-clip-path: polygon(80.9% 9.1%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(80.9% 9.1%, 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: url("#test-clip");
  -moz-clip-path: url("#test-clip");
  -ms-clip-path: url("#test-clip");
  clip-path: url("#test-clip");
}

It's very strange! I put my codes in jsfiddle and work properly in firefox but when I create my own html with same codes, Firefox brokes everything and ignore clip-path.

This project must be done quickly.

Upvotes: 2

Views: 1100

Answers (1)

h4m3d99
h4m3d99

Reputation: 65

I solved it!

New CSS:

.my-clip-path {
  width: 38.5%;
  height: 74.5%;
  background-image: url('http://placehold.it/500x500');
  background-color: #31686e;
  -webkit-clip-path: polygon(80.9% 9.1%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(80.9% 9.1%, 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: url("index.html#test-clip");
  -moz-clip-path: url("index.html#test-clip");
  -ms-clip-path: url("index.html#test-clip");
  clip-path: url("index.html#test-clip");
}

Upvotes: 1

Related Questions