前言
最近这段时间在学习 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
盒子设置好宽度、高度、背景然后展示出来,就是一些简单布局,此时展示如下:
完成这些,我们就可以开始关键的 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,如下所示:
如果设置为 0,则如下所示:
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
相关的心得或者学习资料,欢迎在评论区告诉我~
原文链接:https://juejin.cn/post/7216703870684086330 作者:一条会coding的Shark