Converting CSS Clip Path to SVG Clip Path without using an Image

user_14558081 0
Viewed 773

I have this simple 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>

But when I checked it in IE clip-path is useless, I want to convert it to SVG but most of the examples I saw is they use img how can I make the same output but with SVG?

clip-path svg css
1 Answers

In this case you need to use clipPathUnits="objectBoundingBox" and the points for the polygon will look like this: points=".5 0, 1 .5, .5 1, 0 .5". 50% is becoming .5 and 100% is becoming 1 etc...

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

user_78973950
Related