1. 首页
  2. css

CSS文本上的SVG过滤器

以下是克里斯·斯科特的客串帖子。Chris在摆弄SVG过滤器以及如何将它们应用于文本。我觉得这很有趣,因为SVG过滤器和CSS过滤器有很大的不同。可以说更强大,因为有更多的他们,你可以做的事情,如斜面/浮雕或中风,你不能在CSS过滤器。Chris在这里详细介绍了它是如何实现的,包括一个使它变得更简单的工具。
几年来,Web开发已经有了一个总的趋势,不再在设计中使用图像。就在几年前,软件公司还倾向于使用圆角图像作为最佳的\”跨浏览器\”解决方案;CSS属性border-radius使得这种技术在今天显得非常过时。标题是这种趋势的另一个例子,在过去,人们可能会在Photoshop中生成一个奇特的横幅标题,并使用一个图像在页面上显示它。这些天,我们有网页字体在我们的处置和CSS3,以帮助我们实现阴影和其他效果。这些解决方案的加载速度更快,可扩展性更好,更易访问,语义更正确。但我们还能做更多!
svg过滤器
具有过滤效果的svg对于复杂的文本样式有很大的潜力。看看这个例子:
这行是使用SVG过滤器效果创建的。只是短信而已。您可以用光标选择它。搜索引擎可以索引它。它将在不损失质量的情况下扩大规模。要启动,只需很少的时间下载。你也可以取得更多的成就,过滤效果的创造空间是巨大的。这个例子是用一个名为拉斐尔.js我为它写了一个扩展名。本文讨论了开发该扩展的基本原理,并简要说明了如何使用它。
显然,只有0.1%的网页使用SVG图形。如果这个统计数字有什么依据的话,那么很有可能您没有定期使用SVG。为什么SVG的使用如此不受欢迎?这只是一个猜测,但我没有进入SVG的原因(直到我必须进入SVG)是它的学习曲线:SVG是一个XML词汇表,而且,我认为,是非常技术性的(矩阵乘法用于颜色变换,任何人?)。我进入SVG的路已经走完了拉斐尔.js,一个用于创建矢量图形的JavaScript库。因为它是一个让人感觉相当熟悉的JavaScript库,所以所有的复杂性都被抽象掉了。不久,我就开始像专业版一样创建复杂的图形了。Raphael的过滤效果
Raphael有一个缺点:不支持过滤效果。我记得我的一位客户特别要求在交互式动画数据可视化中为气泡提供阴影。当我撞上拉斐尔的极限时,这个要求让我难住了一段时间。对于那个项目,我为Raphael编写了一个非常具体的扩展来处理阴影。但最初让我对SVG望而却步的复杂性又回来了,而且比以往任何时候都更糟。毫无疑问,过滤效果是非常非常技术化的。
因此,在那个项目之后,我开始构建一个功能更全面的库,使过滤效果像拉斐尔绘制图形一样易于应用。
为拉斐尔介绍过滤效果!
以下是如何使用它:
首先,HTML。这一点非常简单,只是一个div和一个id:

Everything else is done in JavaScript.
To start an SVG drawing with Raphael you create a \”paper\” by referencing the id的容器元素:
var>
Now to do some drawing. This example creates some text and sets some of the style attributes:
// The first two arguments are the origin of the textvar>
Now for some effects! The simplest things you can do are shadows, blurring, lighting, embossing and colour shifting. Those require very little coding. Let\”s try the emboss effect. Add to the JavaScript:
title.emboss();
你可以连锁反应,所以在之后应用阴影是很简单的:
title.emboss().shadow();
很酷,是吧?如果您愿意,您可以通过创建自己的过滤器来更进一步。SVG规范列出了(较低级别)过滤器效果,可以组合起来创建各种过滤器(特别是抽搐矩阵,这个演示有完整的代码和其他一些可以实现的不同效果的例子:缺点是什么?好吧,除了矢量优于光栅(比如canvas)的优点和缺点之外,还有几个我能想到的:
– 浏览器支持–您可能不会惊讶地发现这里讨论的图形欺骗在旧版本的IE中不受支持,只有10。SVG本身将在IE9中呈现,只是没有效果。Firefox、Chrome和Opera对过滤效果的支持已经很长时间了——有些人可能对在文档中使用SVG的语义有效性持保留意见,当然svg标签并没有给出任何关于它的内容的线索;你可以使用一个明智的父代,尽管
,这篇文章让你很好地了解了过滤效果可以做什么,以及拉斐尔的过滤效果是如何做到的。查看Github上的项目页面以了解更多详细信息。感谢阅读!

CSS文本上的SVG过滤器 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%96%87%e6%9c%ac%e4%b8%8a%e7%9a%84svg%e8%bf%87%e6%bb%a4%e5%99%a8/