Ionic3 clip-path发布APK后多边形失效的问题

最新推荐文章于 2024-09-10 09:31:35 发布

Sddking

最新推荐文章于 2024-09-10 09:31:35 发布

阅读量156

点赞数

分类专栏： Ionic 文章标签： css3 svg es6 typescript

本文链接：https://blog.csdn.net/meihao1203dick/article/details/110285588

版权

在Ionic3项目开发中，遇到一个问题：在开发环境下使用css的clip-path对图片进行多边形切割显示正常，但当发布为APK的生产环境中，该样式失效。经过搜索，找到了问题的解决办法，即通过结合svg和clip-path来实现多边形切割，此方案在APK发布后能正常工作。

摘要由CSDN通过智能技术生成

dev环境下，css设置clip-path对图片多边形切割，显示正常

    height:190px;
    background-image: url(../assets/imgs/bg1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-clip-path: polygon( 0px 0, calc(100% - 0px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px),0 0px );

发布APK生产环境后，切割多边形的css样式失效了

百度后发现需要修改切割的方式利用svg结合clip-path的方式

 <div class="title">
    <div>
      <div class="title_logo">
        <img src="assets/imgs/login_title.png" class="title_logo_img" />
      </div>
      <div class=&#