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坐标。

＆＃13;

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

＆＃13;

<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>

＆＃13;

将`clip-path`与图像对齐

1 个答案: