SVG 滤镜应用于文本

以下是 Chris Scott 的客座文章。Chris 正在尝试使用 SVG 滤镜以及如何将其应用于文本。我认为这很有趣，因为 SVG 滤镜与 CSS 滤镜有很大不同。可以说更强大，因为它们种类更多，并且可以执行诸如斜角/浮雕或描边等 CSS 滤镜无法实现的操作。Chris 在这里详细介绍了操作方法，包括一个使其更加简单的工具。

近年来，Web 开发中出现了一种普遍趋势，即在设计中减少使用图像。就在几年前，软件公司更倾向于使用圆角图像作为最佳的“跨浏览器”解决方案；而如今，CSS 属性 border-radius 使该技术显得非常过时。标题是这种趋势的另一个例子，过去人们可能在 Photoshop 中生成一个花哨的横幅标题，并使用图像将其显示在页面上。如今，我们可以使用网络字体和 CSS3 来帮助我们实现阴影和其他效果。这些解决方案加载速度更快、扩展性更好，并且更易访问且语义正确。但我们还可以做得更多！

SVG 滤镜

带有滤镜效果的 SVG 具有实现复杂文本样式的巨大潜力。请查看此示例

查看 CodePen 上 chrismichaelscott (@chrismichaelscott) 编写的笔 SVG 滤镜应用于文本

该行是使用 SVG 滤镜效果创建的。它只是一段文本。您可以使用光标选择它。搜索引擎可以索引它。它可以在不损失质量的情况下缩放大小。此外，下载时间非常短。您还可以实现更多功能，滤镜效果的创意空间非常大。该示例是使用名为 Raphael.js 的库和为其编写的扩展创建的。本文讨论了开发该扩展的理由，并简要介绍了如何使用它。

显然，只有 0.1% 的网页使用 SVG 图形。如果该统计数据有任何意义，那么您可能没有定期使用 SVG。为什么 SVG 的使用率如此低？这只是猜测，但我没有使用 SVG（直到我不得不使用）的原因是它的学习曲线：SVG 是一种 XML 词汇表，我认为它非常技术性（例如，颜色转换的矩阵乘法？）。我开始使用 SVG 的方式是通过 Raphael.js，这是一个用于创建矢量图形的 JavaScript 库。因为它是一个 JavaScript 库，所以感觉相当熟悉，所有复杂性都被抽象掉了。不久之后，我就像专业人士一样创建了复杂的图形。

Raphael 的滤镜效果

不过，Raphael 也有一个缺点：不支持滤镜效果。我记得我的一个客户特别要求在交互式和动画数据可视化中为气泡添加投影。这个请求让我困惑了一段时间，因为我遇到了 Raphael 的这个限制。对于那个项目，我为 Raphael 写了一个非常特殊的扩展来处理投影。但最初让我对 SVG 望而却步的复杂性又回来了，而且比以往任何时候都更糟糕。毫无疑问，滤镜效果非常非常技术性。

因此，在那个项目之后，我开始构建一个功能更全面的库，以便像 Raphael 使绘制形状变得容易一样，使滤镜效果也易于应用。

推出 Raphael 的滤镜效果！

以下是使用方法

首先是 HTML。这部分非常简单，只是一个带有 id 的 div

<div id="title-container"></div>

其他所有操作都在 JavaScript 中完成。

要使用 Raphael 开始 SVG 绘制，您可以通过引用容器元素的 id 来创建“画布”

var paper = Raphael("title-container");

现在开始绘制。此示例创建了一些文本并设置了一些样式属性

// The first two arguments are the origin of the text
var title = paper.text(0, 30, "Filters are ice cold");
title.attr({
"fill": "MintCream",
"font-family": "Butcherman",
"font-size": "54px",
"text-anchor": "start"
});

现在添加一些效果！您可以执行的最简单操作是阴影、模糊、灯光、浮雕和颜色转换。这些操作需要很少的代码。让我们尝试一下浮雕效果。添加到 JavaScript 中

title.emboss();

您可以链接效果，因此随后应用阴影非常简单

title.emboss().shadow();

很酷，对吧？如果您愿意，可以更进一步，创建自己的滤镜。SVG 规范列出了可以组合以创建各种滤镜的（较低级别的）滤镜效果（特别是卷积矩阵可用于大量操作）。

此演示包含完整的代码以及其他一些可以实现的不同效果示例

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的笔 SVG 滤镜应用于文本。

缺点

SVG 的缺点是什么？好吧——除了矢量与光栅（如 canvas）的优缺点之外——我能想到几个

• 浏览器支持——您可能不会惊讶地发现，此处讨论的图形技巧在旧版本的 IE 中不受支持，仅支持 IE10。SVG 本身会在 IE9 中呈现，只是没有效果。Firefox、Chrome 和 Opera 已经支持滤镜效果很长时间了
• 语义——有些人可能对在文档中使用 SVG 的语义有效性有所保留，当然 svg 标签没有提供任何关于其内容的线索；不过，您可以使用一个合理的父元素

总结

希望本文能让你了解滤镜效果的功能以及 Raphael 的滤镜效果如何实现它们。查看 Github 上的项目页面以了解更多详细信息。感谢阅读！