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

本文转载自：众成翻译
译者：hidoos
连接：http://www.zcfy.cc/article/1100
原文：https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/

SVGs 可以很好的在 web 上工做, 剪切和遮罩容许你使用有趣的方式去展现或隐藏 web 图像， 使用这些技术也能让的设计变得更加灵活由于你不须要去修改或者建立新的图像——这些均可以用代码来实现。经过结合使用 CSS 和遮罩技术，你将会拥有更多的可能性去使用网络图像。

须要明确的是，遮罩和剪切是经过 CSS 来处理图像的两种不一样的方法，让咱们从剪切开始吧！

剪切基础

若是你曾经使用过 Photoshop , 你大概已经很熟悉剪切遮罩了。 他们有一些共同点，剪切经过放置矢量图形来使用,好比圆和三角形, 在图像和元素的上面矢量图形外面的任何部分都会显示，全部矢量图形边界的外面都将被隐藏。

举个例子，若是一个三角形的剪切遮罩覆盖上树林图像上的话, 你能够看到三角形里面的森林图像。图形的边界被称作剪切路径, 不要和已经废弃掉的 clip 属性混淆，你可使用 clip-path 去建立一个剪切路径。

深刻理解剪切

剪切老是矢量路径，这可能会比较混淆, 可是路径的外面的任何部分都会被隐藏, 而路径的里面都会显示。为了更好的理解，你能够去测试一下，在 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");
}

你能够看到 clipPathid 在 HTML 的哪一个部分，它是如何使用 clip-path 的 URL 去制做剪切效果的。

Clippy 工具

Clippy 是一个用来生成 CSS 剪切路径的伟大工具。这里有许多不一样的初始图像而且这些形状的尺寸都是能够自定义的。

遮罩基础

在网页上，遮罩是使用 PNG 图片、CSS 渐变、或一个 SVG 元素来隐藏图片或其它元素的部分。咱们将集中注意力在 SVG 图像上，不过请注意遮罩可使用其余类型的图片或者样式的。

遮罩属性和遮罩元素

仅仅是为了帮助理解, 请记住被遮罩的元素是“原始”（尚未应用遮罩的）图片， 你可能不想看到所有的图片,因此使用 CSS mask 属性来完成隐藏部分图片的工做。 mask 是 CSS 一组独立属性的简写 , 咱们将接下来会介绍它。SVG 元素被用来给 SVG 内部的图像添加遮罩效果。在接下来的示例中, 遮罩是添加了渐变效果的圆形。

在 SVG 图像上应用 SVG 遮罩元素

为了使用 SVG mask 获得一种感受，咱们将在 SVG 图像上使用遮罩。

这给人的第一印象可能会比较复杂, 可是它能够很好遮罩下面的图像。咱们有一张真实的图片做为背景，那么 SVG 在哪里起做用呢？和剪切不一样, 这张背景图片技术上来讲是在 SVG 元素内部的。咱们将使用 CSS 来给图片应用遮罩，属性未来自于 SVG 遮罩元素，在咱们的 CSS 中指定一个 mask-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, 咱们制定了在哪里找到遮罩，它将会找到 #mask1 id：

/* 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 修改一下文字, 修改一下文字,调整一下尺寸。

浏览器支持

在咱们使用这种新的处理图像的方法以前，注意到浏览器对剪切和遮罩的支持不一致是很是重要的。剪切的支持程度比遮罩的高, 可是 IE 浏览器不彻底支持剪切，如今的浏览器对 CSS 遮罩的支持也很是有限,因此咱们建议在一些元素上使用这些特性来加强效果，这样的话,若是用户的浏览器不支持 , 它也不会影响到内容的查看体验。

若是要测试和查看遮罩和剪切的支持程度，我建议在 JSFiddle 或 Codepen 编写一个实例而后在不一样的浏览器里面测试， 不要由于这些限制让你感到失望——它们老是很好领先的游戏一旦支持的话就会变成主流,你将会确切的指导怎样完全改变你的图像, 当你感到困惑时, 必定要参考可信的引用网站 Can I Use.

在体验过这些实例以后，这应该提供了一个关于遮罩和剪切的好的介绍。尽管如今浏览器支持程度颇有限,这将有可能在将来成为一种主流实践。思考怎么使用这些技术建立一个有趣的视觉效果老是让人感受愉快，网络图像的将来让咱们能够不依赖图像编辑器，直接在浏览器平台上更高效的去建立和修改图像。