使用蒙版（mask）创建 Knockout Text 文字效果

聆木听风
1,254 阅读2分钟
原文链接： svgtrick.com

上一篇关于蒙版的应用的文章中，讲到了蒙版在文字中的应用。这样的文字效果在英文有个专门的名字Knockout Text，这篇文章就具体来讲讲SVG中的蒙版（mask）在文字上的应用。

所谓Knockout Text即表示：使用一个文字来约束一幅图像，使图像只有在文字轮廓下面的部分可见，创建一种Knockout Text的效果，如下图所示：

SVG蒙版（mask）实现Knockout Text方法

下面就来看看使用SVG蒙版（mask）实现Knockout Text的套路。

下面的代码是实现Knockout Text的一个代码模板，可以应付各种的Knockout Text效果。主要有三个层，第一个是在最下面的图层.knockout，这个图层主要是用来定义显示在文字轮廓里面效果用的。第二个图层是.knockout-text-bg，主要是用来剪切用的。第三个图层是.knockout-text，这个图层定义了蒙版的具体内容，即要显示的内容。

<div class="knockout">

  <svg class="knockout-text-container" width="100%" height="100%">

    <rect class="knockout-text-bg" width="100%" height="100%" fill="#000" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)" />

    <mask id="knockout-text">
      <rect width="100%" height="100%" fill="#fff" x="0" y="0" />
      <text x="50%" y="50%" fill="#000" text-anchor="middle">Knock Out Text</text>
    </mask>

  </svg>

</div>

文字还可以使用x和y两个属性来进行定位，具体的信息可以查看相关的文档。

从上面的代码可以看到第二个图层用了黑色来填充，而第三个图层是用白色来填充的。这里就要来了解下蒙版的原理：在蒙版中的黑色就是蒙住当前图层的内容，显示当前图层下面的层的内容来，蒙版中的白色则是显示当前层的内容。理解了蒙版的工作原理，就很容易理解上面的代码了。

样式

主要代码写好了，下面就可以写样式来实现想要的效果。比如我们这里，可以给.knockout这个图层定义一个渐变的颜色效果，这样就可以实现一个渐变颜色填充的文字效果。

.knockout {
  /* Ensure the bottom layer is full screen */
  height: 100vh;
  width: 100%;
  /* Add a colorful texture and cutom font-styling */
  background-image: linear-gradient(to left, #ff4e50 , #f9d423);
  text-transform: uppercase;
}

/* Knockout text font sizing for each line */

text:nth-child(2) {
  font-size: 5em;
}

text:nth-child(3) {
  font-size: 5.1em;
}

text:nth-child(4) {
  font-size: 15em;
}

详细代码地址。

充分发挥想象力，还可以实现更多有趣的文字效果。

本文主要是从SVG Knockout Text这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！

avatar
文章
阅读
粉丝