我有一个简单的HTML:
null
.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>null
但是当我在IEclip-path中检查它是无用的，我想把它转换成SVG，但是我看到的大多数例子都是使用IMG，我怎么能用SVG做出相同的输出呢？
在本例中，您需要使用clippathunits=“ObjectBoundingBox”，多边形的点将如下所示:points=“。5 0，1.5，。5 1，0.5”。50%变成了。5，100%变成了1等等。
null
.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>