Question

我有这个简单的HTML：

.btn_clip {
  display: block;
  width: 524px;
  height: 170px;
  background: #ed1c23;
  font-size: 25px;
  color: #fff;
  text-align: center;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  line-height: 170px;
  text-decoration:none;
}

<a href="#" class="btn_clip">LEARN MORE</a>

但是当我在IE clip-path中检查它无用时，我想将其转换为SVG，但是我看到的大多数示例都是他们使用img的方法输出但带有SVG？

Answer 1

在这种情况下，您需要使用clipPathUnits="objectBoundingBox"，多边形的点将看起来像这样：points=".5 0, 1 .5, .5 1, 0 .5"。 50％变成.5，100％变成1，等等...

.btn_clip {
  display: block;
  width: 524px;
  height: 170px;
  background: #ed1c23;
  font-size: 25px;
  color: #fff;
  text-align: center;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip); 
  line-height: 170px;
  text-decoration:none;
}

svg{position:absolute; left:-10em;}

<a href="#" class="btn_clip">LEARN MORE</a>

<svg width="0" height="0">
  <clipPath id="clip" clipPathUnits="objectBoundingBox">
     <polygon points=".5 0, 1 .5, .5 1, 0 .5"/>
  </clipPath>
</svg>

在不使用图像的情况下将CSS剪切路径转换为SVG剪切路径

1 个答案: