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

Question

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

您在左侧看到的图案是从深色背景中裁剪出来的，以显示坐在它们后面的图像。

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

Answer 1

是的，您可以通过为 HTML 元素提供一个 mask property that references a <mask> element in your SVG file or a clip-path property 来引用您的 SVG 文件中的 <clipPath> 元素。

.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> 将可见区域定义为一系列形状的联合。

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

Is it possible to clip a HTML element using an SVG image file as the source?

html

css

clip