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

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)

Sddking

224人浏览 · 2020-11-28 16:41:46

Sddking · 2020-11-28 16:41:46 发布

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="title_logo_text">{{'LoginPage.title' | translate}}</div>
      </div>
  </div>
  <svg width="0" height="0">
    <defs>
      <clipPath id="triangles01_clip" clipPathUnits="objectBoundingBox">
            <polygon points="0.178,0.297 0.356,0.000 0.000,0.000" />
            <polygon points="0.392,0.000 0.214,0.297 0.570,0.297" />
            <polygon points="0.607,0.297 0.785,0.000 0.429,0.000" />
            <polygon points="0.821,0.010 0.643,0.298 0.999,0.298" />
            <polygon points="0.178,0.326 0.000,0.623 0.357,0.623" />
            <polygon points="0.393,0.623 0.571,0.326 0.215,0.326" />
            <polygon points="0.607,0.326 0.429,0.623 0.785,0.623" />
            <polygon points="0.822,0.623 1.000,0.326 0.644,0.326" />
      </clipPath>
  </defs>
  </svg>

.title{
    height:190px;
    background-image: url(../assets/imgs/bg1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-clip-path: url(#triangles01_clip);
    clip-path: url(#triangles01_clip);
  }

发布APK后，切割多边形实现