1

我已经获得了这个内联 SVG 剪辑路径，可以在 CodePen 上的 Chrome 和 Firefox 中工作，但是当我尝试在我的本地主机上隐含它时，它不再在 Firefox 中工作了。它在 Chrome 中的本地主机上仍然可以正常工作，所以我确定它与 url 无关？

.gem-svg {
  width: 0;
  height: 0;
}
.gem-wrapper {
  width: 10%;
}
.gem {
  display: block;
  position: relative;
  z-index: 1;
  padding: 52% 46%;
  background-color: #ff0072;
  -webkit-clip-path: url("#gem-svg-clip");
  clip-path: url("#gem-svg-clip");
}
.gem-inner {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  background: linear-gradient(149deg, rgba(0, 0, 0, 0) 0, rgba(51, 51, 51, 0.4) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%), linear-gradient(30deg, #000000 0, #282828 100%);
  -webkit-clip-path: url("#gem-svg-clip");
  clip-path: url("#gem-svg-clip");
}
<div class="gem-wrapper">
  <div class="gem">
    <span class="gem-inner">
      </span>
  </div>
</div>

<svg class="gem-svg" width="0" height="0">
  <g>
    <clipPath id="gem-svg-clip" clipPathUnits="objectBoundingBox">
      <polygon points="0.46 0.01, 0.50 0, 0.54 0.01, 0.97 0.24, 0.99 0.27, 1 0.31, 1 0.69, 0.99 0.73, 0.97 0.76, 0.54 0.99, 0.5 1, 0.46 0.99, 0.03 0.76, 0.01 0.73, 0 0.69, 0.0 0.31, 0.01 0.27, 0.03 0.24" />
    </clipPath>
  </g>
</svg>

这是代码笔：

代码笔

4

0 回答 0