Question

我已经在CodePen上使用这个内联SVG剪辑路径在Chrome和Firefox中工作，但是当我尝试在我的本地主机上使用它时，它不再适用于Firefox。它在Chrome中的本地主机上仍能正常工作，所以我确定它与网址无关？

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是代码笔：

CodePen

Firefox内联SVG剪辑路径 - 适用于CodePen但不适用于Localhost

0 个答案: