如何使用 CSS 和 SVG 剪辑和遮罩技术

SVG 非常适合在 Web 上工作，并且剪辑和遮罩允许一些有趣的方式来显示或隐藏 Web 图形的片段。 使用这些技术还可以让您的设计更加灵活，因为您不必手动进行更改和创建新图像——这一切都通过代码完成。 通过结合使用 CSS 剪辑和遮罩技术，您将有很多用于网站图形的选项。

为了帮助澄清事情，遮罩和剪裁是您可以使用 CSS 处理图像的两种不同方式。 让我们从剪辑开始。

剪辑基础

如果您曾经使用过 Photoshop，那么您可能已经熟悉剪贴蒙版。 这是一种类似的方法。 裁剪涉及在图像或元素的顶部放置矢量形状，如圆形或三角形。 形状后面的图像的任何部分都将可见，而形状边界之外的所有内容都将被隐藏。

例如，如果三角形剪贴蒙版位于森林图像的顶部，您将看到三角形内的森林图像。 形状的边界称为剪辑路径，不要与折旧的clip属性混淆。 您可以使用clip-path属性创建剪辑路径。

注意：不要在您的实时站点上尝试此操作

请记住：您不应该直接在您的网站上更改代码，以确保不会出现任何问题。 我们的免费本地开发应用程序 Local 将帮助您设置一个测试环境，您可以安全地按照本教程进行操作。

剪辑在行动

剪辑始终是矢量路径。 理解起来可能会令人困惑，但是路径之外的任何东西都将被隐藏，而路径内的任何东西都是可见的。 为了更好地理解并自己测试，请参阅 CodePen 上的示例。

以下是示例中的 HTML 结构片段：

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

这是使剪辑发生的CSS：

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

您可以看到在 HTML 中引用clipPath id 的位置以及它如何使用clip-path URL 进行剪辑。

剪辑工具

Clippy 是生成 CSS 剪辑路径的好工具。 有各种各样的起动器形状和尺寸可以定制。

掩蔽基础知识

屏蔽是使用 PNG 图像、CSS 渐变或 SVG 元素来隐藏图像的一部分或页面上的其他元素。 我们将专注于 SVG 图形，但请记住，这可以通过其他图像类型或样式来完成。

掩码属性和掩码元素

只是帮助可视化的复习，重要的是要记住蒙版元素是“原始”（在应用蒙版之前）图像。 您可能不想看到整个图像，因此使用 CSS mask属性隐藏部分图像。 mask是一组单独属性的 CSS 简写，稍后我们将深入探讨。 SVG <mask>元素用于在 SVG 图形中添加遮罩效果。 在此示例中，蒙版是一个圆形，并且还应用了一个渐变。

在 SVG 图形上使用 SVG 掩码元素

为了感受 SVG <mask> ，我们将使用 SVG 图形进行遮罩。

乍一看可能有点复杂，但它们共同作用以掩盖底层图像。 我们有一个实际的图像作为背景，那么 SVG 在哪里发挥作用呢？ 与剪辑示例不同，此背景图像在技术上位于 SVG 元素内部。 我们将使用 CSS 将此蒙版应用于图像。 属性将来自 SVG 掩码元素，我们将在我们的 CSS 中为其提供masked-element的 id。

要查看此操作，请查看此 Codepen 示例。 这是蒙版 SVG 图形的工作代码：

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

使用这个 CSS，我们指定了在哪里可以找到掩码。 它将查找#mask-this:

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

注意到圆形的渐变了吗？ 已应用渐变，并为蒙版设置圆形。

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

SVG 文本遮罩

文本遮罩可以做一些很酷的事情，例如通过文本块显示图像。 好消息是文本元素可以在 SVG 蒙版中使用。 随着未来浏览器支持的增加，这可能是一种结合图像和排版的非常有趣的方式。

这是对正在发生的事情的基本解释。 SVG 掩码中有一个 SVG 文本元素。 我们已经为白色指定了 RGB 值，它在蒙版文本周围创建了椭圆形区域。 椭圆形区域后面的任何内容都通过文本显示，给人一种剪裁的感觉。

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

要完全理解，对代码进行尝试和试验会很有帮助。 尝试在此 Codepen 中更改颜色、更改文本和调整大小。

掩码图像属性

