SVG已经出现多年但网站设计师仍然在不断探索其新的用法。在本文中，重点将放在通过SVG应用的过滤器上，但不是将它们应用于SVG图像，我们将向您展示如何将它们应用于任何常规页面内容。
过滤器应用于SVG的方式实际上是通过CSS，告诉它过滤器具有什么ID。例如，使用相同的想法，过滤器可以应用于常规文本。关于这一点的好处在于，您可以为文本添加一些出色的图形外观，这在以前只能通过应用大量Photoshop滤镜并保存为图像才能实现。使用SVG过滤器，文本仍然可访问和可选，因为它仍然只是页面上的常规文本元素。
这里的代码将为文本创建一个置换贴图，该贴图还包含一个alpha贴图，使其看起来像水，并符合页面的主题。然后将创建另一个过滤器，使菜单显示为水斑点，它们稍微粘在一起，但随着它们向远处移动而分开。同样，这与此特定页面的主题保持一致，并显示了将SVG过滤器应用于其他内容的两种创造性方法。
有兴趣了解有关SVG的更多信息？请查看我们关于您在网络上需要了解的有关SVG的所有内容的文章。或者，使用其中一个很酷的CSS动画示例为您的网站添加一些兴趣。
首先，您需要使用上面的链接下载项目文件。完成后，将start project文件夹拖到代码IDE上，然后打开index.html页面。您将看到已经编写了一些页面内容。需要创建标题部分，这将包含受SVG过滤器影响的标题。在这里添加代码，就在body标签内。
<div class="bg">
<div class="middle">
<h2 class="headline">Underwater
Adventure Park</h2>
<div class="intro_block">
现在标题已完成，所有文本都已就绪。如果您此刻在浏览器中查看您的页面，您将看到一个带有一些文本的水图像。标题仍然是当前没有样式的，它将被设计为并应用了SVG过滤器。
<h3 class="subhead">Experience the Ocean
<br>Like Never Before</h3>
<p class="intro">Underwater
Adventure Park is an experience
unlinke anything you have ever
had. Travel to the depths of
the Ocean and walk among the
Sea Life!</p>
</div>
</div>
</div>
SVG代码可以添加到页面的任何位置，但是因为它不会被看到，所以最好将它放在关闭body标签之前的底部。SVG滤波器产生湍流噪声。请注意，过滤器具有ID - 这使CSS能够将其应用于页面上的另一个元素。
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feTurbulence type="turbulence"
baseFrequency="0.004" numOctaves=
"2" result="turbulence" />
</filter>
</svg>
现在转到page.css文件，最重要的是页面其余部分的CSS代码将是我们的新CSS所在的位置。这里SVG设置为根本不显示在页面上。标题2标记设置为应用了正确的字体。
svg {
display: none;
}
h2 {
font-size: 5.5vw;
font-family: 'Crete Round', serif;
}
该行高设置为零，因为后来的标题将动画，所以有在其网页上缩放控制是非常重要的。它也给了一些填充，使其周围有适量的空间，颜色也会改变。
.headline {
line-height: 0;
display: inline-block;
padding: 70px;
color: #ccffff;
在完成标题类时，下一行将SVG中的displacementFilter ID 应用于文本。该translate3d确保文本变成硬件加速。比例稍微改变，以确保当应用位移时，它看起来是正确的。
filter: url(#displacementFilter);
transform: translate3d(0, 0, 0);
transform: scaleY(1.8) rotateY(-2deg);
}
如果在此阶段测试过滤器，则湍流会完全取代文本。这很容易解决。返回index.html页面中的过滤器代码。这将采用湍流和源图形（即文本），并将其应用为位移滤波器。尝试改变湍流中的基频和八度音阶数。
<feDisplacementMap in2="turbulence" in="
SourceGraphic" scale="30" xChannelSelector="R"
yChannelSelector="G" result="disp" />
水边效果的边缘看起来有点刺耳。这可以用高斯模糊来治愈。在置换贴图后添加代码。当您刷新页面时，它确实模糊了文本，但位移消失了。同样，这些元素可以在创建效果的途中修复。
<feGaussianBlur in="SourceGraphic"
stdDeviation="15" result="blr" />
在先前的高斯模糊下方添加复合线。您将看到它将模糊和位移结合在一起，并且还为文本创建了水润的半透明效果。它已经在某种程度上软化边缘，但还不够。如果原始模糊可以加入到这里会很好。
<feComposite in="blr" in2="disp" operator="in" result="comp" />
使用CSS添加SVG过滤器：合并模糊
通过合并操作，它看起来会更好
合并操作使复合的最终结果与模糊效果合并。现在看起来它适合背景图像，似乎适合穿过水面的光线。关于文本的最好的部分是它仍然是可选择的和页面的一部分，不像你在Photoshop中创建它。
<feMerge result="final">
<feMergeNode in="blr" />
<feMergeNode in="comp" />
</feMerge>
返回page.css文件并添加关键帧，如下所示。这只会将字体大小从零垂直宽度扩展到5.5垂直宽度。在开始时，这将应用于标题，以便文本在屏幕上放大并放置到位。随着文本的移动，位移也会随着长度的变化而变化，产生水样的波纹。
@keyframes scaler {
from {
font-size: 0vw;
}
to {
font-size: 5.5vw;
}
}
该H2以前在步骤4中添加的风格与这个新的代码，这增加了CSS动画4秒的标题替换该代码。动画停止并保留在最后一个关键帧上。保存并在浏览器中测试它以查看文本到位。
h2 {
line-height: 0;
font-size: 0vw;
animation-name: scaler;
animation-duration: 4s;
animation-fill-mode: forwards;
font-family: 'Crete Round', serif;
}
现在让我们使用另一个SVG滤镜创建一个合适的水斑动画。将以下导航内容添加到正文代码的最顶部，在本教程第一步中开始的标题之前。这将创建一个圆圈汉堡菜单的基础知识。
<nav class="menu">
<input type="checkbox" href="#" class=
"menu-open" name="menu-open" id="menu-
open" />
<label class="menu-open-button"
for="menu-open">
<span class="hamburger
hamburger-1"></span>
<span class="hamburger
hamburger-2"></span>
<span class="hamburger
hamburger-3"></span>
</label>
现在可以添加其余的导航元素。这也使用Font Awesome开源图标库，该库已被添加到head部分以从该库的CDN链接。每个菜单圆形元素都有一个图标。
<a href="#" class="menu-item"> <i class="fa
fa-car"></i> </a>
<a href="#" class="menu-item"> <i
class="fa fa-ship"></i> </a>
<a href="#" class="menu-item"> <i
class="fa fa-map"></i> </a>
<a href="#" class="menu-item"> <i
class="fa fa-suitcase"></i> </a>
</nav>
将为此效果添加另一个过滤器。在SVG中，在先前添加的代码的结束过滤器标记之后添加此代码。这里的效果以与以前非常相似的方式建立起来。这将使菜单看起来像粘稠的液体分开。
<filter id="shadowed-blob">
<feGaussianBlur in="SourceGraphic"
result="blur" stdDeviation="20" />
<feColorMatrix in="blur" mode=
"matrix" values="1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7"
result="blob" />
<feGaussianBlur in="blob"
stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode=
"matrix" values="0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 -0.2"
result="shadow" />
CSS代码现在可以添加到不同的design.css中，只是为了将所有导航CSS保存在同一个地方。添加了一些代码，但这里的过滤器应用于菜单，这将是一个固定的菜单，以便它始终显示在屏幕上。
.menu {
filter: url(“#shadowed-blob");
position: fixed;
padding-top: 20px;
padding-left: 80px;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
}
当菜单打开时，菜单设置为不可见。创建每个菜单项的悬停元素，以便当用户将鼠标悬停在此时进行更改。当菜单项返回其原始位置时，菜单的每个子项都会有0.4秒的转换。
.menu-open {
display: none;
}
.menu-item:hover {
background: #47959f;
color: #b2f0f8;
}
.menu-item:nth-child(3), .menu-item:nth-
child(4), .menu-item:nth-child(5), .menu-
item:nth-child(6) {
transition-duration: 400ms;
}
第一个菜单项实际上是菜单的第三个子项，因为它前面有一个复选框和汉堡包。添加此选项可使第一个菜单元素在用户单击菜单后移动到位。每个菜单元素都会以稍长的时间移出。
.menu-open:checked + .menu-open-button {
transition-timing-function: linear;
transition-duration: 400ms;
transform: scale(0.8, 0.8) translate3d
(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
transition-timing-function: cubic-
bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration: 390ms;
transform: translate3d(110px, 0, 0);
}
使用CSS添加SVG过滤器：剩余移动
以不同的速度移动菜单元素以获得更加流畅的外观
剩余的菜单元素以不同的速度移出。这使得元素能够在动画的早期阶段粘在一起，这将使用SVG滤镜提供斑点的液体外观。保存文档并在浏览器中查看完成的结果。
.menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration: 490ms;
transform: translate3d(220px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration: 590ms;
transform: translate3d(330px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
transition-duration: 690ms;
transform: translate3d(440px, 0, 0);
}