例如,我有一个 css 类,其中应用了多边形剪辑路径,如下所示:
.services-image-left {
-webkit-clip-path: polygon(0 0, 97% 0, 83% 100%, 0% 100%);
clip-path: polygon(0 0, 97% 0, 83% 100%, 0% 100%); }
但我知道要在 Edge 和 IE 中工作,我需要将“clippath”属性与 svg 点一起使用。有没有一种简单的方法可以将上面的多边形转换为 svg 形状,并将其应用到具有 .services-image-left 类的所有内容,如上面的示例?
转换非常简单。该 CSS 剪辑路径的等效项是:
<svg width="0" height="0">
<clipPath id="myclippath" clipPathUnits="objectBoundingBox">
<polygon points="0, 0, 0.97, 0, 0.83, 1.0, 0, 1.0"/>
</clipPath>
</svg>
然后你用以下方式引用它:
.services-image-left {
clip-path: url(#myclippath);
...
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)