html - 将 `clip-path` 与图像对齐

Question

我在使用 SVG 剪辑路径时遇到了一些问题。我无法弄清楚如何使路径与我正在剪辑的图像对齐 - 它总是偏离。这是我的标记:

HTML

<img class="svg-clipped" src="https://unsplash.it/1200/1200" alt="">
  <svg height="0" width="0">
    <defs>
      <clipPath id="svgPath">
        <path d="M124.8,656.7H142V501.9c65.5-27.5,53.6,10.8,129,4.7v150.1h17.2v20.7H124.8V656.7z"/>
      </clipPath>
    </defs>
  </svg>

SCSS

.svg-clipped {
 -webkit-clip-path: url(#svgPath);
 clip-path: url(#svgPath);
}

还有一个 Codepen:

https://codepen.io/mikehdesign/pen/yoOZYo

如果向下滚动，您将看到我正在使用的 SVG 轮廓。理想情况下，我希望它以图像为中心，尽管左上角也可以。事实上，我无法弄清楚定位背后的逻辑是什么。

谢谢!

迈克

Answer 1

将剪辑路径应用于 HTML 元素时，强烈建议您使用 objectBoundingBox 坐标空间而不是默认的用户空间坐标 (userSpaceOnUse)。

以 objectBoundingBox 为单位，坐标直接映射到应用剪辑的对象。所以 (0,0) 表示对象的左上角，(1,1) 映射到对象的右下角。

因此，如果您坚持该范围内的坐标，您的裁剪路径肯定会直接落在您的图像上。

这是一个带有简单菱形剪辑路径的演示。我会让您将形状转换为 objectBoundingBox 坐标。

.svg-clipped {
 -webkit-clip-path: url(#svgPath);
 clip-path: url(#svgPath);
}

<img class="svg-clipped" src="https://unsplash.it/1200/1200" alt="">

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
      <path d="M 0.5,0 L 1,0.5 0.5,1, 0,0.5 Z"/>
    </clipPath>
  </defs>
</svg>