手把手教你用SVG实现具有波浪状态的盒子

一条会coding的Shark
2,452 阅读5分钟

前言

最近这段时间在学习 SVG，对 SVG 也有了一点点了解。我之所以会接触到 SVG，主要是因为我在无意间看到了一张图，后面了解到它是 SVG 绘制出来的，因此便对 SVG 产生了兴趣。

SVG简介

那么 SVG 是什么呢？我们先来看看官方的介绍：

SVG 是一种 XML 语言，类似 XHTML，可以用来绘制矢量图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。

其实看到 SVG 的时候我会联想到 jpg，png 以及 gif 等相关图片格式，因此这里我以一个新手入门的方式简单概括一下 SVG：它是一种图像格式，又被称为可缩放矢量图，是一种 XML 语言。（当然说法不够权威，可以略过）

效果展示

开始布局

大致了解了 SVG，这次我将使用 SVG 来绘制一个具有波浪状态的盒子，效果如下

我们先搭建 html 部分，代码如下所示：

<div class="container">
        <div class="box">
            <div class="content">
                <h2>波浪边框</h2>
            </div>
        </div>
</div>

然后准备好一部分 css，将上面的 div 盒子呈现出来，代码如下所示：

*{
    box-sizing: border-box;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    min-height: 100vh;
}
.container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .box{
    position: relative;
    width: 300px;
    height: 400px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container .box .content{
    position: absolute;
    padding: 20px;
    text-align: center;
    transition: 0.5s;
}

这里都比较容易理解，将 div 盒子设置好宽度、高度、背景然后展示出来，就是一些简单布局，此时展示如下：

image.png

完成这些，我们就可以开始关键的 SVG 部分了。

SVG绘制

在这整个的实现过程中，SVG 是最重要的部分，因为波浪状态就是通过 SVG 来绘制实现的。关于 SVG 有很多复杂的内容，不过这对我们即将创建的图像影响不大。 以下是我们需要用到的标签：

svg、filter、feTurbulence、animate、feDisplacementMap

下面会来一一介绍它们。

svg

我们首先在 html 里加入 svg 标签。我们即将要显示的 svg 内容都包含在此标签里面。<svg> 包裹并定义整个矢量图。<svg> 标签之于矢量图就如同 <html> 标签之于一个 web 页面。我们还可以定义它的样式，这里由于不复杂，因此只设置宽度和高度，既可以使用内联样式，也可以在 css 文件中加入。这里我们将宽度和高度设置为 0。

<svg width="0" height="0"></svg>

svg{
    width: 0;
    height: 0;
}

关于 svg 的宽度和高度这个属性怎么理解，大家可以把它想象成画布的宽高。我们打开浏览器后台，如果将宽高都设置为 100，如下所示：

image.png

如果设置为 0，则如下所示：

image.png

filter

filter 可以认为是 SVG 的容器，也有滤镜的意思，是比较核心的属性。像这次我们使用到的 <filter id="wavy"> 是 SVG 中的一个滤镜，使用 <wavy> 滤镜可以为 SVG 图形创建波浪效果。

feTurbulence

它表示滤镜效果，用于创建随机噪声纹理，噪声纹理我们暂且把它当做是纹理吧。在此效果中代码如下：

<feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="2">
</feTurbulence>

关于它的参数含义是这样的：x、y：表示噪声的起始位置，通常为 0。baseFrequency：表示噪声的频率，值越小噪声越细致。numOctaves：表示噪声的层数，值越大噪声越复杂。seed：表示噪声的种子值，用于确定噪声的形状和分布。不同的种子值生成不同的噪声图案。

animate

svg 中可以使用 animate 标签实现动画效果。 就是在相应的形状标签内加入 animate 标签，其中若干属性如下：attributeName 表示目标属性名称，dur 表示持续时间，repeatCount 表示次数，indefinite 表示无限次。

相关代码如下：

 <animate attributeName="baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatCount="indefinite">
 </animate>

这段代码表示在 60 秒的时间范围内，通过改变 SVG 元素的 baseFrequency 属性值来创建动画效果。动画效果的值由 "0.02" 开始，到 "0.05"，再回到 "0.02"，并且这个过程会由于 indefinite 而一直重复。

feDisplacementMap

<feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap>

这是一个 SVG 滤镜，用于对图形进行失真处理。在这里的失真我们暂且可以把它当做是对图像进行模糊处理。其中，in="SourceGraphic" 表示将当前图形作为输入源进行处理，而 scale="30" 表示失真程度的大小为 30。具体来说，该滤镜会将当前图形的每个像素根据其灰度值进行位移，从而产生一种类似于水波纹的视觉效果。

最终代码

最终下面就是 svg 部分的代码，将它放入 html 部分以及 css 部分即可。

HTML

<svg>
      <filter id="wavy">
          <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="2">
              <animate attributeName="baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatCount="indefinite">
              </animate>
          </feTurbulence>
          <feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap>
      </filter>
</svg>

CSS

.container .box{
    position: relative;
    width: 300px;
    height: 400px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    filter:url(#wavy);
}
svg{
    width: 0;
    height: 0;
}

码上掘金

总结

以上就是整个波浪盒子的实现过程，关于它的实现并不难，但是并不意味着 SVG 学习起来就很简单。这是我第一次接触 SVG，后续也会不断地学习它的知识，并且记录关于它的学习笔记，如果大伙有学习 SVG 相关的心得或者学习资料，欢迎在评论区告诉我~

本文正在参加「金石计划」

avatar
文章
阅读
粉丝