CSS Clip-path 定位问题答案

【问题标题】：CSS Clip-path positioning issuesCSS Clip-path 定位问题
【发布时间】：2015-12-12 18:10:49
【问题描述】：

我使用 SVG 元素创建了一个相当简单的形状，然后使用 clip-path 将其放入我的 CSS 中。它应该使角对我来说是圆的，但由于某种原因，只有一个角可以完美地达到效果。

这是形状：

<svg height="500" width="500">

  <path fill="#555555" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />

</svg>

当我将它用作 clip-path 时会发生这种情况

body {
  background: #555;
}
img {
  clip-path: url(#svgPath);
  -webkit-clip-path: url(#svgPath);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
    </clipPath>
  </defs>
</svg>

<img src="https://dummyimage.com/500" />

它似乎在 FireFox 中完美运行，但显示除了右下角之外的角在 Chrome 中没有正确切割。

【问题讨论】：

标签： css svg css-shapes clip-path

【解决方案1】：

default units for the clip-path is userSpaceOnUse 这似乎是在计算路径相对于根元素的坐标。这就是为什么clip-path 似乎产生了不正确的输出的原因。取消根元素上的margin 和padding 或绝对定位元素（如下面的sn-p）应该可以解决问题。

body {
  background: #555;
}
img {
  position: absolute;
  top: 0px;
  left: 0px;
  clip-path: url(#svgPath);
  -webkit-clip-path: url(#svgPath);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
    </clipPath>
  </defs>
</svg>

<img src="http://lorempixel.com/500/500/" />

然而，在现实生活场景中，必须被剪裁的实际元素可能出现在身体内的任何地方，因此我认为使用objectBoundingBox 作为以下单位中的单位是一种更好的方法 sn- p：

body {
  background: #555;
}
img {
  clip-path: url(#svgPath);
  -webkit-clip-path: url(#svgPath);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
      <path fill="#FFFFFF" d="M0.1,0 L0.9,0 Q1,0 1,0.1 L1,0.8 Q1,0.9 0.9,0.9 L0.4,0.9 L0.35,1 L0.3,0.9 L0.1,0.9 Q0,0.9 0,0.8 L0,0.1 Q0,0 0.1,0z" />
    </clipPath>
  </defs>
</svg>

<img src="https://dummyimage.com/500" />

正如问题本身所提到的，由于我不知道的原因，此行为仅在 Chrome 而不是 Firefox 中可见。即使 (a) 向正文添加了额外的 padding + margin 并且 (b) 当图像本身被包裹在另一个也具有 padding + margin 的容器中时，Firefox 也会产生与预期相似的输出。

Firefox 的输出与 Chrome 匹配的唯一情况是 padding 直接添加到 img 标记本身。我相信这是因为padding 是元素的一部分，因此会影响坐标。

【讨论】：