移动Safari上的CSS剪切路径就像内容框一样

时间:2019-01-14 17:53:34

标签: html css svg

我有一个用clip-path切成的容器,并且具有一些背景颜色。在支持clip-path但支持移动Safari的所有浏览器中均可完美运行(可能也是台式机Safari,无法测试)。

https://codepen.io/Deka87/pen/PXVNgQ

HTML:

<!-- Container -->
<div></div>

<!-- Clip -->
<svg>
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="M 0 0 V 1 A 5 5 0 0 1 1 1 V 0 Z"></path>
    </clipPath>
  </defs>
</svg>

CSS:

div {
  min-height: 300px;
  background-color: gray;
  padding: 100px 0;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

svg {
  width: 0;
  height: 0;
  position: absolute;
}

Safari中的问题是,当应用clip-path时,容器的背景就像其background-clip属性设置为content-box一样,即它没有位于填充的后面区域保持空白。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,并且可以通过向要裁剪的元素添加一个额外的包装div并将填充移入一个子元素来解决该问题。这并不是真正的解决办法,但让我向前迈进了一步。

HTML:

<!-- Container -->
<div class="parent">
  <div class="child">

  </div>
</div>

<!-- Clip -->
<svg>
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="M 0 0 V 1 A 5 5 0 0 1 1 1 V 0 Z"></path>
    </clipPath>
  </defs>
</svg>

CSS:

.parent {
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

.child {
  background-color: gray;
  min-height: 300px;
  padding: 100px 0;
}

svg {
  width: 0;
  height: 0;
  position: absolute;
}

在此处查看示例: https://codepen.io/mprquinn/pen/8b1e4e6004e989491f294a8899a94ec7

希望这会有所帮助!