可以声明图像，并且可以将mask-image设置为 URL 值。 mask-image可以是 PNG、SVG 或对 SVG mask元素的引用，就像我在前面的示例中演示的那样。

因为遮罩用于部分或完全隐藏对象或元素的某些部分，所以首先您需要一个指向要被遮罩的元素的文件的图像链接。 这是该图像的外观。 它是丰富多彩的，可以非常明显地显示面具显示和隐藏的部分。

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Masked image">

到目前为止，已经有很多 SVG 代码，但这个示例略有不同，因为将有一个用 SVG 遮罩的光栅图像。

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

mask-image属性是声明遮罩形状的地方。 在这种情况下，掩码图像是 SVG 图形。 包含 URL 链接是掩码的构建方式。

这是在 Codepen 上。

组合多个蒙版图像

就在您认为蒙版再好不过时，可以选择设置多个蒙版图像层。 您需要做的就是添加两个 URL 值（如果您有野心，可以添加更多），用逗号分隔。

为了从上面扩展简单的蒙版，将在原始图形中添加一个箭头。 这是两个面具的组合方式。

.combined-mask {
   mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

您所要做的就是添加两个值（用逗号），现在有两个组合掩码，使掩码的可能性无穷无尽。

这是在 Codepen 上。

使用mask-image创建一个简单的渐变

并非所有面具都必须是复杂的形状。 有时，遮罩不是特定的图像，而是像渐变这样的简单遮罩。 如果您正在寻找一种快速的方法来实现这一点，那么mask-image属性是一个选项，它很容易实现。

在此示例中，有一个类应用于渐变集作为mask-image属性。 通过这个简单的声明，很容易在图像上创建渐变蒙版。

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

在 Codepen 上看到这个。

掩码重复属性

一旦你创建了一个面具，就很容易制作更多。 如果您要制作自定义模式，这真的很方便。 mask-repeat 属性允许重复掩码。 如果您以前制作过平铺背景，则与此类似。

有一些重要的事情要记住，比如大小和需要声明的掩码重复类型，以便创建完美的模式。

mask-size很容易可视化，尤其是这里设置的像素值。

mask-size: 200px;
webkit-mask-size: 200px;

如果您正在为模式寻找不同的效果，还有更多的掩码重复选项：

• repeat-x沿 x 坐标重复。
• repeat Repeat-y沿 y 坐标重复。
• space在可用区域内重复并散开。
• round在可用区域内重复多次（如果需要，缩放将帮助它填充空间）

浏览器支持

在采用这种处理图形的新方法之前，请务必注意浏览器支持与剪切和遮罩不一致。 剪辑比屏蔽更受支持，但 Internet Explorer 并不完全支持剪辑。 当前浏览器对 CSS 蒙版的支持也相当有限，因此建议将其用作一些装饰元素的增强。 这样，如果用户的浏览器不支持，也不会影响内容查看体验。

要测试一下是否支持您的蒙版和剪辑，我建议您制作一个 JSFiddle 或 Codepen，然后在不同的浏览器中尝试。 近年来，浏览器支持有所增加，最终将达到完全支持的程度。 不要让限制让您失望 - 领先于游戏总是好的，一旦支持成为主流，您将确切地知道如何彻底改变您的图形。 如有疑问，请务必参考受信任的 Can I Use。

在尝试了这些示例之后，这应该很好地介绍了遮罩和裁剪。 尽管目前浏览器支持有限，但这很可能成为未来的主流做法。 思考如何使用这些技术创造有趣的视觉效果总是很有趣。 网络图形的未来将使我们减少对图像编辑器的依赖，并允许更有效的方式直接在浏览器中创建和修改图像。

下一篇：更快地设计网站！

您了解简化网页设计过程的重要性。 您可以做的任何事情来更快地设计网站意味着您的口袋里有更多的钱。 这就是为什么 Flywheel 设计了我们的托管平台来节省您的时间并让您尽最大努力！ 使用这些网页设计技巧和工具，您可以完成更多项目并花更多时间发展您的业务。

在本指南中，我们将介绍如何更快地工作和加快 WordPress 工作流程的技巧。 从最初的站点设置到上线，了解如何从日常工作中减少工作时间！ 今天下载它。

本文最初发布于 2016 年 8 月 3 日，最后更新于 2018 年 11 月 6 日。