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

问题描述

我正在尝试实现以下效果，这是在photoshop中完成的，并从背景中切出图案。

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

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

解决方法

是的，您可以通过为 HTML 元素提供一个 mask property 引用您的 SVG 文件中的 <mask> 元素或一个 clip-path property 引用一个 <clipPath> 元素来实现此目的在您的 SVG 文件中。

.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,go here -->
   </mask>
</svg>

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

clip html