一步步教你用 CSS 为 SVG 添加过滤器

更新日期: 2019-03-31阅读: 2.8k标签: svg

自21世纪初以来,SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像,我将向你展示如何将它们应用于任何常规页面的内容上。

实际上我们是通过告诉 css 过滤器所拥有的 ID,然后再把过滤器应用于 SVG 的方式来实现。使用同样的方法,过滤器也可以用于常规文本。关于这一点的好处在于,你可以轻松的为文本添加一些出彩的特效,以前只能通过使用 Photoshop 滤镜并保存为图像来实现。使用SVG过滤器,文本仍然是可访问并可选的,因为它只是页面上的常规文本元素。

这里的代码将为文本创建一个置换贴图,这个贴图还包含一个 alpha 贴图,使其看起来像水一样,并符合我们页面的主题。然后创建另一个过滤器,使菜单显示为水斑点,它们会稍微粘在一起,但会随着它们向远处移动而分开。这也是为了和特定页面的主题保持一致,并展示了将 SVG 过滤器用于其他内容的两种创造性方法。从FileSilo下载本教程的源码


01. 开始

首先,你需要从上面的链接下载项目文件。之后将项目文件夹 start 拖到代码 IDE 上,然后打开 index.html 页面。你将会看到一些已经写好的页面内容。接下来创建标题部分,这里将包含受 SVG 过滤器影响的标题。在 body 标签内添加代码。

<div class="bg">
        <div class="middle">
            <h2 class="headline">Underwater 
            Adventure Park</h2>
            <div class="intro_block">


02. 完成标题

现在标题已完成,所有文本都已就绪。如果你此刻在浏览器中查看页面,将看到一个带有一些文本的图像。当前标题仍然是没有样式的,接下来为它设置样式并应用 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>


03. 创建一个 SVG 过滤器

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>


04. 隐藏 SVG

现在转到 page.css 文件,我们的新 CSS 会添加到所有其它CSS代码的顶部。这里的 SVG 被设置为根本不显示在页面上。为 h2 标记设置相对应的字体的字体。

svg {
    display: none;
}
h2 {
    font-size: 5.5vw;
    font-family: 'Crete Round', serif;
}


05. 加入 headline

把 line-height 设置为零,因为稍后标题将被加上动画效果,所以控制页面上的缩放很重要。它设定了 padding 值,使其周围能够有适量的空间,颜色也会改变。

.headline {
    line-height: 0;
    display: inline-block;
    padding: 70px;
    color: #ccffff;


06. 完成 headline

SVG 将用于替换标题文本

在完成 headline 类后,下一行将 SVG 中的 displacementFilter ID应用于文本。 translate3d 确保用硬件加速去处理文本。把 scale 稍微改变一点,以确保当发生位移时看起来是正确的。

    filter: url(#displacementFilter);
    transform: translate3d(0, 0, 0);
    transform: scaleY(1.8) rotateY(-2deg);
}


07. 替换它

现在文本被替换了

如果在此阶段测试过滤器,则波纹效果会完全取代文本。这很容易解决。回到 index.html 页面中的过滤器代码。这样将应用波纹和源图形(即文本),并将其应用为位移过滤器。尝试改变波纹的频率和振幅。

<feDisplacementMap in2="turbulence" in="
SourceGraphic" scale="30" xChannelSelector="R" 
yChannelSelector="G" result="disp" />


08. 柔化边缘

使用高斯模糊来柔化文本

水边效果的边缘看起来有点扎眼。这可以用高斯模糊来解决。在置换贴图后面添加代码。当你刷新页面时,它确实模糊了文本,但位移也消失了。同样这些问题可以在实现效果的过程中被修复。

<feGaussianBlur in="SourceGraphic" 
stdDeviation="15" result="blr" />


09. 组合两者

把模糊和位移进行组合,可以获得更令人愉悦的效果

在之前的高斯模糊下面添加复合线。你将看到会把模糊和位移效果结合在一起,并且还为文本创建了水润的半透明效果。它的边缘已经在某种程度上变得柔和了,但是这还不够。如果能把最初的模糊效果加入到这里效果会很好。

<feComposite in="blr" in2="disp" operator="in" result="comp" />


10. 合并模糊

通过合并操作,它看起来会更好

合并操作使前面的效果与模糊效果合并。现在看上去与背景图像很搭,就好像光线穿过了水面一样。对于文本来说它仍然是可选择的,并且是页面的一部分,这点和在 Photoshop 中作出的效果完全不一样。

<feMerge result="final">
                <feMergeNode in="blr" />
                <feMergeNode in="comp" />
            </feMerge>


11. 创建动画

回到 page.css 文件并添加关键帧,如下所示。这将会把字体大小从零垂直宽度扩展到 5.5 垂直宽度。把它应用于标题后,文本会在屏幕上放大并被放置到位。随着文本的移动,位移也会随着长度的变化而变化,产生水纹效果。

@keyframes scaler {
    from {
        font-size: 0vw;
    }
    to {
        font-size: 5.5vw;
    }
}


12. 更改 h2 样式

替换 h2 以引入一些动画

之前在步骤 4 中添加了 h2 样式。使用下面这段新代码替换旧代码,这段代码将为标题添加四秒的 CSS 动画。动画停止会停留在最后一个关键帧上。保存文件并在浏览器中测试,检查文本是否到位。

h2 {
    line-height: 0;
    font-size: 0vw;
    animation-name: scaler;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    font-family: 'Crete Round', serif;
}


13. 添加导航

接下来让我们用另外一个 SVG 滤镜创建一个水斑动画。将以下导航内容添加到正文代码的最顶部,也就是本教程第一步中开始的标题之前。这将在一个圆内创建一个看上去像汉堡


链接: https://fly63.com/article/detial/2634

如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可缩放的矢量图形)完美地解决了上文中提到的部分问题。

如何在vue项目中优雅地使用SVG

安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,在static下新建svg文件夹,用来放置当做icon使用的svg,使用include,include和img做区分。然后修改webpack.base.conf.js配置,这样svg-sprite-loader只会处理我们指定的static/svg下的文件

封装全局icon组件 svg (仿造element-ui源码)

引入 svg-sprite-loader 插件,vue-cli项目默认情况下会使用 url-loader 对svg进行处理,会将它放在/img 目录下,所以这时候我们引入svg-sprite-loader 会引发一些冲突。使用 webpack 的 exclude和 include

通过css改变svg img的颜色

一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的解决方案

SVG基础图形和D3.js

学习如何使用D3.js来创建这些图形?这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。使用D3.js画一个SVG 的 圆 circle,可以使用如下代码创建:

关于Data URLs svg图片显示出错和浏览器URL hash #

在使用生成的svg图作为<img>标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在<img src=\\\"Data URLs\\\">中,Data URLs格式与显示情况如下:

巧妙运用clip-path,实现CSS形状变换

CSS3的clip-path,这个clip-path看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

svg插入foreignObject无法响应事件

svg中可以通过foreignObject嵌入html,展示更丰富的样式。当需要给这中间的html绑定事件的时候,不管是使用委托和直接查询元素进行绑定的时候都无法生效。右键检查元素也检查不到具体的元素

svg的path的应用

我们这里只要用到M L A 和Z命令就可以了,M L 和Z命令比较简单,这里详细讲解A命令,A命令是画弧的命令,里面的A命令有 7个参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!