使用 SVG 蒙版 (mask) 实现视频填充文字效果

逛codepen的时候，发现一个使用视频来填充文字的效果，如下图所示：

代码地址

技术的发展对于提升设计的表现力还是很重要的。想想以前要是想在web中实现这样的效果，想想就头大。而现在只需几行代码就可以实现。

使用SVG来做这样的效果，非常简单。

下面就简单看下这样的效果使用SVG来实现这样的效果是多么的简单。

先准备基本的HTML结构：

<header>
    <video autoplay playsinline muted loop preload poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/oceanshot.jpg">
        <!-- <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ocean-small.webm" /> -->
    <source src="./ocean-small.mp4" />
    </video>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
    <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%" >
      <rect x="0" y="0" width="100%" height="100%" />
      <text x="72"  y="50">OCEAN</text>
     </mask>
  </defs>
 <rect x="0" y="0" width="100%" height="100%" />
  </svg>
</header>

下面是样式：

header {
  width: 100%;
  margin: 0 auto;
  position: relative;
  max-width: 1200px;
}

header video {
  width: 100%;
}

svg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

svg text {
  font-family: Biko, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 38px;
}

svg rect {
  fill: white;
}

svg > rect {
  -webkit-mask: url(#mask);
  mask: url(#mask);
}

主要是使用video标签链入视频以及SVG文字元素。

video没什么好说的，说说代码中的SVG以及效果的实现原理。

先在SVG中定义了一个蒙版(mask)元素，在蒙版中定义了一个矩形元素和text元素用来放文字。我们知道在蒙版中黑色为完全透明，白色为完全不透明。所以需要在样式中把矩形元素填充为白色，这样就可以把视频整体遮住。而文字则填充为黑色，则表示文字形状区域为透明区域，就可以显示在这个形状区域的视频。

此外要注意：蒙版(mask)不会直接渲染，只会在引用的地方起作用，所以display,opacity等属性对于mask元素来说都是不起作用的。

所以在外面，还定义了一个矩形元素用来引用定义好的蒙版(mask)。

svg > rect {
  -webkit-mask: url(#mask);
  mask: url(#mask);
}

就简单的几行代码，一个视频动态文字效果就完成了。