如何解决是否可以使用 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>
将可见区域定义为一系列形状的并集。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。