我爱上了svg。当然，代码一开始看起来很密集和困难，但是当你了解它时，你会看到结果的美感。奖金是这些结果是代码，因此它可以连接到cms。您的设计师可以轻松地知道他们不必为您网站上的每篇文章或产品重现效果。
今天我想告诉你我是如何想出这种玻璃文字效果的。
svg可以承担很多，特别是当你刚刚开始学习它时（如果你是的话，chris的书是一个很好的起点）。它实际上是一种全新的语言，特别是对于缺乏设计印章的人来说，有许多新技术和注意事项需要了解。但是，与html一样，您会发现我们可以使用一些工具来帮助使svg更容易掌握。所以请耐心等待并继续尝试！步骤0：耐心和空间另外，给自己留出空间。从字面上看。svg代码很密集所以我喜欢使用两三个新行来分隔出来。它使代码更容易阅读，并帮助我看到不同的部分是如何分离的，视觉分散较少。哦，并使用注释来标记您在文档中的位置。这可以帮助组织您的想法并记录您的发现。
我已经为学习这种玻璃效应的过程中的每一步做了演示，以帮助巩固我们正在进行的事情。
好了，既然我们已经做好了心理准备，那就让我们深入了解它吧！
步骤1：获取基本图像首先要做的是：我们需要一个图像作为我们玻璃效果的背景。在这里，我们有一个<svg>元素和一个元素<image>。这类似于<img>在html中添加。您会注意到svg元素中viewbox属性和<image>元素的尺寸是相同的。这确保<image>了与我们链接的实际图片的大小完全相同。
这是一个值得注意的关键区别：我们正在链接到图像。svg文件本身不会绘制光栅图像，但我们可以在svg代码中引用一个，并确保资产位于我们指向的位置。如果您以前使用过adobe indesign，那很像是链接到布局中的图像资源 – 图像是在indesign布局中，但资产本身实际上存在于其他地方。
步骤2：扭曲图像到目前为止直截了当，但这是事情变得复杂的地方，因为我们要为刚刚插入的图像添加一个过滤器。此过滤器将扭曲图像。如果仔细观察最后一步中的演示与此步骤中的演示之间的差异，您会发现图像中对象的边缘有点粗糙和波浪状。这是工作中的过滤器！
首先，我们创建另一个<svg>来保持过滤器。这意味着如果我们想要重用我们的过滤器 – 例如在页面上的多个元素上 – 那么我们完全可以！
我们的第一个滤镜（#displacement）会扭曲我们的形象。我们将使用feturbulence与fedisplacementmap各萨拉soueidan解释比我在这个岗位要好得多。beau jackson也写了一篇很好的文章，展示了如何使用它们来制作云效果。可以说，这两个过滤器往往会在一起，我喜欢把它们想象成什么东西需要出现“摇摆不定”。
使用我们的过滤器容器，我们只需要将该过滤器应用于我们的图像，其中包含魔法filter属性<image>！
<svg>
<!-- more stuff -->
<!-- distortion image: clipped -->
<image xlink:href=https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/kyoto.jpg width=1890 x=0 height=1260 y=0 clip-path=url(#clip) filter= url(#distortion)></image>
<!-- filter: wobbly effect -->
<filter id=distortion>
<feturbulence type=turbulence basefrequency=0.05 numoctaves=2 result=turbulence/>
<fedisplacementmap in2=turbulence in=sourcegraphic scale=20 xchannelselector=r ychannelselector=g/>
</filter>
<!-- more stuff -->
</svg>
步骤3：剪辑文本我们不希望整个图像被扭曲。我们要将扭曲<image>的形状剪裁成某些文字的形状。这基本上是“通过”玻璃看到的图片部分。
要做到这一点，我们需要<text>在a中添加一个元素<clip-path>并给它一个id。id在clip-path我们<image>现在的称呼中将其形状限制为我们的形状<text>。精彩！
步骤4：显示完整图像好的，所以我们将扭曲的<image>剪辑剪<text>下来，但现在图像的其余部分都消失了。没有bueno。
我们可以通过在我们现有的之前添加相同<image>但没有clip-path或filter属性的副本来抵消这种情况<image>。这是我喜欢添加一些好评论以保持整洁的地方。这个想法就像在我们到目前为止的地方放置透明层。
<svg>我知道，我知道，这不是很整洁，我们正在重复自己。理想情况下，我们将直接在<text>元素上设置滤镜，并使用in=backgroundimage属性fedisplacementmap来扭曲文本背后的内容，而无需额外的元素。不幸的是，这对浏览器的支持很差，所以我们将使用多个图像。
<!-- more stuff -->
<!-- background image - visible -->
<image xlink:href=https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/kyoto.jpg width=1890 x=0 height=1260 y=0 ></image>
<!-- distortion image - clipped -->
<image xlink:href=https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/kyoto.jpg width=1890 x=0 height=1260 y=0 clip-path=url(#clip) filter= url(#distortion)></image>
<!-- more stuff -->
</svg>
步骤5：再次放置文本….接下来，我们将复制我们的文本，就像我们在最后一步中对图像所做的那样。不幸的是，因为文本在a中clip-path，所以它现在不可用于渲染。这是我们最后一次复制这样的内容，我保证！
现在我们应该看到一些看起来像普通图像的东西，上面有黑色文字。如果失真filter就<image>已经作出，我们已经是我们能看到“通过”玻璃，那么我们的新的<text>将是玻璃本身。
<svg>
<!-- more stuff -->
<!-- text - clipped -->
<clippath id=clip>
<text x=50% y =50% dominant-baseline=middle text-anchor=middle>kyoto</text>
</clippath>
<!-- text - visible -->
<text x=50% y =50% dominant-baseline=middle text-anchor=middle>kyoto</text>
<!-- more stuff -->
</svg>
步骤6：创建文本的暗边这是事情开始变得令人兴奋的地方，至少对我而言！
我们希望沿着文本元素创建一个黑色边缘，当与光边缘配对时（我们将看下一个），将增加文本外观对图像的深度。
我们想要一个新filter的<text>，所以让我们在我们的过滤器的svg元素中创建一个并给它一个id=textfilter并将它链接到元素的filter属性<text>。
svg从背景到前景工作，所以我们在滤镜中放置的第一件事就是玻璃所具有的阴影，因为它是最远的。我会和你保持一致，这个很复杂，但我们要一步一步地完成它。
对于这个效果，我们使用四个过滤原语：femorphology，feoffset，feflood和fecomposite。
femorphology是第一个。我们使用它来使文本变得更胖。在下面的演示，注释掉接下来的三个原语（feoffset，feflood，fecomposite）并使用它。我有radius=4实现玻璃效果的价值，但看看如果将它