Question

我跟随jsfiddle并将代码放入我的项目中。一切都很好，但在Firefox中一切都是错的，剪辑不起作用。

<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");
}

这很奇怪！我把我的代码放在jsfiddle中并在firefox中正常工作但是当我使用相同的代码创建自己的html时，Firefox会破坏所有内容并忽略剪辑路径。

这个项目必须快速完成。

Answer 1

我解决了！

新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");
}

CSS SVG剪辑路径网址在firefox

1 个答案: