如何用svg实现一个视频文字

jsmask
1,355 阅读3分钟

这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

介绍

相信大家在一些产品展示网站比如苹果和腾讯等一下产品发布的时候都会出现文字或者图形里面在播放视频的效果，配合一镜到底随屏幕滚动会慢慢放大达到一种比较好的体验。当然，我们今天拆开去仅讲述视频如何在文字中播放的，本期我们将用svg+video，去完成这样一个文字里面播放视频的效果。

我们先看一下效果吧~

VID_20211122_210045.gif

或许，有些不明显，甚至有点中老年表情包的做派，但可以观察到，稻田麦浪这四个字里面是动的，单拿出来也算一中文字效果了，就是成本有点高毕竟用了视频，但十分的简单。接下来，就来讲解它吧。

正文

1.基本结构

<div id="app">
    <div class="video-txt">
        <video src="./assets/bg.mp4"></video>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice"></svg>
    </div>
</div>

#app{
    width:100%;
    height:100vh;
    overflow: hidden;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-txt{
    width: 800px;
    height: 640px;
    position: relative;
    video{
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
    }
    svg{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
}

我们这里先做个简单的布局，在div.video-txt由video与svg两部分构成，我们书写样式的使用一定要用svg去盖住video。但是现在我们发现一个问题，就是视频好像没自动播放，接下来，就来说说他吧。

2.视频播放

其实目前绝大部分浏览器不会允许你让视频自动播放，都会让用户主动触发播放，以免给用户带来一些困扰。但是，如果我们的需求仅需要视频中的动画不需要音频的播放那么就好办了，因为谷歌是允许静音自动播放的。

<video src="./assets/bg.mp4" autoplay muted loop playsinline preload></video>

  • autoplay：自动播放

  • muted：静音

  • loop：循环播放

  • playsinline：局域内播放，不脱离文档流。

  • preload：预加载

VID_20211122_210133.gif

3.神奇的mask

视频既然可以自动播放了，我们就可以在上面写文字了，这里我们就需要写svg的结构了。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice">
    <defs>
        <mask id="mask" x="0" y="0" width="100%" height="100%">
            <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
            <text x="5" y="185" class="svg-txt">稻田麦浪</text>
        </mask>
    </defs>
    <rect x="0" y="0" class="svg-rect" mask:url("#mask") />
</svg>

我们使用了引用元素defs,在里面我们用mask元素期望做一个蒙版，里面必须要有遮住视图的rect矩形和需要写入的文字，就可确定这些形状的哪些部分可见了，这样一来我想在下面的rect.svg-rect去引用他，因为svg本身就盖住了视频，又在同一个容器里，宽高也一样，这样一来我们用css的mask属性去引用刚写的蒙层，这样就会使文字镂空了，只播放视频，当然现在效果还是没有出现，因为我们还没有写入样式。

svg{
    .svg-txt{
        font-family: cursive;
        font-weight: bold;
        font-size: 96px;
    }
    .svg-rect{
        width: 100%;
        height: 100%;
        mask:url("#mask")
    }
}

这里我们定义了下文字的样式，当然重点也只有一句就是mask。相信很多前端同学也对此陌生吧，他其实是个比较新的属性，虽然兼容性不佳，但是功能真的很强大，它允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见。这样一来，我们可以用图片也行，svg也行去做他的蒙层。 把想要的图像就抠出来了，特别方便。

讲到这里我们就已经完了，是不是特别的容易。

VID_20211122_210045.gif

结语

与其说是效果讲解，更不如说是mask的科普，但是真的非常好用，而且跟svg搭配能完成炒鸡棒的效果。但是，建议大家如果在开发中还是谨慎使用，毕竟兼容目前来看还是有点不尽人意，仅仅是部分支持，但我们可以先学着早晚会用上的，就跟当年的transform一样。

微信截图_20211122225916.png

avatar
文章
阅读
粉丝