CSS SVG 剪辑路径 url 在 firefox 中不起作用

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 破坏了一切并忽略了 clip-path。

这个项目必须尽快完成。

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 剪辑路径 url 在 firefox 中不起作用

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

html

css

firefox

svg

clip-path