是否可以使用 SVG 图像文件作为源来剪辑 HTML 元素？答案

【问题标题】：Is it possible to clip a HTML element using an SVG image file as the source?是否可以使用 SVG 图像文件作为源来剪辑 HTML 元素？
【发布时间】：2021-05-30 00:24:25
【问题描述】：

我正在尝试实现以下效果，这只是在photoshop中完成的，背景中的图案被剪掉了。

您在左侧看到的图案是从深色背景中剪下的，以显示位于它们后面的图像。

我有该图像的 SVG 文件，想知道是否可以（如果可以）使用 SVG 文件作为源将纯色背景剪辑到这些形状？

【问题讨论】：

标签： html css clip

【解决方案1】：

是的，您可以通过为 HTML 元素指定引用 SVG 文件中的 <mask> 元素的 mask property 或引用 SVG 文件中的 <clipPath> 元素的 clip-path property 来做到这一点。

.element {
    /* just because of your example: */
    background-image: url(forest-road.jpg);
    /* use one of these two: */
    clip-path: url(spirograph.svg#myClipPath);
    mask: url(spirograph.svg#myMask);
}

<svg ...>
   <!-- use one of these two: -->
   <clipPath id="myClipPath">
       <!-- shapes, etc., go here -->
   </clipPath>
   <mask id="myMask">
       <!-- shapes, etc., go here -->
   </mask>
</svg>

这两个 CSS 功能的工作方式略有不同，掩码更新更灵活，但在浏览器支持方面存在一些剩余差距（包括需要前缀）。无论哪种方式，您都需要调整 SVG 以使其适合。 <mask> 应该使像素为白色以表示不透明，黑色表示透明，灰色是中间不透明度。另一方面，<clipPath> 将可见区域定义为一系列形状的联合。

【讨论】：

感谢您的帮助！当我应用它时，它似乎只是切掉了整个形状的外边缘，而不是沿着内部路径切割，这样我们就可以看到线条，我该怎么做呢？
@PavKR 我猜你选择了<clipPath>，因为这对于面具来说很奇怪。在剪辑路径中，笔画与填充的区别不适用；相反，每个形状的整个几何形状都在路径内。如果您的线条都绘制为形状上的笔划，则将它们转换为<clipPath> 使用可能很麻烦，而<mask> 可能更容易构建。 This article explains the choice between the two further.
谢谢 - 我会检查那篇文章